JS解构赋值：数组解构和对象解构

一种为变量赋值的新语法，一次可以为多个变量赋值。

分成两种情况：

数组解构

let [变量的集合] = [正常的数组]

举例说明：

let [x, y, z] = [10, 16, 21];

上述代码中 x y z 为 3 个变量，右侧是一个正常的数组，数组的单元会被赋值给变量（按着顺序进行赋值），即 x = 10; y = 16; z = 21;

数组解构的特点：

•  左边的变量与右边的数组单按着【顺序】对应
•  如果在边数量多（变量个数多），右边单元值数量少多余的变量值为 undefined
• 如果在边数量少（变量个数少），右边单元值数量多多出来数组单元“就浪费了”
• 可以使用 ... 剩余的运算符号，将多出的数组单元来全部获取

let [a, b, ...c] = [3, 9, 11, 24, 26];

// console.log(c); // [11, 24, 26]

• 如果左侧的变量被设置以 undefined 时，可以使用默认值

举例说明:

let [t, j, k, l = 8] = [4, 7, 1];

console.log(l); // 8

对象解构

let {变量的集合} = {正常的对象}

举例说明：

let { name, age } = { name: "阿尼亚", age: 6 };

name 和 age 就是变量名了，右侧的 name 属性与 name 变量对应age 属性与 age 变量对应，即属性名和变量名是一致的。

对象解构的特点：

• 与顺序无关，只能属性名有关系

• 如果变量名无法找到对应的属性，那么这个变量值为 undefined

举例说明：

let { password, gender, ...other } = {

    name: "阿尼亚",

    age: 6,

    gender: "女",

};

// 此时 password 值为 undefined

• 如果对象的属性没有对应的变量名，这个对象属性就是多余的如上代码中的 name 和 age 就是多余的

• 使用 ... 剩余的运算符可以将多余的对象属性单独获取

console.log(other); // {name: '阿尼亚', age: 6}

• 如果变量被赋值为 undefined 时，可以使用默认值