解析JavaScript的ES6版本中的解構(gòu)賦值
什么是解構(gòu)賦值？
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z法將數(shù)組和對象的屬性值賦給一系列變量。這個(gè)語法非常簡潔，而且比傳統(tǒng)的屬性訪問更加清晰。
在不使用解構(gòu)賦值的情況下，訪問數(shù)組的前三項(xiàng)：
var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; var first = someArray[0]; var second = someArray[1]; var third = someArray[2];
使用解構(gòu)賦值后，相應(yīng)的代碼變得更簡潔和可讀：
var [first, second, third] = someArray; var [first, second, third] = someArray;
SpiderMonkey（Firefox 的 JavaScript 引擎）已經(jīng)支持解構(gòu)賦值的大部分特性，但還不完全。
數(shù)組和可迭代對象的解構(gòu)賦值
上面我們已經(jīng)看到了數(shù)組解構(gòu)賦值的例子，該語法的一般形式是：
[ variable1, variable2, ..., variableN ] = array; [ variable1, variable2, ..., variableN ] = array;
這將把數(shù)組中對應(yīng)的項(xiàng)依次賦給 variable1 到 variableN，如果同時(shí)需要聲明變量，可以在解構(gòu)表達(dá)式前面添加 var，let 或 const 關(guān)鍵字。
var [ variable1, variable2, ..., variableN ] = array; let [ variable1, variable2, ..., variableN ] = array; const [ variable1, variable2, ..., variableN ] = array; var [ variable1, variable2, ..., variableN ] = array; let [ variable1, variable2, ..., variableN ] = array; const [ variable1, variable2, ..., variableN ] = array;
事實(shí)上，你還可以嵌套任意的深度：
var [foo, [[bar], baz]] = [1, [[2], 3]]; console.log(foo); // 1 console.log(bar); // 2 console.log(baz); // 3 var [foo, [[bar], baz]] = [1, [[2], 3]]; console.log(foo); // 1 console.log(bar); // 2 console.log(baz); // 3
此外，還可以跳過數(shù)組中的某些項(xiàng)：
var [,,third] = ["foo", "bar", "baz"]; console.log(third); // "baz" var [,,third] = ["foo", "bar", "baz"]; console.log(third); // "baz"
你還可以用一個(gè) Rest 表達(dá)式來捕獲數(shù)組中的剩余項(xiàng)：
var [head, ...tail] = [1, 2, 3, 4]; console.log(tail); // [2, 3, 4] var [head, ...tail] = [1, 2, 3, 4]; console.log(tail); // [2, 3, 4]
如果數(shù)組越界或訪問數(shù)組中不存在的項(xiàng)，將得到和通過數(shù)組索引訪問一樣的值：undefined。
console.log([][0]); // undefined var [missing] = []; console.log(missing); // undefined console.log([][0]); // undefined var [missing] = []; console.log(missing); // undefined
注意，數(shù)組解構(gòu)賦值的方式也同樣適用于可遍歷的對象：
function* fibs() {
var a = 0;
var b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
var [first, second, third, fourth, fifth, sixth] = fibs();
console.log(sixth);
// 5
function* fibs() {
var a = 0;
var b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
var [first, second, third, fourth, fifth, sixth] = fibs();
console.log(sixth);
// 5
對象的解構(gòu)賦值
對象的解構(gòu)賦值允許你將變量綁定到對象不同的屬性值。指定被綁定的屬性名，后面緊跟要綁定的變量：
var robotA = { name: "Bender" };
var robotB = { name: "Flexo" };
var { name: nameA } = robotA;
var { name: nameB } = robotB;
console.log(nameA);
// "Bender"
console.log(nameB);
// "Flexo"
var robotA = { name: "Bender" };
var robotB = { name: "Flexo" };
var { name: nameA } = robotA;
var { name: nameB } = robotB;
console.log(nameA);
// "Bender"
console.log(nameB);
// "Flexo"
當(dāng)綁定的屬性名和接收屬性值的變量名一樣時(shí)，還有一個(gè)語法糖：
var { foo, bar } = { foo: "lorem", bar: "ipsum" };
console.log(foo);
// "lorem"
console.log(bar);
// "ipsum"
var { foo, bar } = { foo: "lorem", bar: "ipsum" };
console.log(foo);
// "lorem"
console.log(bar);
// "ipsum"
與數(shù)組一樣，也可以嵌套：
var complicatedObj = {
arrayProp: [
"Zapp",
{ second: "Brannigan" }
]
};
var { arrayProp: [first, { second }] } = complicatedObj;
console.log(first);
// "Zapp"
console.log(second);
// "Brannigan"
var complicatedObj = {
arrayProp: [
"Zapp",
{ second: "Brannigan" }
]
};
var { arrayProp: [first, { second }] } = complicatedObj;
console.log(first);
// "Zapp"
console.log(second);
// "Brannigan"
解構(gòu)一個(gè)不存在的屬性時(shí)，將得到 undefined：
var { missing } = {};
console.log(missing);
// undefined
var { missing } = {};
console.log(missing);
// undefined
使用對象的解構(gòu)賦值時(shí)還有一個(gè)潛在的陷阱，在解構(gòu)賦值時(shí)沒有聲明變量（沒有 var、let或 const 關(guān)鍵字）：
{ blowUp } = { blowUp: 10 };
// Syntax error
{ blowUp } = { blowUp: 10 };
// Syntax error
這是因?yàn)?JavaScript 語法告訴引擎任何以 { 開始的語句都是語句塊（例如，{console} 就是一個(gè)合法的語句塊），解決方法是將整個(gè)語句用一對括號包裹：
({ safe } = {});
// No errors
({ safe } = {});
// No errors
其他情況
當(dāng)你嘗試解構(gòu) null 或 undefined，你將得到類型錯(cuò)誤：
var {blowUp} = null;
// TypeError: null has no properties
var {blowUp} = null;
// TypeError: null has no properties
不過，你可以對其他基本類型（Boolean、String 和 Number）進(jìn)行解構(gòu)，將得到 undefined：
var {wtf} = NaN;
console.log(wtf);
// undefined
var {wtf} = NaN;
console.log(wtf);
// undefined
結(jié)果也許會讓你感到意外，但深究一下，其實(shí)原因很簡單。在進(jìn)行對象解構(gòu)賦值時(shí)，被解構(gòu)的對象將被強(qiáng)制轉(zhuǎn)換為 Object，除 null 和 undefined 外，其它類型都可以被強(qiáng)制轉(zhuǎn)換為對象。進(jìn)行數(shù)組的結(jié)構(gòu)賦值時(shí)，要求被解構(gòu)的對象有一個(gè)遍歷器。
默認(rèn)值
可以為不存在的屬性指定一個(gè)默認(rèn)值：
var [missing = true] = [];
console.log(missing);
// true
var { message: msg = "Something went wrong" } = {};
console.log(msg);
// "Something went wrong"
var { x = 3 } = {};
console.log(x);
// 3
var [missing = true] = [];
console.log(missing);
// true
var { message: msg = "Something went wrong" } = {};
console.log(msg);
// "Something went wrong"
var { x = 3 } = {};
console.log(x);
// 3
實(shí)際應(yīng)用
函數(shù)參數(shù)
作為開發(fā)人員，我們經(jīng)常把一個(gè)包含多個(gè)屬性的對象作為函數(shù)的參數(shù)，來實(shí)現(xiàn)更靈活的 API，而不是讓 API 的使用者記住一些特定順序的參數(shù)。我們可以使用對象的解構(gòu)賦值，來避免每次使用參數(shù)時(shí)的屬性訪問：
function removeBreakpoint({ url, line, column }) {
// ...
}
function removeBreakpoint({ url, line, column }) {
// ...
}
配置對象
完善上面的例子，我們可以為要被解構(gòu)的對象屬性提供默認(rèn)值，這在對那些作為配置參數(shù)的對象非常實(shí)用，因?yàn)樵S多配置項(xiàng)都有一個(gè)合理的默認(rèn)值。例如，jQuery 的 ajax 方法的第二個(gè)參數(shù)為一個(gè)配置對象，我們可以這樣實(shí)現(xiàn)：
jQuery.ajax = function (url, {
async = true,
beforeSend = noop,
cache = true,
complete = noop,
crossDomain = false,
global = true,
// ... more config
}) {
// ... do stuff
};
jQuery.ajax = function (url, {
async = true,
beforeSend = noop,
cache = true,
complete = noop,
crossDomain = false,
global = true,
// ... more config
}) {
// ... do stuff
};
這避免了類似這樣的重復(fù)代碼：var foo = config.foo || theDefaultFoo;。
與迭代器一起使用
當(dāng)遍歷 Map 對象時(shí)，我們可以使用解構(gòu)賦值來遍歷 [key, value]：
var map = new Map();
map.set(window, "the global");
map.set(document, "the document");
for (var [key, value] of map) {
console.log(key + " is " + value);
}
// "[object Window] is the global"
// "[object HTMLDocument] is the document"
var map = new Map();
map.set(window, "the global");
map.set(document, "the document");
for (var [key, value] of map) {
console.log(key + " is " + value);
}
// "[object Window] is the global"
// "[object HTMLDocument] is the document"
只遍歷鍵：
for (var [key] of map) {
// ...
}
for (var [key] of map) {
// ...
}
只遍歷值：
for (var [,value] of map) {
// ...
}
for (var [,value] of map) {
// ...
}
返回多個(gè)值
返回一個(gè)數(shù)組，通過解構(gòu)賦值提取到返回值：
function returnMultipleValues() {
return [1, 2];
}
var [foo, bar] = returnMultipleValues();
function returnMultipleValues() {
return [1, 2];
}
var [foo, bar] = returnMultipleValues();
或者，返回一個(gè)鍵值對的對象：
function returnMultipleValues() {
return {
foo: 1,
bar: 2
};
}
var { foo, bar } = returnMultipleValues();
function returnMultipleValues() {
return {
foo: 1,
bar: 2
};
}
var { foo, bar } = returnMultipleValues();
這兩者都比使用中間變量好：
function returnMultipleValues() {
return {
foo: 1,
bar: 2
};
}
var temp = returnMultipleValues();
var foo = temp.foo;
var bar = temp.bar;
function returnMultipleValues() {
return {
foo: 1,
bar: 2
};
}
var temp = returnMultipleValues();
var foo = temp.foo;
var bar = temp.bar;
采用延續(xù)式：
function returnMultipleValues(k) {
k(1, 2);
}
returnMultipleValues((foo, bar) => ...);
function returnMultipleValues(k) {
k(1, 2);
}
returnMultipleValues((foo, bar) => ...);
導(dǎo)入 CommonJS 模塊的指定部分
還沒使用過 ES6 的模塊吧，那至少使用過 CommonJS 吧。當(dāng)導(dǎo)入一個(gè) CommonJS 模塊 X 時(shí)，模塊提供的方法也許多余你實(shí)際使用的。使用解構(gòu)賦值，你可以明確指定你需要使用模塊的哪些部分：
const { SourceMapConsumer, SourceNode } = require("source-map");
const { SourceMapConsumer, SourceNode } = require("source-map");
如果你使用 ES6 的模塊機(jī)制，你可以看到 import 聲明時(shí)有一個(gè)類似的語法。
結(jié)論
我們看到，解構(gòu)賦值在很多場景下都很實(shí)用。在 Mozilla，我們已經(jīng)有很多經(jīng)驗(yàn)。Lars Hansen 在 10 年前就向 Opera 引入了解構(gòu)賦值，Brendan Eich 在稍微晚點(diǎn)也給 Firefox 添加了支持，最早出現(xiàn)在 Firefox 2 中。因此，解構(gòu)賦值已經(jīng)滲透到我們每天對 JS 的使用中，悄悄地使我們的代碼更簡短、整潔。
相關(guān)文章
JavaScript實(shí)現(xiàn)快速排序(自已編寫)
用到j(luò)avascript的排序一組數(shù)字，js沒有直接的數(shù)字比較的函數(shù)可以調(diào)用，所以自己寫了一個(gè)快速排序,需要的朋友可以了解下2012-12-12
網(wǎng)絡(luò)傳輸協(xié)議（http協(xié)議）
網(wǎng)絡(luò)傳輸協(xié)議（http協(xié)議）指服務(wù)器和客戶端間進(jìn)行通信時(shí)的約束和規(guī)范，客戶端與服務(wù)端的數(shù)據(jù)交互并不是雜亂無章的，需要遵照（基于）一定的規(guī)范進(jìn)行，本文主要介紹http超文本傳輸協(xié)議。希望對大家有所幫助2016-11-11
JavaScript中document.referrer的用法詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中document.referrer的用法，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要介紹了JavaScript中的parse()方法使用簡介,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
這兩個(gè)事件的觸發(fā)表現(xiàn)真的就是你想要的嗎？在IE下確實(shí)有你需要的兩個(gè)這樣事件：onmouseenter 和 onmouseleave。但很不幸FF等其他瀏覽器并不支持2013-08-08
Three.js源碼閱讀筆記(基礎(chǔ)的核心Core對象)
Three.js是一個(gè)比較偉大的webgl開源庫，它簡化了瀏覽器3D編程，使得使用JavaScript在瀏覽器中創(chuàng)建復(fù)雜的場景變得容易很多接下來先從最基礎(chǔ)的核心（Core）對象開始,感興趣的朋友可以參考下2012-12-12
本篇文章主要介紹了在HTML文檔里嵌入客戶端JavaScript代碼有4中方法，感興趣的小伙伴們可以參考一下，具體如下：2018-05-05
JavaScipt基本教程之JavaScript語言的基礎(chǔ)
2008-01-01
JavaScript入門教程(9) Document文檔對象
Document文檔對象是JavaScript中window和frames對象的一個(gè)屬性,是顯示于窗口或框架內(nèi)的一個(gè)文檔。2009-01-01
Javascript學(xué)習(xí)筆記之函數(shù)篇（六） : 作用域與命名空間
本文主要講述了javascript中作用域和命名空間的區(qū)別，十分的詳細(xì)，這里推薦給大家，希望小伙伴能有所收獲2014-11-11