变量的解构赋值

ES6 的变量解构赋值

1. 数组的解构赋值
2. 对象的解构赋值
3. 字符串的解构赋值

4. 数值和布尔值的解构赋值

5. 函数参数的解构赋值

目的： 去获取数组或者对象里面的某个（些）值或者属性的值。

1.数组的解构赋值

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

写法上就是按照模式进行匹配，从左到右等号两边进行模式匹配。  

let [x, , y] = [1, 2, 3];
console.log(y); // 3
let [s,d,f]=[1,[2,3]]
console.log(d);// [2,3]
console.log(f);// undefined

 实现的本质就是等号右边的值是实现了Iterator 接口 的对象（会先转换为对象）。

 默认值

有的时候右边的表达式中没有值，这个时候被赋值的值为undefined。这个时候可以指定默认值。如：

let [s,d,f=get()]=[1,[2,3]]
console.log(d);
console.log(f);

function get(){
    return "F"
}

当f === undefined 的时候就会使用默认值，默认值可以是函数，也可以是常数，变量。需要注意的是 f 必须是undefined。 

let [e='S']=[null]
console.log(e);// null 

最后由于Set集合实现了Iterator  接口，那么也可以拆用这种解构赋值。

let [w,r,t]=new Set([1,2,3])
console.log(w);//1
console.log(r);//2

 2.对象的解构赋值

目的：为了快捷的获取对象里面的某个属性的值

对象的解构赋值，不像数组那样，按照模式匹配顺序的来进行匹配，而是按照属性名称进行匹配。

let {name,age,head}={name:"xx",age:12,head:{like:"eat"}}
console.log(head);

需要注意的点：

1.需要对对象解构赋值的时候进行重命名变量。

let {name:name_,age,head:{like:like_}}={name:"xx",age:12,head:{like:"eat"}}
console.log(name_); // xx
// console.log(name); //name is not defined
console.log(like_); // eat

里面的head 只是模式名称，为了能够匹配到对象的head属性对象，然后再是对象解构赋值把like匹配到，把like的值赋值给like_.

2.对已经声明的变量进行赋值。

let x;
{x} = {x: 1}; // 报错 编译器认为{x} 实际上是一个代码块
改变为
({x} = {x: 1};)

3.（了解） 由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

同理对String对象的解构。

const [a, b, c, d, e] = 'hello';
let {length : len} = 'hello';
console.log(a);
console.log(len);

 以及 数值和布尔值的解构赋值 函数解构赋值。

常用点：

1.不需要临时变量进行x与y交换。

let x = 1;
let y = 2;
let z=3;
let s=4;
[x, y, z,s] = [y, x, s,z];
console.log(s);
console.log(z);

2.函数返回值直接获取。

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

3.提取 JSON 数据

4.数组获取的本质是实现了Iterator 接口，所以可以直接对map对象获取其的key和value.也就是模式匹配。

let maps=new Map()
maps.set("a","a")
maps.set("b",2)
for (const i of maps) {
    console.log(i);
}
for (let [key,value] of maps) {
    console.log(key+value);
}