ES6之解构

1、ES6允许按照一定的模式，从数组中和对象中提取值，对变量进行赋值，这种称为解构（Distructuring）；

let [a,b,c] = [3,5,6];// 相当于 a=3,b=5,c=6

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

另一种情况是不完全能解构，即等号左边的模式，只匹配一部分等号右边的数组。这种情况下，解构依然可以成功。

2、数组的解构赋值

完全解构：

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

集合解构：

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

可设置默认值（默认值也可以是函数）：

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

3、对象解构赋值

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

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

4、字符串的解构赋值

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

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

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

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

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

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

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

6、解构赋值的用途

① 交换变量的值

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]);

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

原文地址：https://www.cnblogs.com/zjl-712/p/11443040.html