es.png

• 解構(gòu)賦值

?? 在 ES6 中新增了變量賦值的方式：解構(gòu)賦值杀怠。允許按照一定模式排龄，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值

1. 單獨(dú)賦值給變量如暖；

let [a, b, c] = [1,2,3]
console.log(a, b, c) // 1 2 3

?? :
解構(gòu)賦值重點(diǎn)在于賦值笆檀，賦值的元素是要拷貝出來賦值給變量，賦值的元素本身是不會(huì)改變的

2. 數(shù)組的解構(gòu)賦值盒至；

   • 賦值元素可以是任意可遍歷的對(duì)象酗洒；

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

   • 被賦值的變量還可以是對(duì)象的屬性，不局限于單純的變量妄迁；

   let user = {};
   [user.first, user.second] = 'hello world'.split(' ');
   console.log(user.first, user.second); // hello world
   

   • 循環(huán)體中的應(yīng)用寝蹈；

    // 配合Object.entries使用
    let user = {
      name: "Xiao",
      age: 12
    };
    for (let [key, value] of Object.entries(user)) {
      console.log(`${key}:${value}`); // name:Xiao age:12
    }
   

    // map
   let user = new Map();
   user.set("name", "Xiao");
   user.set("age", 12);
   for (let [key, value] of user.entries()) {
     console.log(`${key}:${value}`); // name:Xiao age:12
   }
   

   • 跳過賦值元素；

   let [a, , ,e] = [1,2,3,4];
   console.log(e); // 4
   

   • rest參數(shù)登淘；

   let [name1, name2, ...rest] = ["hello", "world", "hi", "newWorld"];
   console.log(name1); // hello
   console.log(name2); // world
   console.log(rest[0]); // hi
   console.log(rest[1]); // newWorld
   console.log(rest.length); // 2
   

   ?? :
   可以使用rest來接受賦值數(shù)組的剩余元素箫老，不過要確保這個(gè)rest參數(shù)是放在被賦值變量的最后一個(gè)位置上。

   • 默認(rèn)值黔州；

   let [first, second] = [];
   console.log(first); // undefined
   console.log(second) // undefined
   // 也可以給變量賦予默認(rèn)值耍鬓，防止undefined的出現(xiàn)
   let [first = "hello", second = "world"] = ["hi"];
   console.log(first); // hi
   console.log(second); // world  
   

3. 對(duì)象的解構(gòu)賦值；

   • 基本用法流妻；

   // 在賦值的左側(cè)聲明一個(gè)和Object結(jié)構(gòu)等同的模板牲蜀，然后把關(guān)心屬性的value指定為新的變量
   let options = {
     name: "Title",
     width: 100,
     height: 200,
   };
   let { name, width, height } = options;
   console.log(name); // Title
   console.log(width); // 100
   console.log(height); // 200
   // 也可以用其他的自定義變量名
   let {width: w, height: h, name} = options;
   console.log(w); // 100
   console.log(h); // 200
   console.log(name) // Title
   

   ?? :
   在這個(gè)解構(gòu)賦值的過程中，左側(cè)的"模板"結(jié)構(gòu)要和右側(cè)的Object一致绅这，但是屬性的順序無需一致涣达。

   • 默認(rèn)值；

   let options = {
     name: "Title",
   };
   let { width = 200, height = 100, name } = options;
   console.log(width); // 200
   console.log(height); // 100
   console.log(name); // Title
   

   • rest運(yùn)算符证薇；

   let options = {
    name: "Title",
    width: 100,
    height: 200,
   };
   
   let { name, ...rest } = options;
   console.log(rest.width); // 100
   console.log(rest.height); // 200
   

   • 嵌套對(duì)象度苔；

   // 被賦值的結(jié)構(gòu)和右側(cè)賦值的元素一致
   let options = {
     size: {
       width: 100,
       height: 200,
     },
     items: ["Header", "Menu"],
     extra: true,
   };
   
   let {
     size: { width, height },
     items: [item1, item2],
     name = "Title",
   } = options;
   
   console.log(name); // Title
   console.log(width); // 100
   console.log(height); // 200
   console.log(item1); // Header
   console.log(item2); // Menu
   

4. 字符串的解構(gòu)賦值；

   // 可以當(dāng)做是數(shù)組的解構(gòu)
   let str = "hello";
   let [a, b, c, d, e] = str;
   console.log(a, b, c, d, e); // h e l l o
   

????????????????????????????
以上是對(duì)解構(gòu)賦值的小小的總結(jié)～
推薦給大家?guī)灼韶洠?br> https://ponyfoo.com/articles/es6-destructuring-in-depth
https://www.sitepoint.com/javascript-ui-frameworks/