解构的应用

解构的作用：
可以让以下这三行代码变成一行：

let arr = ['Ilya', 'Kantor']
let firstName = arr[0]
let surname = arr[1]

变成：

let [firstName, surname] = ['Ilya', 'Kantor']

Array Destructuring

1.可以跳过赋值元素

// second element is not needed
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];       
console.log( title ); // Consul

2.赋值的元素不仅是数组，它可以是任意可遍历的对象

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

3.被赋值的变量还可以是对象的属性，不局限于单纯的变量

let user = {};
[user.name, user.surname] = "Ilya Kantor".split(' ');
console.log(user.name); // Ilya

4.解构赋值在循环体中的应用，可以配合 entries 使用

let user = {
    name: "John",
    age: 30
};
       
// loop over keys-and-values
for (let [key, value] of Object.entries(user)) {
    console.log(`${key}:${value}`); // name:John, then age:30
}

//Map对象
let user = new Map();
user.set("name", "John");
user.set("age", "30");
       
for (let [key, value] of user.entries()) {
    console.log(`${key}:${value}`); // name:John, then age:30
}

4.默认值

如果数组的内容少于变量的个数，并不会报错，没有分配到内容的变量会是 undefined。
let [firstName, surname] = [];
console.log(firstName); // undefined
console.log(surname); // undefined
       
当然你也可以给变量赋予默认值，防止 undefined 的情况出现：
// default values
let [name = "Guest", surname = "Anonymous"] = ["Julius"];
console.log(name);    // Julius (from array)
console.log(surname); // Anonymous (default used)

5.rest 参数

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
console.log(name1); // Julius
console.log(name2); // Caesar
       
// Note that type of `rest` is Array.
console.log(rest[0]); // Consul
console.log(rest[1]); // of the Roman Republic
console.log(rest.length); // 2

Object Destructuring

大致的意思是我们有一个 Object 想把里面的属性分别拿出来而无需通过调用属性的方式赋值给指定的变量。

具体的做法是在赋值的左侧声明一个和 Object 结构等同的模板，然后把关心属性的 value 指定为新的变量即可。

let options = {
    title: "Menu",
    width: 100,
    height: 200
};
       
let {title, width, height} = options;
       
alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

• 在这个结构赋值的过程中，左侧的“模板”结构要与右侧的 Object 一致，但是属性的顺序无需一致。
• 上述的赋值左侧是采用了对象简写的方式，类似于：let {title: title, width: width, height: height} = options;
• 如果不想这么写或者想使用其他的变量名，可以自定义的，如下：let {width: w, height: h, title} = options;

1.默认值

let options = {
   title: "Menu"
};
       
let {width = 100, height = 200, title} = options;
       
alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

2.rest 运算符

如果我们想象操作数组一样，只关心指定的属性，其他可以暂存到一个变量下，这就要用到 rest 运算符了

let options = {
    title: "Menu",
    height: 200,
    width: 100
};
       
let {title, ...rest} = options;
       
// now title="Menu", rest={height: 200, width: 100}
alert(rest.height);  // 200
alert(rest.width);   // 100

3.嵌套对象

如果一个 Array 或者 Object 比较复杂，它嵌套了 Array 或者 Object，那只要被赋值的结构和右侧赋值的元素一致就好了。

let options = {
    size: {
    width: 100,
    height: 200
},
    items: ["Cake", "Donut"],
    extra: true    // something extra that we will not destruct
};
       
// destructuring assignment on multiple lines for clarity
let {
    size: { // put size here
            width,
            height
          },
    items: [item1, item2], // assign items here
    title = "Menu" // not present in the object (default value is used)
} = options;
       
alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut