ES6學習(一)解構賦值
阿新 • • 發佈:2019-01-29
一、基本用法
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
解構不僅可以用於陣列,還可以用於物件
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]