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