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

总结：变量的解构赋值在项目中常常能够用到，他能够给我们带来许多的便利，可以提高工作效率。