深入浅出ES 6(六):解構Destructuring
Firefox開発者のツールエンジニアであるNick Fitzgeraldが最初に彼のブログに投稿した文章――「ES 6の中の解像力」に基づいて、このブログを少し補足しました.
どのような価値がありますか?
構成を解除すると、配列やオブジェクトの属性をさまざまな変数に割り当てることができます.このような割当文法は極めて簡潔であり、また従来の属性アクセス方法よりも明瞭である.
一般に、配列の最初の3つの要素にこのようにアクセスすることができます.
var first = someArray[0];
var second = someArray[1];
var third = someArray[2];
， ：
var [first, second, third] = someArray;
SpiderMonkey（Firefox JavaScript ） ， 。 bug 694100 ES6 SpiderMonkey 。
， ：
[ variable1, variable2, ..., variableN ] = array;
variable1 variableN 。 ， var、let、またはconstキーワード、 えば:
var [ variable1, variable2, ..., variableN ] = array;
let [ variable1, variable2, ..., variableN ] = array;
const [ variable1, variable2, ..., variableN ] = array;
， は、 の さの れ を くことができるので、 は ではない.
var [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo);
// 1
console.log(bar);
// 2
console.log(baz);
// 3
.
var [,,third] = ["foo", "bar", "baz"];
console.log(third);
// "baz"
， ：
var [head, ...tail] = [1, 2, 3, 4];
console.log(tail);
// [2, 3, 4]
“ ” ：
console.log([][0]);
// undefined
var [missing] = [];
console.log(missing);
// undefined
， ， ：undefined:
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
， ：
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 { foo, bar } = { foo: "lorem", bar: "ipsum" };
console.log(foo);
// "lorem"
console.log(bar);
// "ipsum"
， ：
var complicatedObj = {
arrayProp: [
"Zapp",
{ second: "Brannigan" }
]
};
var { arrayProp: [first, { second }] } = complicatedObj;
console.log(first);
// "Zapp"
console.log(second);
// "Brannigan"
， ：
var { missing } = {};
console.log(missing);
// undefined
， undefined、
， ， （ let、またはconstキーワード)は、このような な エラーに すべきである.
{ blowUp } = { blowUp: 10 };
// Syntax error
varは、 なブロックステートメントである). は、 を かっこで むことです.
({ safe } = {});
// No errors
？ JavaScript { （ ，{console}または
、
nullの 、エラーの があります.
var {blowUp} = null;
// TypeError: null has no properties（null ）
undefined、
， ， ： 、 、 がありますが、undefinedがあります.
var {wtf} = NaN;
console.log(wtf);
// undefined
， ， 。 ， 。 ， nullおよびundefinedは、 できない. の り てパターンを すると、 された は ず1つのローズマリーを みます.
する が されていない は、デフォルトの を できます.
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
( ：Firefox ， 。 bug 932080。)
， API， ， ， API 。 ， ， 。
function removeBreakpoint({ url, line, column }) {
// ...
}
Firefox JavaScript （ JavaScript —— ， ！） ， ， 。
， 。 ， ， 。 ，jQuery ajax は、その パラメータとして オブジェクトを しています.このように を き えることができます.
jQuery.ajax = function (url, {
async = true,
beforeSend = noop,
cache = true,
complete = noop,
crossDomain = false,
global = true,
// ...
}) {
// ... do stuff
};
， var foo = config.foo || theDefaultFoo;のこのような .
( によると、 なことに、 の の はまだFirefoxで されていません. の が のいくつかの で しているのがこの です.bug 932080をクリックして の を べます.)
ES 6ローズマリーと して します.
ECMAScript 6では、ローズマリープロトコルを しています. たちは「 ES 6( ):ディエ とfor-ofサイクル」で しく しました.Maps(ES 6 ライブラリに しく したオブジェクト)を り すと、[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"
：
for (var [key] of map) {
// ...
}
：
for (var [,value] of map) {
// ...
}
JavaScript ， ， ：
function returnMultipleValues() {
return [1, 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;
CPS ：
function returnMultipleValues(k) {
k(1, 2);
}
returnMultipleValues((foo, bar) => ...);
CommonJS
ES6 ？ CommonJS ！ ， CommonJS X ， X 。 ， ， ：
const { SourceMapConsumer, SourceNode } = require("source-map");
（ ES6 ， import には の がある.)
し
したがって、あなたが ているように、 くの した さいシーンで されています.Mozillaでは、 に する くの を んでいます.10 に、Lars HansenはOperaにJS を しました.Brendan Eichはその Firefoxに するサポートを しました. バージョンはFirefox 2です.だから、 たちは に、あなたが っている の にこの しい を えることができます.コードをより で にすることができます.
の では、ES 6はJavaScriptの き を える が いと っていました.これはまさに の の です. に して、 に して、 を わせて して、プロジェクトを して、 えない の でこの を します.
ES 6 の に するチームの に します. にTooru FujisawaとArpad Borsosの れた に します.
Chromeでは、 に するサポートが されています. のブラウザも にサポートを します. 、Web で を いたいなら、BabelまたはTraceurを ってES 6コードを するES 5コードに する があります.
めてNick FitzgeraldがES 6を いてくれたことに します.
は、 しい を します. はずっとJavaScript の ユニットです.もし が い で を すると、あなたを させますか? を ってあなたの えを します.でも、 に の を じないでください. の を する 、 で に てください. たちは にES 6 に く ります.