1.2解构赋值

核心点：

针对数组或者对象进行模式匹配，然后对其中的变量进行赋值

---

数组模型的解构（Array）

基本

let [a, b, c] = [1, 2, 3];

可嵌套 

let [a, [[b], c]] = [1, [[2], 3]]; 

可忽略

let [a, , b] = [1, 2, 3]; 

// a = 1

// b = 3

不完全解构

let [a = 1, b] = [];

// a = 1, b = undefined 

剩余运算符

let a = [1,2,3,4,5,6]
let [c,...d] = a
console.log(c); // 1
console.log(d); // [2,3,4,5,6]
//展开运算符必须放在最后一位

let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

字符串

let [a, b, c, d, e] = 'hello';

// a = 'h' // b = 'e' // c = 'l' // d = 'l' // e = 'o'

解构默认值

let [a = 2] = [undefined]; // a = 2 

当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。

let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

a 与 b 匹配结果为 undefined ，触发默认值：a = 3; b = a =3
a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1
a 与 b 正常解构赋值，匹配结果：a = 1，b = 2

---

对象模型的解构（Object）

 基本

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

解构默认值

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

---

---

扩展运算符和剩余运算符的区别

扩展运算符【spread】：将一个数组转为用逗号分隔的参数序列

//合并数组
var arr1 = [1,2,3];
var arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]

//字符串转数组
var str = 'hello';
var arr3 = [...str];
console.log(arr3); // ["h", "e", "l", "l", "o"]

//代替apply
function f(a,b,c){
  console.log(a,b,c)
}
let args = [1,2,3];
// 以下三种方法结果相同
f.apply(null,args)
f(...args)
f(1,2,3)

//array.from转化成数组对象
function f3(){
  console.log(Array.from(arguments))
}
f3(1,2,3) // [1,2,3]

//具有 Iterator 接口的对象,转换成数组
var nodelist = document.querySelectorAll('div');
console.log([...nodelist]) // 转化成数组

---

剩余运算符[rest]:把用逗号隔开的值序列组合成一个数组

//参数个数不确定时，用 rest运算符
function f1(...args) {
  console.log(args); // [1,2,3]
}
f1(1,2,3);

//参数个数不确定时的第二种情况
function f2(item, ...arr) {
  console.log(item); // 1
  console.log(arr);  // [2,3]
}
f2(1, 2, 3);

//rest运算符配合 解构使用
let [a,...temp]=[1, 2, 4];
console.log(a);    // 1
console.log(temp); // [2,4]

注意：

箭头函数中没有 arguments ，但是可以基于剩余运算符(...rest)获取实参集合

 let fn = (...rest) => {

// rest: [1, 2, 3] --> 用...rest代替arguments

}

fn(1, 2, 3);

---

总结：

扩展运算符（spread），功能是把数组或类数组对象展开成一系列用逗号隔开的值。

剩余运算符（rest），不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组。

当三个在等号右边，或者放在实参上，是 spread运算符

当三个点(…)在等号左边，或者放在形参上，为 rest 运算符

或者说：放在被赋值一方是rest 运算符。放在赋值一方是 spread运算符。

---

转载：

https://www.runoob.com/w3cnote/deconstruction-assignment.html       https://blog.csdn.net/weixin_43974265/article/details/113030814   https://www.jianshu.com/p/3935a80342a0