解析JavaScript的ES6版本中的解構(gòu)賦值

更新時(shí)間：2015年07月28日 11:33:22 作者：Jason Orendorff

這篇文章主要介紹了解析JavaScript的ES6版本中的解構(gòu)賦值,ES6版本為JS帶來(lái)了諸多簡(jiǎn)化方面的改進(jìn),需要的朋友可以參考下

什么是解構(gòu)賦值？

解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z(yǔ)法將數(shù)組和對(duì)象的屬性值賦給一系列變量。這個(gè)語(yǔ)法非常簡(jiǎn)潔，而且比傳統(tǒng)的屬性訪問(wèn)更加清晰。

在不使用解構(gòu)賦值的情況下，訪問(wèn)數(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)賦值的例子，該語(yǔ)法的一般形式是：

[ 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

此外，還可以跳過(guò)數(shù)組中的某些項(xiàng)：

var [,,third] = ["foo", "bar", "baz"];
console.log(third);
// "baz"

 
var [,,third] = ["foo", "bar", "baz"];
console.log(third);
// "baz"

你還可以用一個(gè) Rest 表達(dá)式來(lái)捕獲數(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ù)組越界或訪問(wèn)數(shù)組中不存在的項(xiàng)，將得到和通過(guò)數(shù)組索引訪問(wèn)一樣的值：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è)語(yǔ)法糖：

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í)沒(méi)有聲明變量（沒(méi)有 var、let或 const 關(guān)鍵字）：

{ blowUp } = { blowUp: 10 };
// Syntax error
 
{ blowUp } = { blowUp: 10 };
// Syntax error

這是因?yàn)?JavaScript 語(yǔ)法告訴引擎任何以 { 開(kāi)始的語(yǔ)句都是語(yǔ)句塊（例如，{console} 就是一個(gè)合法的語(yǔ)句塊），解決方法是將整個(gè)語(yǔ)句用一對(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

不過(guò)，你可以對(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ù)

作為開(kāi)發(fā)人員，我們經(jīng)常把一個(gè)包含多個(gè)屬性的對(duì)象作為函數(shù)的參數(shù)，來(lái)實(shí)現(xiàn)更靈活的 API，而不是讓 API 的使用者記住一些特定順序的參數(shù)。我們可以使用對(duì)象的解構(gòu)賦值，來(lái)避免每次使用參數(shù)時(shí)的屬性訪問(wèn)：

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)賦值來(lái)遍歷 [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ù)組，通過(guò)解構(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) =&gt; ...);

 
function returnMultipleValues(k) {
 k(1, 2);
}
returnMultipleValues((foo, bar) =&gt; ...);

導(dǎo)入 CommonJS 模塊的指定部分

還沒(méi)使用過(guò) ES6 的模塊吧，那至少使用過(guò) 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è)類似的語(yǔ)法。
結(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)短、整潔。

您可能感興趣的文章: