解构赋值，你不能不懂！

解构赋值

不少人可能和我同样，第一次看到这个词的时候摸不着头脑。可是冷静再看一遍好像明白了，“把数据结构分解开分别进行赋值”。

咱们先看几个小例子

let [a,b,c] = [1,2,3];
console.log(a,b,c);//1 2 3

let {name,age} = {name:"jack",age:"18"};
console.log(name,age);//jack 18

let {toString,length} = "hello";
console.log(toString === String.prototype.toString,length);//true 5

let [a,b,c,d,e] = "world";
console.log(a,b,c,d,e);//w o r l d

let {shift,length,key} =[1,2,3];
console.log(shift,length,key);//[Function: shift] 3 undefined

function fo([x,y,z]){
console.log(x,y,z);
}
fo([3,4,2]);//3,4,2

function fobj({x,y,z}){
console.log(x,y,z);
}
fobj({z:1,y:4,x:2});//2 4 1

let [x, y, z] = new Set(['a', 'b', 'c']);
console.log(x) // "a"

相信你们不难从上述的几段代码案例总结出来解构赋值的规律，我总结到以下几点：
一、解构主体为数组或者对象。
二、解构源必须具有Iterator接口或者通过转换以后具有Iterator接口。（什么是Iterator可看我接下来文章）
三、数组解构是按顺序进行解构（有序），对象是经过方法名或者属性名进行结构（无序）。
四、数组解构解构源会被转换为数组，对象解构解构源会被转换成对象。
五、解构对象时关键词解构会从当前实例持续向上访问原型链直到查不到返回undefined。

以上总结包含了大部分基础场景咱们会遇到的状况，但仍是有更多的细节须要咱们注意下：

咱们能够嵌套解构

let [a,[b,{name,age}],d] = [1,[4,{name:1,age:1}],6];
console.log(a,b,d,name,age);//1 4 6 1 1

咱们也能够改变解构的变量名

var {b:x,a:y} = {a:1,b:2};
console.log(x,y);//2 1

解构赋值能够设置默认值

var [x=1,y=2] = [,0];
console.log(x,y);//1 0

var {x=1,y=2] = {y:0};
console.log(x,y);//1 0

数组解构赋值对于不可迭代实例将报错

let [val] = 1;
let [val] = false;
let [val] = NaN;
let [val] = undefined;
let [val] = null;
let [val] = {};

数组解构能够跳跃赋值

//取出数组第三个
var [,,x] = [1,2,4];
console.log(x)//4

数组解构能够截取

let [,...x] = [1,2,4];
console.log(x)//[ 2, 4 ]

那它有哪些用途呢？

一、交换变量，是一种很酷的玩法

var {x:y,y:x} = {x:1,y:2};
console.log(x,y);//2 1

let x=1;let y = 2;
[y,x] = [x,y];
console.log(x,y);//2 1

二、接受函数返回的多个值

function test(){
return [1,2,3];
}
let [a,b,c] = test();
console.log(a,b,c);//1 2 3

function test(){
return {x:1,y:2,z:3};
}
let {y,z,x} = test();
console.log(y,z,x);//1 2 3

三、接受不按顺序的函数参数

function get({name,age,sex}){
console.log(name,age,sex);
}
get({name:"Topqiang",age:24,sex:1});//Topqiang 24 1
get({age:24,name:"Topqiang",sex:1});//Topqiang 24 1
get({name:"Topqiang",sex:1,age:24});//Topqiang 24 1

接口封装调用函数不再用考虑参数顺序了,之后咱们在封装方法提供工具包时就可让咱们的关注点放在业务自己而无需关注参数传入的顺序上。这是多么美好的一件事。 四、设置默认值

function get({name="topqiang",age,sex}){
console.log(name,age,sex);
}
get({age:24,sex:1});//Topqiang 24 1

五、为模块化编程提供优雅的模块引入方式

const {read,write} = require("fs");

六、函数的参数列表能够自动装载成数组

function getarr(...args){
console.log(args);
}
getarr(1,23,4);//[ 1, 23, 4 ]

。。。还有我没有发现的好处。。。

以上就是我对解构赋值的一些总结，但愿能对还没入门的你提供到一些帮助。es6给咱们提供了不少优美的语法糖，让咱们编起码来更优雅，更易读（前提懂es6），更规范。可是这些语法糖相对es5实现方式性能怎么样？要不要来咱们现场交流交流呢（详情请阅读原文找到我）！