- ES6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構(Destructuring)。
- 如果解構不成功,變數的值就等於undefined。
陣列的解構賦值
例子:
let [temA, temB, temC] = ['AAAA', 'BBBB', 'CCCC']
console.log(temA); // AAAA
console.log(temB); // BBBB
console.log(temC); // CCCC
複製程式碼
上面程式碼表示,可以從陣列中提取值,按照對應位置,對變數賦值。本質上這種寫法屬於‘模式匹配‘,只要等號兩邊的模式相同,左邊的變數就會被賦予對應的值。下面看些複雜的例子:
let [temA, [temB, temC], temD] = ['AAAA', ['BBBB', 'CCCC'], 'DDDD'];
console.log(temA); // AAAA
console.log(temB); // BBBB
console.log(temC); // CCCC
console.log(temD); // DDDD
let [ , , temA] = ['AAAA', 'BBBB', 'CCCC'];
console.log(temA); // CCCC
let [temA, temB, temC] = ['AAAA'];
console.log(temC); // undefined
複製程式碼
解構一般有三種情況,1.完全解構;2.不完全解構;3.解構不成功。
在上述例子中存在完全解構和解構不成功的例子,下面來看一下不完全解構的例子
let [temA, temB] = ['AAAA', 'BBBB', 'CCCC'];
console.log(temA); // AAAA
console.log(temB); // BBBB
let [temA, [temB], temD] = ['AAAA', ['BBBB','CCCC'], 'DDDD'];
console.log(temA); // AAAA
console.log(temB); // BBBB
console.log(temD); // DDDD
複製程式碼
不完全解構:即等號左邊的模式,只匹配一部分的等號右邊的陣列,這種情況下解構依然成功。
如果等號的右邊不是陣列,或者說不是可遍歷的結構,那麼將會報錯,看下面的例子
let [temA] = 1;
let [temB] = false;
let [temC] = NaN;
let [temD] = undefined;
let [temE] = null;
let [temF] = {};
複製程式碼
上面的語句都會報錯:Uncaught TypeError: undefined is not a function
- 解構賦值允許指定預設值
let [temA, temB = 'bbbb'] = ['AAAA'];
console.log(temB); // bbbb
let [temA, temB = 'bbbb'] = ['AAAA', undefined];
console.log(temB); // bbbb
let [temA, temB = 'bbbb'] = ['AAAA', null];
console.log(temB); // null
複製程式碼
陣列成員為undefined時,預設值仍會生效;如果一個陣列成員是null,預設值就不會生效,因為null不嚴格等於undefined。
物件的解構賦值
物件的解構與陣列有一個重要的不同,陣列的元素是按次序排列的,變數的取值由它的位置決定;而物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值。
let {temA, temB} = {temA: 'AAAA', temB: 'BBBB'};
console.log(temA); // AAAA
console.log(temB); // BBBB
// 上面例子與下面例子等同
let {temA: temA, temB: temB} = {temA: 'AAAA', temB: 'BBBB'};
console.log(temA); // AAAA
console.log(temB); // BBBB
複製程式碼
物件的解構賦值的內部機制,是先找到同名屬性,然後再賦值給對應的變數,真正被賦值的是後者,而不是前者。
如果變數名和屬性名不一致,必須寫成下面例子這樣
let {temA: temG} = {temA: 'AAAA', temB: 'BBBB'}
console.log(temG); // AAAA
let obj = {temA: 'AAAA', temB: 'BBBB'};
let {temA: A, temB: B} = obj;
console.log(A); // AAAA
console.log(B); // BBBB
複製程式碼
與陣列一樣,解構也可以用於巢狀解構的物件,看下面例子
let obj = {
data: [
'temA',
{temB: 'BBBB'}
]
};
let {data: [temA, {temB}]} = obj;
console.log(temA); // temA
console.log(temB); // BBBB
複製程式碼
const node = {
res: {
parent: {
num: 1,
content: 'Content'
}
}
}
let {res, res: {parent}, res: {parent: {num}}} = node;
console.log(res); // Object {parent: Object}
console.log(parent); // Object {num: 1, content: "Content"}
console.log(num); // 1
複製程式碼
上面程式碼有三次解構賦值,分別是對res、parent、num三個屬性的解構賦值。
如果解構模式是巢狀的物件,而且子物件所在的父屬性不存在,那麼將會報錯。
let {node: {temA}} = {temB: 'temC'};
// Uncaught TypeError: Cannot match against 'undefined' or 'null'.
複製程式碼
- 物件的解構也能制定預設值
var {temA = 'AAAA'} = {};
console.log(temA); // AAAA
var {temA, temB = 'BBBB'} = {temA: 'AAAA'};
console.log(temA); // AAAA
console.log(temB); // BBBB
var {temA: temB = 'BBBB'} = {};
console.log(temB); // BBBB
var {temA: temB = 'BBBB'} = {temA: 'AAAA'};
console.log(temB); // AAAA
複製程式碼
字串的解構賦值
字串也可以解構賦值,在解構賦值時會被轉換成類似的陣列物件。其中還有一個length屬性,因此還可以對這個屬性解構賦值。
const [temA, temB, temC, temD, temE] = 'world';
console.log(temA); // w
console.log(temB); // o
console.log(temC); // r
console.log(temD); // l
console.log(temE); // d
let {length: len} = 'world';
console.log(len); // 5
複製程式碼
數值的解構賦值
數值在解構賦值時,會先轉為物件。解構賦值的規則是,只要等號右邊的值不是物件或陣列,就先將其轉為物件。
let {temA: temB} = 123;
console.log(temB === Number.prototype.temA);
複製程式碼
布林值的解構賦值
布林值在解構賦值時會和數值一樣,先轉為物件。
let {temA: temB} = true;
console.log(temB === Number.prototype.temA);
複製程式碼
函式引數的解構賦值
函式的引數也可以使用解構賦值
function add([argA, argB]){
return argA + argB;
}
console.log(add([1, 2])); // 3
複製程式碼
函式引數的解構也可以使用預設值
function add([argA, argB = 5]){
return argA + argB;
}
console.log(add([1])); // 6
function add({argA, argB = 5} = {}){
return argA + argB;
}
console.log(add({argA: 1})); // 6
複製程式碼
變數解構賦值的用途
- 交換變數的值
let temA = 'AAAA';
let temB = 'BBBB';
[temA, temB] = [temB, temA];
console.log(temA); // BBBB
console.log(temB); // AAAA
複製程式碼
- 從函式返回多個值
function Fn(){
return [1, 2, 3];
}
let [temA, temB, temC] = Fn();
// 返回一個陣列
function Fn(){
return {
temA: 'AAAA',
temB: 'BBBB'
}
}
let {temA, temB} = Fn();
// 返回一個物件
複製程式碼
- 函式引數的定義
function Fn([temA, temB, temC]){
console.log(temA + temB + temC);
}
Fn([1, 2, 3]);
複製程式碼
- 提取JSON資料
let jsonData = {
id: 1,
name: 'Xiao Duan',
data: [22, 99]
}
let {id, name, data: number} = jsonData;
console.log(id, name, number); // 1 "Xiao Duan" [22, 99]
複製程式碼
- 函式引數的預設值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
} = {}) {
// ... do stuff
};
複製程式碼
- 遍歷Map結構
const map = new Map();
map.set('temA', 'hello');
map.set('temB', 'world');
for (let [key, value] of map){
console.log(key + " is " + value);
}
複製程式碼
- 輸入模組的制定方法 載入模組時,往往需要指定輸入哪些方法。解構賦值使得輸入語句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");複製程式碼