ES6 变量的解构赋值
ES6允许 按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。结构赋值在实际开发中可以大量减少我们的代码量，并且让我们的程序结构更清楚。赋值解构已经看了好多遍了，但是每次记不住，今天来写一篇博客来加深印象
一、数组的解构赋值
我觉得数组的解构赋值的作用就是能够同时给多个变量进行赋值，不用像以前那样需要些多个赋值表达式，下面是数组的解构赋值的基本用法
基本使用方法：
1.模式匹配：只要等号两边的模式相同，左边的变量就会被赋予对应的值
let [a,b,c]=[1,2,3];
console.log(a); //1
console.log(b); //2
console.log(c); //3
//嵌套数组进行解构
let [foo,[[bar],baz]]=[1,[[2],3]];
console.log(foo); //1
console.log(bar); //2
console.log(baz) //3
let [x,y,...z]=['a'];
console.log(x); //a
console.log(y); //undefined
console.log(z); //[]
2.不完全解构：等号左边的匹配模式只匹配等号右边数组的一部分
let [x,y]=[1,2,3];
console.log(x); //1
console.log(y); //2
3.只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值
例如：对于Set结构，也可以使用数组的解构赋值
let [x,y,z]=new Set(["a","b","c"]);
console.log(x); //a
4.解构赋值允许指定默认值：只有当数组成员严格等于undefiend，默认值才会生效
var [foo=true]=[];
console.log(foo); //true
var [x=1]=[undefined];
console.log(x); //1
var [y=1]=[null];
console.log(y); //null
二、对象的赋值解构
基本使用方法：
1、变量名必须与属性名同名
var {baz,foo,bar}={foo:"aaa",bar:"bbb"};
//上面是这个的简写形式：var {baz:baz,foo:foo,bar:baz}={foo:"aaa",bar:"bbb"};
console.log(baz); //undefined;
console.log(foo); //aaa
console.log(bar); //bbb
2、变量名与属性名不同名
var {foo:baz}={foo:"aaa",bar:"bbb"};
console.log(baz); //变量是baz,模式是foo```
###### 3、对于let和const而言，变量不能重新声明，一旦赋值的变量以前生命过就会报错
let foo;
let {foo}={foo:1};//报错
###### 4.对象的默认值生效的条件是对象的属性值严格等于undefined
var {x=3}={x:undefined};
console.log(x); //3
var {y=3}={y:null};
console.log(y) //null
###### 5.已经声明过的变量用于赋值解构需要使用圆括号
var x;
({x}={x:1});
#### 三、字符串的解构赋值：字符串也可以进行解构赋值。因为字符串可以被转换成一个类似数组的对象
const [a,b,c,d,e]='hello';
console.log(a); //h
console.log(b); //e
console.log(c); //c
console.log(d); //d
console.log(e); //e
#### 四、变量赋值解构的用途
######1.交换变量的值：不用像以前那样麻烦，还需要定义一个中间变量来存取变量的值
var x=1,y=2;
[x,y]=[y,x];
console.log(x); //2
console.log(y); //1
###### 2.从函数返回多个值
####### 2-1返回一个数组:es5中只能定义一个变量去存取返回的数组，然后通过这个变量去访问这个返回的数组的值，而现在可以直接访问这个数组的值
function example(){
return [1,2,3];
}
var [a,b,c]=example();
console.log(a) //1```
####### 2-2返回一个对象：可以直接取得返回对象里的变量值
function example(){
return {
foo:1,
bar:2
}
};
var {foo,bar}=example();
console.log(foo); //1
3、函数参数的定义
####### 3-1参数是有次序的值
function f([x,y,z]){
console.log(x);
}
f([1,2,3]) //1
####### 3-2参数是一组无次序的值
function f({x,y,z}){
console.log(x);
}
f({z:3,y:2,x:3}) //3
4、提取json数据
var jsonData={
id:42,
status:"ok",
data:[854,222]
}
let {id,status,data:number}=jsonData;
console.log(id,status,number); //42,"ok",[854,222]
5、遍历Map结构
var map=new Map();
map.set('first','hello');
map.set('second','world');
for(let [key,value] of map){
console.log(key+" is "+value)
}
//first is hello
//second is world
总结：变量的解构赋值在项目中常常能够用到，他能够给我们带来许多的便利，可以提高工作效率。
