【ES6】变量的解构赋值

---

ES6，全称为ECMAScript6。ES6与js的关系是：前者是后者的规格，后者是前者的实现。换句话说，ES是js的国际化版本，js是ES的子集。

---

一、什么叫解构赋值？

        ES6允许按照一定的模式，从数组或者对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
        而解构赋值的写法大多采用模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

---

大家不要怕，下面我们用通俗易懂的方式来说：先看例子

//普通赋值
var a=1;
var b=2;
var c=3;
//ES6的解构赋值
var [a,b,c]=[1,2,3];
//输出都是：
console.log(a);//1
console.log(b);//2
console.log(c);//3

        模式匹配就是说，等号两边的格式要相同，它才可以赋值。
        解构的意思是，对数组或者json格式的变量里面的内容进行分解，然后再赋值。类似于提取里面的值。

二、解构赋值有哪些分类？写法？

【1】对数组的解构赋值
【2】对对象的解构赋值
【3】对字符串的解构赋值
【4】对数值和布尔值的解构赋值
【5】对函数参数的解构赋值

下面一一讲解每个类型的用法和写法：

---

1)对数组的解构赋值

/******************标准写法格式******************/
var [a,b,c]=[1,2,3];
//输出：
console.log(a);//1
console.log(b);//2
console.log(c);//3
/******************嵌套数组写法格式******************/
var [a,[b,c]]=[1,[2,3]];
//输出：
console.log(a);//1
console.log(b);//2
console.log(c);//3
/******************含定义数组写法格式******************/
var [a,...b]=[1,2,3,4];
//输出：
console.log(a);//1
console.log(b);//[2,3,4]
/******************不完全解构写法格式******************/
var [x,y]=[1,2,3];
//输出：
console.log(x);//1
console.log(y);//2

let [a,[b],d]=[1,[2,3],4];
//输出：
console.log(a);//1
console.log(b);//2
console.log(d);//4
/******************解构失败写法示例******************/
var [x]=[];
//输出：
console.log(x);//undefined

var [a,b]=[1];
//输出：
console.log(a);//1
console.log(b);//undefined

【注】:上例中x、b解构失败，即x、b在模式匹配中未匹配到值，所以它们的值为undefined。

2)对对象的解构赋值

【注】:在对象解构赋值中，左边式中的变量的顺序不需要按照右边属性的排列顺序。
标准写法：

let {id:a,val:b}={id:"ko33",val:2};
//输出：
console.log(a);//"ko33"
console.log(b);//2
//解释：这里是对变量a、b赋值。
//首先，左右两边先按照模式匹配来取指，然后左边取得的值分别赋给a、b

简单写法：

let {id,val}={id:"ko33",val:2};
//输出：
console.log(id);//"ko33"
console.log(val);//2

下面的例子中，id是模式，a才是变量：

var {id:a}={id:"ko33",val:2};
//输出：
console.log(a);//"ko33"
console.log(id);//SyntaxError:Duplicate delaration "id"

下面的例子中，同一变量不能被let定义两次，var可以（参考let的用法）：

//错误
let id;
let {id}={id:"ko33"};
//正确
var id;
var {id}={id:"ko33"};
//正确
var id;
({id}={id:"ko33"});
//正确
var a;
var {id:a}={id:"ko33"};

还可以将js已定义的对象中的属性提取出来：

let {log,sin,cos}=Math;
//Math是js自带的对象

3)对字符串的解构赋值

这里字符串被转化成为了对象。

const [a,b,c,d]="eggs";
//输出：
console.log(a);//"e"
console.log(b);//"g"
console.log(c);//"g"
console.log(d);//"s"

这里字符串被转化成了对象，js的字符串对象含有属性length。

let {length:len}="eggs";
//输出：
console.log(len);//4

4)对数值和布尔值的解构赋值

let {toString:s}=123;

let {toString:s}=true;

5)对函数参数的解构赋值

【注】:先解释一下默认值问题
默认值的标准形式：
var [x=1,y=x]=[1,2];
输出是x=1;y=2
解释： 首先，看左边的式子，x的默认值为1，y的默认值为x。只有当x、y在右边对应的模式为undefined的时候，才会取默认值。
取指流程： 先看x对应的右边的模式为1，所以x=1，左边的默认值不去管它，再看y对应的右边的模式为2，所以y=2，左边y的默认值不去管它。

函数参数的解构赋值分为3种：
（1）普通类型：

function add([x,y]){
	return x+y;
}

add([1,2]);//3

（2）指定函数变量的默认值类型：

function move({ x = 0 , y = 0 }= {} ){
	return [x,y];
}

move({x:3,y:8});// [3,8]
move({x:3});// [3,0]
move({});// [0,0]
move();// [0,0]

（3）指定函数形参的默认值类型：

function move({x,y}= {x:0 , y:0} ){
	return [x,y];
}

move({x:3,y:8});// [3,8]
move({x:3});// [3,undefined]
move({});// [undefined,undefined]
move();// [0,0]

三、解构赋值的应用

【1】😮 交换两个变量的值
通常情况下，交换变量a、b的值，需要三句代码：
tmp=a;
a=b;
b=tmp;
现在ES6的语法只需要：
[a,b]=[b,a];

【2】😮 函数返回多个值
返回数组：

function test(){
	return [1,2,3];
}

var [a,b,c]=test();

返回数组：

function test(){
	return {
		id:"hcq",
		val:"lxz"
};

var {id,val}=test();

【3】😮 提取JSON数据
【注】😒 这里的变量data属于模式，不会被提取 😮

var jsonData= {
	id: 23,
	status: "alright",
	data:[596,69]
}

let {id,status,data:num}=jsonData;

查看更多ES6教学文章：

1. 【ES6】let与const 详解
2. 【ES6】变量的解构赋值
3. 【ES6】字符串的拓展
4. 【ES6】正则表达式的拓展
5. 【ES6】数值的拓展
6. 【ES6】数组的拓展
7. 【ES6】函数的拓展
8. 【ES6】对象的拓展
9. 【ES6】JS第7种数据类型：Symbol
10. 【ES6】Proxy对象
11. 【ES6】JS的Set和Map数据结构
12. 【ES6】Generator函数详解
13. 【ES6】Promise对象详解
14. 【ES6】异步操作和async函数
15. 【ES6】JS类的用法class
16. 【ES6】Module模块详解
17. 【ES6】ES6编程规范 编程风格

参考文献

阮一峰 《ES6标准入门（第2版）》