- 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");