Es 6学習ノート-解構賦値
7648 ワード
解構賦値とは
解構賦値を使用すると、配列やオブジェクトの字面量のような構文を使用して、配列とオブジェクトの属性をさまざまな変数に割り当てることができます.この付与構文は極めて簡潔であり、従来の属性アクセス方法よりも明確である.通常、配列の要素にアクセスするときは、次のようになります.
解構賦値を使用すると、単純で直感的になります.
SpiderMonkey(
配列と反復器の解体
以上は配列の解构の简単な例で、文法の形式は:
これにより、variable 1からvariableNへの変数に、配列内の対応する要素アイテムの値が与えられます.変数を付与しながら宣言する場合は、付与文の前にvar、let、constキーを追加します.たとえば、次のようにします.
実際には、任意の深さのネスト配列を解くことができるため、変数で記述するのは適切ではありません.
さらに、対応するビットを空にして、解体された配列の要素をスキップできます.
また、配列内のすべての後続要素を不定パラメータモードでキャプチャすることもできます.
空の配列または境界を越えて配列にアクセスすると、その解体はインデックスの動作と一致し、最終的に得られる結果はundefinedである.
配列解析の割り当てのモードは、任意の反復器にも適用されます.
オブジェクトの解体
オブジェクトを解体することで、各プロパティを異なる変数にバインドし、まずバインドされたプロパティを指定し、次に解体する変数に続くようにします.
属性名が変数名と一致する場合、実用的な構文で簡単に書くことができます.
配列の解体と同様に、オブジェクトの解体を任意にネストしてさらに組み合わせることができます.
未定義のプロパティを解くとundefinedの値が得られます.
オブジェクトを解体して変数に値を付与する場合、これらの変数を宣言または宣言するつもりがない場合(すなわち、値付与文の前にlet、const、varキーワードがない場合)、潜在的な構文エラーに注意してください.
どうして間違えたの?これは、JavaScript構文通知解析エンジンが{開始文をブロック文に解析する(
これで文法の間違いはありません.
デコンストラクション値はオブジェクト、配列、または反復ではありません
nullまたはundefinedを解体しようとすると、タイプエラーが発生します.
しかし、ブール値、数値、文字列などの他の元のタイプを解くことができますが、undefinedが得られます.
意外に感じるかもしれませんが、さらに審査すると、理由は簡単です.オブジェクト付与モードを使用すると、解体された値[強制的にオブジェクトに変換する必要があります.ほとんどのタイプはオブジェクトに変換できますが、
標準値
解体するプロパティが定義されていない場合は、デフォルト値を指定できます.
解体の実際の応用
関数パラメータ定義{{かんすうぱらめーた:ていぎ}}
開発者として、設計の良いAPIを実現する必要があります.通常、関数のパラメータとしてオブジェクトを設計し、実際のパラメータをオブジェクト属性として使用して、APIの使用者に複数のパラメータの使用順序を覚えさせないようにします.この問題を回避するために、解構の特性を使用することができます.そのうちの1つの属性を参照したい場合、逆にする必要はありません.この単一パラメータオブジェクトを再使用します.
これはFirefox開発ツールJavaScriptデバッガ(
オブジェクトパラメータの設定
以前の例を拡張すると、同様に解体が必要なオブジェクト属性にデフォルト値を与えることができます.構成を提供するオブジェクトを構築し、このオブジェクトの属性がデフォルト値を運ぶ必要がある場合、解体特性は役に立ちます.例を挙げると、jQueryのajax関数は構成オブジェクトを第2のパラメータとして使用し、このように関数定義を書き換えることができます.:
これにより、構成オブジェクトの各属性に対してvar foo=config.foo‖theDefaultFooを繰り返すことを回避することができる(
ES 6反復プロトコルとの連携
ECMAScript 6では、反復プロトコルが定義されています.「ES 6(2):反復器とfor-ofループ」で詳細に解析されています.Maps(ES 6標準ライブラリに新しく追加されたオブジェクト)を反復すると、「key,value」などの一連のキー値ペアが得られます.これらのキー値ペアを解体し、キーと値に簡単にアクセスできます.
パスキーのみ:
または値のみを巡回します.
複数の戻り値
JavaScript言語では多重戻り値の特性は統合されていませんが、これ以上は必要ありません.配列を返して結果を解くことができます.
または、コンテナとしてオブジェクトを使用し、戻り値に名前を付けることもできます.
この2つのモードは、一時変数を追加で保存するよりもずっと優れています.
またはCPS変換を使用します.
一部のCommonJSモジュールを解体してインポートするには
ES 6モジュールをまだ使用していませんか?CommonJSのモジュールも使用していますよね!大丈夫です.CommonJSモジュールXを導入すると、モジュールXには使用するつもりのない関数がたくさん導出される可能性があります.解体することで、モジュールの一部を明示的に定義して分割して使用することができます.名前空間を汚染することはありません.
(
多くの独立したシーンで非常に実用的です.Mozillaでは、多くのソリューションの使用経験が蓄積されています.10年前、Lars HansenはOperaにJSソリューションを導入しました.Brendan Eichはその後、Firefoxにも対応するサポートを追加しました.移植時のバージョンはFirefox 2でした.だから、徐々に、毎日使用している言語にソリューションを追加することができます.この新しい特性を構築すると、コードをより簡素化することができます.http://www.infoq.com/cn/articles/es6-in-depth-destructuring/
解構賦値を使用すると、配列やオブジェクトの字面量のような構文を使用して、配列とオブジェクトの属性をさまざまな変数に割り当てることができます.この付与構文は極めて簡潔であり、従来の属性アクセス方法よりも明確である.通常、配列の要素にアクセスするときは、次のようになります.
var first = someArray[0];
var second = someArray[1];
var third = someArray[2];
解構賦値を使用すると、単純で直感的になります.
var [first, second, third] = someArray;
SpiderMonkey(
Firefox JavaScript )は、解体のほとんどの機能をサポートしているが、まだ健全ではない.SpiderMonkeyにおける他のES 6特性のサポート状況をbug 694100で追跡できます.配列と反復器の解体
以上は配列の解构の简単な例で、文法の形式は:
// [ 1, 2,..., N] =
[ variable1, variable2, ..., variableN ] = array;
これにより、variable 1から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(head); // => 1
console.log(tail); // => [2, 3, 4]
空の配列または境界を越えて配列にアクセスすると、その解体はインデックスの動作と一致し、最終的に得られる結果はundefinedである.
console.log([][0]); // =>undefined
var [missing] = [];
console.log(missing); // => undefined
配列解析の割り当てのモードは、任意の反復器にも適用されます.
function* fibs() { //
var a = 0;
var b = 1;
while (true) {
yield a; // yield: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/yield
[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"
未定義のプロパティを解くとundefinedの値が得られます.
var { missing } = {};
console.log(missing); // => undefined
オブジェクトを解体して変数に値を付与する場合、これらの変数を宣言または宣言するつもりがない場合(すなわち、値付与文の前にlet、const、varキーワードがない場合)、潜在的な構文エラーに注意してください.
{ blowUp } = { blowUp: 10 }; // Syntax error
どうして間違えたの?これは、JavaScript構文通知解析エンジンが{開始文をブロック文に解析する(
，{console} ).解決策は、式全体を括弧で囲むことです.({ safe } = {});
これで文法の間違いはありません.
デコンストラクション値はオブジェクト、配列、または反復ではありません
nullまたはundefinedを解体しようとすると、タイプエラーが発生します.
var {blowUp} = null; // TypeError: null has no properties（null ）
しかし、ブール値、数値、文字列などの他の元のタイプを解くことができますが、undefinedが得られます.
var {wtf} = NaN;
console.log(wtf); // undefined
意外に感じるかもしれませんが、さらに審査すると、理由は簡単です.オブジェクト付与モードを使用すると、解体された値[強制的にオブジェクトに変換する必要があります.ほとんどのタイプはオブジェクトに変換できますが、
nullとundefinedでは変換できません.配列割り当てモードを使用する場合、復元された値には必ず反復器が含まれます.標準値
解体するプロパティが定義されていない場合は、デフォルト値を指定できます.
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
解体の実際の応用
関数パラメータ定義{{かんすうぱらめーた:ていぎ}}
開発者として、設計の良いAPIを実現する必要があります.通常、関数のパラメータとしてオブジェクトを設計し、実際のパラメータをオブジェクト属性として使用して、APIの使用者に複数のパラメータの使用順序を覚えさせないようにします.この問題を回避するために、解構の特性を使用することができます.そのうちの1つの属性を参照したい場合、逆にする必要はありません.この単一パラメータオブジェクトを再使用します.
function removeBreakpoint({ url, line, column }) {
// ...
}
これはFirefox開発ツールJavaScriptデバッガ(
JavaScript )からのコードクリップで、非常に簡潔に見えますが、このコードパターンが特に喜ばれていることがわかります.オブジェクトパラメータの設定
以前の例を拡張すると、同様に解体が必要なオブジェクト属性にデフォルト値を与えることができます.構成を提供するオブジェクトを構築し、このオブジェクトの属性がデフォルト値を運ぶ必要がある場合、解体特性は役に立ちます.例を挙げると、jQueryのajax関数は構成オブジェクトを第2のパラメータとして使用し、このように関数定義を書き換えることができます.:
jQuery.ajax = function (url, {
async = true,
beforeSend = noop,
cache = true,
complete = noop,
crossDomain = false,
global = true,
// ...
}) {
// ... do stuff
};
これにより、構成オブジェクトの各属性に対してvar foo=config.foo‖theDefaultFooを繰り返すことを回避することができる(
).ES 6反復プロトコルとの連携
ECMAScript 6では、反復プロトコルが定義されています.「ES 6(2):反復器と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();
この2つのモードは、一時変数を追加で保存するよりもずっと優れています.
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モジュールを解体してインポートするには
ES 6モジュールをまだ使用していませんか?CommonJSのモジュールも使用していますよね!大丈夫です.CommonJSモジュールXを導入すると、モジュールXには使用するつもりのない関数がたくさん導出される可能性があります.解体することで、モジュールの一部を明示的に定義して分割して使用することができます.名前空間を汚染することはありません.
const { SourceMapConsumer, SourceNode } = require("source-map");
(
ES6 ， import 。 ) 多くの独立したシーンで非常に実用的です.Mozillaでは、多くのソリューションの使用経験が蓄積されています.10年前、Lars HansenはOperaにJSソリューションを導入しました.Brendan Eichはその後、Firefoxにも対応するサポートを追加しました.移植時のバージョンはFirefox 2でした.だから、徐々に、毎日使用している言語にソリューションを追加することができます.この新しい特性を構築すると、コードをより簡素化することができます.http://www.infoq.com/cn/articles/es6-in-depth-destructuring/