解构赋值是对赋值运算符的扩展。是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
数组的解构赋值
ES6
中可以从数组中提取值,对变量进行赋值,这种过程称为解构。
示例:
例如下面这个例子,从数组中提取值,按照对应位置,对变量赋值:
let [x, k, d] = [1, 2, 3];
console.log(x); // 输出:1
console.log(k); // 输出:2
console.log(d); // 输出:3
这种写法属于模式匹配,只要等号两边的模式相同,就会将右边的值赋给左边的变量。
嵌套数组解构
在 ES6
中嵌套数组也可以进行解构。
示例:
let [x, [[k], d]] = [1, [[20], 3]];
console.log(x); // 输出:1
console.log(k); // 输出:20
console.log(d); // 输出:3
不完全解构
在解构数组时我们可以忽略某个值。例如下面这个例子中,右边有三个值,如果我们只想要将第二个值赋给指定变量,其他值不进行赋值,可以像下面这个写:
let [, x, ] = [1, 2, 3];
console.log(x); // 输出:2
剩余运算符,例如下面这个例子,变量 a
被赋值为 1
,其他的值都被赋给了 ...b
:
let [a, ...b] = [1, 2, 3, 4, 5];
console.log(a); // 输出:1
console.log(b); // 输出:[ 2, 3, 4, 5 ]
字符串解构赋值
字符串的解构可以理解为一维数组的解构,这在处理符串的时候特别方便。
示例:
let [a, b, c] ='123'
console.log(a, b, c); // 输出:1 2 3
console.log(typeof a); // 输出:string
字符串对象也有一个 length
属性,因为我们可以对这个属性解构赋值。
let {length : len} = 'hello, xkd';
console.log(len); // 输出:10
数值和布尔值的解构赋值
在解构赋值时,如果等号右边的值时数值或布尔类型,会先转换为对象,然后再进行赋值。
示例:
let {toString: a} = 100;
console.log(a === Number.prototype.toString); //输出:true
let {toString: b} = true;
console.log(b === Boolean.prototype.toString); // 输出:true
对象的解构赋值
对象的解构与数组有一个重要的不同,数组的元素是按次序排列的,变量的取值由它的位置决定。而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
示例:
let { a, b, c} = { a: 1, b: 2};
console.log(a, b, c); // 输出:1 2 undefined
上述代码中,等号左边的前两个变量 a、b
与右边的对象属性名相同,所以成功取到对应的值。而变量 c
没有对应的同名属性,导致取不到值,最后结果为 undefined
。
如果变量名与属性名不一致,还有一种方法能够成功取到值,例如像下面这个:
let { first: f, second: s } = { first:100, second:200 };
// 输出变量的值
console.log(f); // 输出:100
console.log(s); // 输出:200
上述代码中,first
和 second
是匹配的模式,f
和 s
才是变量,真正被赋值的是变量 f
和 s
。
和数组一样的是,解构也可以用于嵌套结构的对象。
示例:
例如下面这个例子:
let obj = {
stu: [
'xkd',
{ age: 18 }
]
};
let { stu: [name, { age }] } = obj;
console.log(name, age); // 输出:xkd 18
注意这时 stu
是模式,不是变量,因此不会被赋值。如果 stu
也要作为变量赋值,可以写成下面这样。
let obj = {
stu: [
'xkd',
{ age: 18 }
]
};
let { stu, stu: [key, { age }] } = obj;
console.log(stu); // 输出:[ 'xkd', { age: 18 } ]
console.log(key); // 输出:xkd
console.log(age); // 输出:18
函数参数的解构赋值
除了数组、字符串、对象等数据类型,在 ES6
中函数的参数也可以使用解构赋值。
示例:
例如下面这个例子:
function add([x, y]){
console.log(x + y);
}
add([3, 7]); // 输出:10
上述代码中,函数 add
的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量 x
和 y
。对于函数内部的代码来说,它们能感受到的参数就是 x
和 y
。
默认值
解构赋值允许指定默认值。有一点需要注意的是,即使设置了默认值,在进行解构赋值时,依旧会先赋值,如果没有赋值成功,则会使用默认值。如果没有默认值结果为 undefined
。
示例:
let [a=1, b=2, c=3, d] = [100, 200];
console.log(a, b, c, d);
//输出:100 200 3 undefined
上述代码中,a、b、c
都指定了默认值,但是只有 a、b
被成功赋值为 100、200
,c
没有被赋值,那么 c
会使用指定的默认值。而 d
既没有被赋值,也没有默认值,所以结果为 undefined
。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。