说明:
- 解构赋值就是将对象中的属性或者数组中的元素拆解出来, 分别赋值给某些变量;
1. 正常的赋值方式:
-
对象:
说明: let 声明的 变量的变量名 必须和 对象设置的属性名 一致:
-
示例:
let { name, age } = { name: '张三', age: 18 }; console.log(name, age); // => '张三', 18 let { name, type } = { name: '张三', age: 18 }; console.log(name, type); // => '张三', undefined;
-
数组:
说明: 数组的解构赋值是, 对 let 声明的变量的 变量名没有要求
-
示例:
let arr= ['红', '黄', '蓝']; let [a, b, c] = arr; // => 变量 a, b, c 没有要求, 设置为 x, y, z也可 let [x, y, z] = arr; // => 跟上面的赋值方式没区别/** 特殊点: */
let [, , c] = ['红', '黄', '蓝']; // => 这种方式只会将 蓝 赋值给 c
2. 使用别名的方式进行赋值:
let { name: name1, age} = { name: '张三', age: 18 };
console.log(name); // => 空值; 使用别名之后, 使用原名进行访问得到是 空值
console.log(name1); // => '张三'
3. 当 let 声明变量的数量 与 对象中的属性 / 数组中的元素个数 不对等时
3.1 当声明的变量数量较少时: 此时多余的属性 / 元素 会被舍弃
let { name, age } = { name: '张三', age: '18', gender: '男' };
console.log(name, age); // '张三', 18; => gender 会被舍弃
let [x, y] = [1, 2, 3];
console.log(x, y); // 1, 2; => 3 会被舍弃
3.2 当声明的数量较多时: 此时多余的变量名会被赋值为: undefined
let { name, age, gender } = { name: '张三', age: 18 };
console.log(name, age, gender); // '张三', 18, undefined; => 多余的变量 gender 被赋值为 undefined
let [x, y, z] = [1, 2];
console.log(x, y, z); // 1, 2; => 多余的变量 z 被赋值为 undefined
4. 变量中含有 ... 方式
-
说明: 该方式只能用于数组的解构赋值
let [a, b, ...c] = [1, 2, 3, 4, 5, 6]; console.log(a, b, c); // 1, 2, [3, 4, 5, 6]; => 剩余的数组元素全部赋值给了 c: [3, 4, 5, 6] /** 即使 ...c 只对应 1个元素, c 也是 数组形式 */ let [x, y, ...z] = [1, 2, 3]; console.log(x, y, z); // 1, 2, [3]; => z仍然为数组形式: [3] 注意: ... 只能加载 最后一个变量上面, 加在其他变量: ...a, ...b 都会报错！
5. 设置使用默认值:
-
对象
let { name = '张三', gender = '未知' } = {}; // 张三, 未知 let { name = '张三', gender = '未知' } = { name: '李四' }; // 李四, 未知 let { name = '张三', gender = '未知' } = { name: '李四', gender: '男' }; // 李四, 男 let { name: otherName = '张三', gender = '未知' } = { name: '李四', gender: '男' }; console.log(name); // name使用了 别名 otherName, 要使用otherName进行访问, 使用 name 得到的是 空值 -
数组:
let [a = 0, b = 0] = []; // 0, 0 let [a = 0, b = 0] = [1]; // 1, 0 let [a = 0, b = 0] = [ , 1]; // 0, 1 let [a = 0, b = 0] = [1, 2]; // 1, 2 /** */ console.log([ , 1]); // => [empty, 1] -> legnth: 2
