变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,被称为解构(Destructuring);
数组的解构赋值
let [a, b, c] = [1, 2, 3];
console.log(a); //=> 1
console.log(b); //=> 2
console.log(c); //=> 3
这种写法称为 "模式匹配",只要等号两边的模式相同,左边的变量会被赋予右边对应的值.
let [a, , c] = [1, 2, 3];
console.log(a); //=> 1
console.log(c); //=> 3
let [a, ...b] = [1, 2, 3, 4];
console.log(a); //=> 1
console.log(b); //=> [2, 3, 4]
let [a, b, '''c] = [1];
console.log(a); //=> 1
console.log(b); //=> undefined 解构不成功
console.log(c); //=> []
当等号左右的模式只匹配右边的一部分时,称之为不完全机构
在不完全解构的情况下依然可以解构成功
let [a, b] = [1, 2, 3];
console.log(a); //=> 1
console.log(b); //=> 2
let [a, [b], c] = [1, [2, 3, 4], 5];
console.log(a); //=> 1
console.log(b); //=> 2
console.log(c); //=> 5
只要数据结构具有
Iterator接口,都可以采用数组的解构赋值
在解构赋值的时候,也可以提前给变量一个默认值,当一个变量有默认值的时,将会判断对应数组里的值 与 undefined 比较, 如果为真,这赋值默认值
let [a, b = 2, c = 3, d = 4] = [5, 6, undefined, null];
console.log(a); //=> 5
console.log(b); //=> 6
console.log(c); //=> 3
console.log(d); //=> null
对象的解构赋值
对象的解构赋值,需要等号的变量与右边对象的属性同名,才能取得正确的值
var {a, b, c} = {a: 111, b: 222};
console.log(a); //=> 111
console.log(b); //=> 222
console.log(c); //=> undefined
若变量名和属性名不一致,同时也想该变量名取到值,可通过以下的方式
var {a, b: c} = {a: 111, b: 222, c: 333};
console.log(a); //=> 111
console.log(c); //=> 222
事实上,以上只是一种形式的简写,原来的形式为
var {a: a, b: c} = {a: 111, b: 222, c: 333};
ES6只是将等号右边的对象的属性的值赋值给左边同属性名下的变量
与数组一样,对象也同样可以用于嵌套解构,甚至与数组相互嵌套
!对于对象的简写,有种情况下需要小心使用,即该变量已经声明过.
var x;
{x} = {x: 1}; //=> error
因为 JS会将 {x} 当成一个代码块而执行其内的语句.因此需要将他包含在一个()里.即({x} = {x: 1})
字符串的解构赋值
字符串可转换为类似数组的对象,同时也具有对象的一些属性,比如length.因此字符串也可以使用解构赋值
const [a,...b] = "hello";
console.log(a); //=> "h"
console.log(b); //=> ["e", "l", "l", "o"]
let {length} = "hello";
console.log(length); //=> 5 等效于 "hello".length
数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值或布尔值,则先转为对象
函数参数的解构赋值
function add([x, y, z = 1]) {
console.log(x + y + z);
}
add([1, 2]); //=> 1 + 2 + 1 = 4
PS:有了解构赋值,写法将变的非常简洁,代码也变得更加容易阅读.