前言

解构赋值是对赋值运算符的扩展，针对数组或对象进行赋值匹配，方便了对复杂数据字段的获取，且简洁易读，使语义清晰明了。

解构赋值

对数组的解构

1. 基本情况

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

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

2. 嵌套

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

3. 可忽略

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

4. 不完全解构

        let [a,b] = [1];
        console.log(a,b);         // 1 undefined 

5. 剩余运算符

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

（下一篇文章详解哦~）
6. 字符串

        let [a,b,c,d,e] = "hello";
        console.log(a,b,c,d,e);       // h e l l o

7. 其他
   如果解构出来 undefined，则触发默认值

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

对对象的解构

1. 基本情况

		// let { a, b } = { a: 1, b: 2 };
        // console.log(a, b);            // 1 2
        
        let { d: a } = { d: 3 };
        console.log(a);                   // 3

2. 嵌套

        let obj = { a: ["hello", { b: "world" }] }
        let { a: [x, { b }] } = obj;
        console.log(x, b);               // hello world

3. 可忽略

        let {a} = {a: 1, b: 2};
        console.log(a);                   // 1

4. 不完全解构

        let { a, b } = { a: 1 };
        console.log(a, b);                 // 1 undefined

5. 剩余运算符

        let {a,b,...rest} = {a:1,b:2,c:3,d:4}
        console.log(rest);                 // {c: 3, d: 4}

6. 其他

        let { a = 5, b = 3 } = { a: 1 }
        console.log(a, b);                    // 1 3
        let { a: aa = 10, b: bb = 5 } = { a: 3 }
        console.log(aa, bb);                  // 3 5

以上为本萌新个人总结，如有不当之处望指正，有问题可以联系
邮箱：yuna_03@163.com或
QQ：2635591841

更于2021.3.24