ES6
一、基本用法
ES6 允許按照一定模式财搁，從數(shù)組和對象中提取值蘸炸，對變量進行賦值，這被稱為解構（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);
也可以使用嵌套數(shù)組進行解構：
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
解構不僅可以用于數(shù)組，還可以用于對象茴扁。接下來我們對比下這兩種寫法铃岔，感受下ES6帶來的便利。
var expense={
type:"es6",
amount:"45"}峭火；
var type=expense.type毁习；//ES5寫法
var amount=expense.amount;//ES5寫法
console.log(type,amount）；
如果使用ES6一句話就可以實現(xiàn)了：
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
對象的解構與數(shù)組有一個重要的不同纺且。數(shù)組的元素是按次序排列的，變量的取值由它的位置決定坯苹；而對象的屬性沒有次序隆檀，變量必須與屬性同名，才能取到正確的值粹湃。上面例子等價于let { a: a, b: b } = { a: 1, b: 2 };
與數(shù)組一樣，解構也可以用于嵌套結構的對象泉坐。
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的值，常規(guī)做法是要通過一個定義中間變量來完成腕让，而通過解構賦值的寫法不僅簡潔孤钦，而且易讀，語義非常清晰纯丸。
2??從函數(shù)返回多個值
函數(shù)只能返回一個值偏形，如果要返回多個值，只能將它們放在數(shù)組或?qū)ο罄锓祷鼐醣恰Ｓ辛私鈽嬞x值俊扭，取出這些值就非常方便。
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 數(shù)據(jù)
解構賦值對提取 JSON 對象中的數(shù)據(jù)坠陈，尤其有用萨惑。
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博客點贊和關注，感激不盡庸蔼！
