解构赋值（数组解构赋值,对象解构赋值）

数组结构赋值

数组解构赋值--数组解构赋值是按照元素位置一一对应 进性解构赋值

const [a, b, c, d] = [1, 2, 3, 4]

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

不完全解构

const [, e, r,] = [1, 2, 3, 4]

console.log(e, r);     // 2,3

只解构一个a

const [a] = [1, 2, 3, 4]

console.log(a);   // 1

解构最后一个

const [, , , r] = [1, 2, 3, 4]

console.log(r);   // 4

嵌套数组解构

const arr = [1, [2, [3, 4, [5]]]]            const [, [, [w, , [i]]]] = arr     console.log(w, i);  // 3,5 

解构剩余数组元素(解构剩余参数)

const [one, ...args] = [1, 2, 3, 4]

console.log(one, args);    // 1,[2, 3, 4]

数组解构赋值默认值      生效条件:被结构数组中的元素等于undefined

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

const [a = 1, b = 2, c = 3] = [11, 22, undefined]     console.log(a, b, c);    // 11 22 3

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

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

对象解构赋值

对象解构赋值是按照对象属性名进行匹配，匹配成功之后进行结构赋值的

const obj = { a: undefined, b: undefined, c: 33, d: 44, e: 55 }

结构剩余参数

const { e, a, d, ...t } = obj;

console.log(e, a, d);    // 55 undefined 44

console.log(t);            // {b: undefined, c: 33}

不完全批配

const { a, b } = obj     console.log(a, b);    //undefined undefined

对象结构赋值默认值       生效条件：匹配到的属性值为undefined

const { a = 1, b = 2, c = 3, e, f } = obj       console.log(a, b, c, e, f);    //1 2 33 55 undefined

const { aa = 11, bb = 22, cc = 33 } = {}       console.log(aa, bb, cc);    //11 22 33

对象结构赋值别名

进行对象结构赋值别名操作时,前者知识用来匹配，真正被赋值的是后者(也就是别名)

const obj = {a: 1, b: 2, c: 3, d: 4 }      

const { a: aaa, b: bbb, c: ccc, d } = obj

 console.log(aaa, bbb, ccc);    //1 2 3

console.log(aaa, bbb, ccc, d);   //1 2 3 4

结构剩余参数---使用延展参数语法

const { a, ...w } = obj

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