一、数组的解构赋值
//ES6方法:结构一致,一一对应
let [name,age] = ["zhangsan", 18];
let [x,[y,z]] = [7, [8, 9]];
//不完全提取
let [,,height] = ["zhangsan", 18,180];
二、字符串的解构赋值
let [a, b, c, d] = "hxsd";
console.log(a, b, c, d); // 结果:h x s d
三、对象的解构赋值(重点,提取并重命名)
let obj = {
name: {firstName:"zhang",lastName:"san"},
city: "beijing",
hobby: ["足球","篮球","游戏","读书"]
};
//变量名要与对象key一致,可以使用冒号':'定义新变量名
//重点,提取并重命名
let {name:new_name,name:{firstName:fname,lastName},city, hobby} = obj;
console.log(new_name,fname,hobby);
四、使用
注意:解构失败,变量的值等于undefined。
1、交换变量值
let a = 1;
let b = 2;
[b,a]=[a,b]
console.log(a,b) //2,1
2、提取变量
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
3、默认值(重点)
解构赋值允许指定默认值。
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
注意,ES6 内部使用严格相等运算符===
,判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined
,默认值才会生效。
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
上面代码中,如果一个数组成员是null
,默认值就不会生效,因为null
不严格等于undefined
。
4、函数参数的解构赋值(重点)
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
通常情况下,定义了默认值的参数,应该是函数的尾参数。因为这样比较容易看出来,到底省略了哪些参数。如果非尾部的参数设置默认值,实际上这个参数是没法省略的。
// 例一
function f(x = 1, y) {
return [x, y];
}
f() // [1, undefined]
f(2) // [2, undefined]
f(, 1) // 报错
f(undefined, 1) // [1, 1]
// 例二
function f(x, y = 5, z) {
return [x, y, z];
}
f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]
上面代码中,有默认值的参数都不是尾参数。这时,无法只省略该参数,而不省略它后面的参数,除非显式输入undefined
。
如果传入undefined
,将触发该参数等于默认值,null
则没有这个效果。
function foo(x = 5, y = 6) {
console.log(x, y);
}
foo(undefined, null)
// 5 null
上面代码中,x
参数对应undefined
,结果触发了默认值,y
参数等于null
,就没有触发默认值。
备注
解构赋值常与展开运算符联合使用