解析JavaScript的ES6版本中的解構(gòu)賦值
什么是解構(gòu)賦值？
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z法將數(shù)組和對(duì)象的屬性值賦給一系列變量。這個(gè)語法非常簡(jiǎn)潔，而且比傳統(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)的代碼變得更簡(jiǎn)潔和可讀：
var [first, second, third] = someArray; var [first, second, third] = someArray;
SpiderMonkey（Firefox 的 JavaScript 引擎）已經(jīng)支持解構(gòu)賦值的大部分特性，但還不完全。
數(shù)組和可迭代對(duì)象的解構(gòu)賦值
上面我們已經(jīng)看到了數(shù)組解構(gòu)賦值的例子，該語法的一般形式是：
[ variable1, variable2, ..., variableN ] = array; [ variable1, variable2, ..., variableN ] = array;
這將把數(shù)組中對(duì)應(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)賦值的方式也同樣適用于可遍歷的對(duì)象：
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
對(duì)象的解構(gòu)賦值
對(duì)象的解構(gòu)賦值允許你將變量綁定到對(duì)象不同的屬性值。指定被綁定的屬性名，后面緊跟要綁定的變量：
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
使用對(duì)象的解構(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è)語句用一對(duì)括號(hào)包裹：
({ 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
不過，你可以對(duì)其他基本類型（Boolean、String 和 Number）進(jìn)行解構(gòu)，將得到 undefined：
var {wtf} = NaN;
console.log(wtf);
// undefined
var {wtf} = NaN;
console.log(wtf);
// undefined
結(jié)果也許會(huì)讓你感到意外，但深究一下，其實(shí)原因很簡(jiǎn)單。在進(jìn)行對(duì)象解構(gòu)賦值時(shí)，被解構(gòu)的對(duì)象將被強(qiáng)制轉(zhuǎn)換為 Object，除 null 和 undefined 外，其它類型都可以被強(qiáng)制轉(zhuǎn)換為對(duì)象。進(jìn)行數(shù)組的結(jié)構(gòu)賦值時(shí)，要求被解構(gòu)的對(duì)象有一個(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è)屬性的對(duì)象作為函數(shù)的參數(shù)，來實(shí)現(xiàn)更靈活的 API，而不是讓 API 的使用者記住一些特定順序的參數(shù)。我們可以使用對(duì)象的解構(gòu)賦值，來避免每次使用參數(shù)時(shí)的屬性訪問：
function removeBreakpoint({ url, line, column }) {
// ...
}
function removeBreakpoint({ url, line, column }) {
// ...
}
配置對(duì)象
完善上面的例子，我們可以為要被解構(gòu)的對(duì)象屬性提供默認(rèn)值，這在對(duì)那些作為配置參數(shù)的對(duì)象非常實(shí)用，因?yàn)樵S多配置項(xiàng)都有一個(gè)合理的默認(rèn)值。例如，jQuery 的 ajax 方法的第二個(gè)參數(shù)為一個(gè)配置對(duì)象，我們可以這樣實(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 對(duì)象時(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è)鍵值對(duì)的對(duì)象：
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)賦值在很多場(chǎng)景下都很實(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)滲透到我們每天對(duì) JS 的使用中，悄悄地使我們的代碼更簡(jiǎn)短、整潔。
相關(guān)文章
移動(dòng)端自適應(yīng)flexible.js的使用方法(不用三大框架，僅寫一個(gè)單html頁面使用）推薦
這篇文章主要介紹了移動(dòng)端自適應(yīng)flexible.js使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
下面小編就為大家?guī)硪黄胬斫忾]包機(jī)制。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
HTTP狀態(tài)代碼以及定義（解釋）...2007-02-02
這篇文章主要介紹了使用JavaScript刷新網(wǎng)頁的方法,是JS通常被用來實(shí)現(xiàn)的最基本的功能之一,需要的朋友可以參考下2015-06-06
深入學(xué)習(xí)JavaScript中的原型prototype
這篇文章主要介紹了深入學(xué)習(xí)JavaScript中的原型prototype,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-08
本篇文章是對(duì)jQuery中的選擇組件進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
Javascript基礎(chǔ)教程之關(guān)鍵字和保留字匯總
這篇文章主要介紹了Javascript基礎(chǔ)教程之關(guān)鍵字和保留字匯總,需要的朋友可以參考下2015-01-01
JavaScript ES6箭頭函數(shù)是一個(gè)來自ECMAScript 2015（又稱ES6）的全新特性,有傳聞?wù)f，箭頭函數(shù)的語法=>，是受到了CoffeeScript 的影響，并且它與CoffeeScript中的=>語法一樣，共享this上下文2018-12-12
關(guān)于textarea提交的內(nèi)容無法換行的解決辦法
本篇文章小編為大家介紹，關(guān)于textarea提交的內(nèi)容無法換行的解決辦法，有需要的朋友可以參考一下2013-04-04
javascript中神奇的 Date對(duì)象小結(jié)
日常生活中，各種形式的時(shí)間字符到處都是。時(shí)間觀念的產(chǎn)生，時(shí)間單位、計(jì)時(shí)工具的發(fā)明，給人類帶來的變化實(shí)在一言難盡。今天就來談?wù)勅掌谀切┦聝?。一起來看?JavaScript 中的日期對(duì)象 Date。2017-10-10