ES6
一、基本用法
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。在此之前，变量赋值，只能直接指定值。
let a = 1;
let b = 2;
console.log(a,b);// 1,2
而如今采用ES6语法，可以这样写：
let a,b;
[a,b]=[1,2];
console.log(a,b);
也可以使用嵌套数组进行解构：
let a,b,rest;
[a,b,...rest]=[1,2,3,4,5,6];
console.log(a,b,rest);//1 2 [3,4,5,6]
let [a, [[b], c]] = [1, [[2], 3]];
console.log(a,b,c);// 1 2 3
解构不仅可以用于数组，还可以用于对象。接下来我们对比下这两种写法，感受下ES6带来的便利。
var expense={
type:"es6",
amount:"45"}；
var type=expense.type；//ES5写法
var amount=expense.amount;//ES5写法
console.log(type,amount）；
如果使用ES6一句话就可以实现了：
const { type,amount}=expense；//ES6写法
我们再举个对象结构的例子：
let a,b;
({a,b}={a:1,b:2})
console.log(a,b);// 1,2
let {a=10,b=5}={a:3};
console.log(a,b);// 3 5
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。上面例子等价于let { a: a, b: b } = { a: 1, b: 2 };
与数组一样，解构也可以用于嵌套结构的对象。
let metaData={
title:'abc',
test:[{
title:'test',
desc:'description'
}]
}
let {title:esTitle,test:[{title:cnTitle}]}=metaData;
console.log(esTitle,cnTitle);// abc test
二、应用场景
1️⃣：变量之间交换
let a=1;
let b=2;
[a,b]=[b,a];
console.log(a,b);// 2 1
交换变量a和b的值，常规做法是要通过一个定义中间变量来完成，而通过解构赋值的写法不仅简洁，而且易读，语义非常清晰。
2️⃣从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
function f(){
return [1,2]
}
let a,b;
[a,b]=f();
console.log(a,b);// 1 ,2
变形一：
function f(){
return [1,2,3,4,5]
}
let a,b;
[a,,,b]=f();
console.log(a,b);// 1 4
变形二：
function f(){
return [1,2,3,4,5]
}
let a,b,c;
[a,,...b]=f();
console.log(a,b);//1 [3,4,5]
3️⃣提取 JSON 数据
解构赋值对提取 JSON 对象中的数据，尤其有用。
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);//42, "OK", [867, 5309]
如果觉得文章对你有些许帮助，欢迎在我的GitHub博客点赞和关注，感激不尽！
