es6 解构赋值

解构赋值
注意：解构赋值声明和赋值必须在一起，不能先声明后赋值

//不可以这样写,会报错****
let [a,b];
[a,b]=[1,2]

• 数组的解构赋值

 
//数组的解构赋值
 
//在以前我们想要定义三个变量的话
let a = 1;
let b = 2;
let c = 3;
console.log(a); //1
console.log(b); //2
console.log(c); //3

//es6之后我们可以利用解构赋值，就可以一 一对应
let [a, b, c] = [1, 2, 3];
console.log(a); //1
console.log(b); //2
console.log(c); //3

（1）只要等号两边的模式是相同的，就可以解构成功。注意这里指的是数据形式要一模一样，不一样会报错

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

//以下情况就会报错，因为b是数组类型，而3是基本数据类型，两个数据形式不一致
let [a,[b],c]=[1,3,8]
console.log(a); //1
console.log(b); //3
console.log(c); //8

（2）等号两边数据模式不一样会报错，但是等号两边数据数量可以不同。

//右侧数据少，左右两边会根据顺序进行匹配，c没有数据与之匹配就是undefined
let [a,b,c]=[1,3]
console.log(a); //1
console.log(b); //3
console.log(c); //undefined

//左侧数据少，已有的会被解构成功
let [a,b]=[1,3,9]
console.log(a); //1
console.log(b); //3

（3）等号右边必须是可遍历的，如果是不可遍历的数据会报错

let [a]=1
console.log(a); //1 is not iterable

（4）指定默认值，在解构赋值中允许指定默认值。当一个位置没有值的时候，页就是当模式相同，但是右边没有值的时候可以指定默认值。默认值只有是undefined才能生效，否则以右边的值为准

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

• 对象的解构赋值
  变量的解构赋值和数组的解构赋值不太一样：
  数组的解构赋值：元素是按次序排列的，变量的取值由变量所处的位置决定
  对象的解构赋值：对象的属性没有次序，因此变量必须和属性同名才能取到 正确的值

//从代码中可以看出来对象解构赋值的时候是和顺序无关的，而属性名字就显得尤为重要。
let { foo, bar } = { bar: '我是bar', foo: '我是foo' }
console.log(foo); // 我是foo
console.log(bar); // 我是bar

变量名与属性名不一致时赋值

let{a:b}={a:1}
console.log(b);//1
console.log(a);//a is not defind
//先找到同名属性，在赋值给对应的变量，所以真正赋值的是后面的变量，也就是b，而不是前面的属性名

• 数组是特殊的对象
  由于数组是特殊的对象，所以数组也支持对象属性的解构赋值：

let arr = [1, 2, 3];
let { 0: first, 1: second, 2: last } = arr;
console.log(first); // 1
console.log(second); // 2
console.log(last); // 3

• 字符串的解构赋值
  字符串在进行解构赋值的时候其实是被转化成为了一个类数组的对象。

let [a, b, c, d, e] = 'hello';
console.log(a); // h
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o
//因为字符串具有length这个属性，因此我们还可以对该属性进行解构赋值：
let { length: len } = 'hello';
console.log(len); // 5

• 函数参数的解构赋值
  函数的参数也可以进行解构赋值，这是一个解构赋值运用比较多的场景，其实就是对之前所讲的数组、对象、布尔值、数值解构赋值的一种实际使用：

let a={name:'小明',age:18}
    function wuKongYouLook({name,age}={}){
      console.log(name,age)
      }
      wuKongYouLook(a)//小明,18
      wuKongYouLook() //undefined,undefined
//同理,当let {name,age} =null或者undefined时,系统要报错,但是这时它发现参数有默认值,于是就变成了let {name,age} = {},空对象是可能有name属性的,那就没错,去找找看,没有,那就返回undefind.　

参考文章：https://blog.csdn.net/caomage/article/details/84339041
扩展运算符
https://blog.csdn.net/weixin_42735598/article/details/106545663