- ES6允許按照一定的模式（模式匹配）筐喳，從數(shù)組和對象中提取值，對變量進行賦值函喉，這被稱為解構（Destructuring）避归。
- 如果解構不成功管呵，就會賦值undefined。
一捐下、數(shù)組的解構賦值
- 解構時按順序排列
let [a, b, c] = [1, 2, 3]; // a = > 1; b => 2; c => 3; let [a, [b, c], d] = [1, [2, 3], 4]; // a => 1; b => 2; c => 3; d => undefined; // 當?shù)忍栕筮呑兞可儆诘忍栍疫呏禃r(包括變量缺省和變量個數(shù)不足), 仍可解構成功,成為不完全解構 let [a, , c] = [1, 2, 3]; // a => 1; c => 3; // 多余參數(shù)的解構 let [a, b, ...c] = [1, 2, 3, 4, 5]; // a => 1; b => 2; c => [3, 4, 5]; // 解構不成功的情況 let [a] = []; // a => undefined; let [a, b] = [1] // a => 1; b => undefined; // 當?shù)忍栍疫叢皇菙?shù)組或類數(shù)組（即可遍歷的結構） 將會報錯 let [a] = 1; let [a] = false; let [a] = NaN; let [a] = undefined; let [a] = null; let [a] = {}; // TypeError: Invalid attempt to destruture non-iteable instance
二萌业、對象的解構賦值
- 解構時無次序,屬性名必須相同
let {a, b} = {a: 1, b: 2} // a => 1; b => 2; let {a, b, c} = {a: 1, c: 2, d: 3} // a => 1; b => undefined; c => 2; d => d is not defined let {a: b} = {a: 1, b: 2} // a => a is not defined; b => 2
三、字符串的解構賦值
- 相當于把字符串切割成一個數(shù)組奸柬，順位取
let [a, b, c] = 'string'; // a => s; b => t; c => r; let [a, b, c] = '字符串也可以解構'; // a => 字; b => 符; c => 串; let [a, b, c] = '字符'; // a => 字; b => 符; c => undefined;
四生年、數(shù)值和布爾值的解構賦值
- 解構賦值時廓奕，如果等號右邊是數(shù)值和布爾值，則會先轉為對象桌粉。
let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true //上面代碼中蒸绩，數(shù)值和布爾值的包裝對象都有toString屬性，因此變量s都能取到值.
- 解構賦值的規(guī)則是番甩，只要等號右邊的值不是對象或數(shù)組侵贵，就先將其轉為對象。由于
undefined和null無法轉為對象窍育，所以對它們進行解構賦值宴胧，都會報錯漱抓。let { prop: x } = undefined; // TypeError let { prop: y } = null; // TypeError
五恕齐、函數(shù)參數(shù)的解構賦值
let a = [1, 2]; function log ([a, b, c]) { // 相當于 let [a, b, c] = [1, 2]; console.log(a, b, c); // a => 1; b => 2; c => undefined; } log(a); function alert({title = 'title', content = 'content', button = 'button'}) { console.log(title, content, button); } alert({title: '123'})
六、用途
（1）交換變量的值
let x = 1;
let y = 2;
[x,y] = [y,x];
console.log(y); //x = 2,y = 1;
這樣的寫法不僅簡潔仪或，而且易讀，語義非常清晰范删。
（2）從函數(shù)返回多個值
- 函數(shù)只能返回一個值拷肌，如果要返回多個值，只能將它們放在數(shù)組或對象里返回巨缘。有了解構賦值，取出這些值就非常方便若锁。
// 返回一個數(shù)組
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
console.table([a,b,c]);
（3）函數(shù)參數(shù)的定義
- 解構賦值可以方便地將一組參數(shù)與變量名對應起來。
// 參數(shù)是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 參數(shù)是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
（4）提取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]
上面代碼可以快速提取 JSON 數(shù)據(jù)的值涕侈。
（5）函數(shù)參數(shù)的默認值
// 函數(shù)參數(shù)的默認值
function alert({title = 'title', content = 'content', button = 'button'}) {
console.log(title, content, button);
}
alert({title: '123'});
指定參數(shù)的默認值煤辨，就避免了在函數(shù)體內部再寫var foo = config.foo || ‘default foo’;這樣的語句裳涛。
（6）遍歷Map結構
任何部署了Iterator接口的對象众辨，都可以用for…of循環(huán)遍歷。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) {
// ...
}
（7）輸入模塊的指定方法（框架中常用）
加載模塊時，往往需要指定輸入哪些方法害捕。解構賦值使得輸入語句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");
