ES6之解构

一、ES6容许按照必定的模式,从数组中和对象中提取值,对变量进行赋值,这种称为解构(Distructuring);数组

let [a,b,c] = [3,5,6];// 至关于 a=3,b=5,c=6

本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。若是解构不成功,变量的值就等于 undefined函数

另外一种状况是不彻底能解构,即等号左边的模式,只匹配一部分等号右边的数组。这种状况下,解构依然能够成功。spa

二、数组的解构赋值prototype

彻底解构:code

let [a,b,c] = [6,7,8]; // a=6,b=7,c=8

不彻底解构对象

let [a,[b],c] = [2,[4,6],7];  // a=2,b=4,c=7

集合解构:blog

let [head,...tail] = [1,3,4,5,6];  // head= 1,tail=[3,4,5,6]

可设置默认值(默认值也能够是函数):字符串

let [x,y='b']=['a'];   //x=a,y=b

三、对象解构赋值io

①解构变量名必须存在于对象属性中,这样才能取到值;function

let {name,age}={name:'zjl',age:18} //name='zjl',age=18  注意:左侧变量名必须在对象属性名中

②若是变量名与属性名不一致,必须写成下面这样,重命名

let {name:username,age}={name:'zjl',age:18}   // username='zjl',age=18

③根据第二点可知,解构赋值是如下方式的简写

let {name:name,age:age}={name:'zjl',age:18}   //因此当对象属性名和属性值相等时能够简写

④ 嵌套解构

let {p:[x,{y}]}={p:['hello',{y:'world'}]} // x=hello,y=world

⑤对象 解构也能够设置默认值

let {x:y=9}={10}   //y=9

四、字符串的解构赋值

①解构时,字符串被转换成一个相似数组的对象。

const [a,b,c]='zjl'   // a='z',b='j',c='l'

②对字符串的length属性进行解构

let {length}='hello'   //length=5

五、数组和布尔值解构赋值

解构时,若是等号右边是数值和布尔值,则会先转为对象

let {toString: s} = 123; //函数 s === Number.prototype.toString true
let {toString: s} = true; //函数 s === Boolean.prototype.toString true

六、解构赋值的用途

① 交换变量的值

let x = 1; let y = 2; [x, y] = [y, x];

②函数返回值

function example() { return [1, 2, 3]; }
let [a, b, c] = example();

③函数参数的定义

function f([x, y, z]) { ... }
f([1, 2, 3]);

④模块的按需导入  导入指定的值