注：此篇文章是我參考阮一峰老師的[ECMAScript 6 入門]文章，自己記錄的筆記，詳細的內容請移步阮一峰老師的文章。
1.解構
- 數組解構
var [a,,b]=[1,2,3,4,5];
console.log(a)//1
console.log(b)//3
- 對象解構
var {a,b}={a:1,b:2,c:3}
console.log(a)//1
console.log(b)//2
- 對象匹配解構
// 對象的解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而不是前者。
var { foos: foosz, bars: barsaa } = { foos: "foosz", bars: "bbb" };
console.log(foosz); // foosz
console.log(barsaa);//bbb
console.log(foos); error: foo is not defined
- 字符串解構
字符串也可以解構賦值。這是因為此時，字符串被轉換成了一個類似數組的對象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
let {length : len} = 'hello';
len // 5
- 數值，布爾值解構
解構賦值時，如果等號右邊是數值和布爾值，則會先轉為對象。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
上面代碼中，數值和布爾值的包裝對象都有toString屬性，因此變量s都能取到值。
解構賦值的規則是，只要等號右邊的值不是對象或數組，就先將其轉為對象。由于undefined和null無法轉為對象，所以對它們進行解構賦值，都會報錯。
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
- 函數參數解構
[[1, 2], [3, 4]].map(([a, b]) => a + b);
undefined就會觸發函數參數的默認值。
[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]
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]
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) 交換變量的值
let x =1;
let y =2;
[x,y]=[y,x];
(2) 從函數返回多個值
//返回一個數組
function rA(){
return [1,2,3];
}
let [a,b,c] =rA();
//返回一個對象
function rO(){
return {
foo : 1,
foo2: 2
}
}
let {foo,foo2}= rO()
(3) 提取JSON數據
解構復制對提取JSON對象中的數據尤其有用。
let jsonData={
id:22,
name:'wwwt',
data:[222,333],
doT:function(){
return this.name
}
}
let { id,doT,name,data}=jsonData
(4) 遍歷Map結構
任何部署了Iterator接口的對象，都可以用for...of循環遍歷。Map結構原生支持Iterator接口，配合變量的解構賦值，獲取鍵名和鍵值就非常方便。
var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world
如果只想獲取鍵名，或者只想獲取鍵值，可以寫成下面這樣。
// 獲取鍵名
for (let [key] of map) {
// ...
}
// 獲取鍵值
for (let [,value] of map) {
// ...
}
