说明:

• 解构赋值就是将对象中的属性或者数组中的元素拆解出来, 分别赋值给某些变量;

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