JavaScriptパラメータでの配列展開 [翻訳]_javascriptスキル

翻訳者注: この記事は ECMAScript 6 の知識ポイントについて説明します。ES5 さえ理解していない場合は、理解する必要があります。 CSS4、HTML6、さらには ES7 ES8 はすでにかなり遅れています。急いでください。そうしないと排除されます。

>

場合によっては、配列を複数の要素に展開し、これらの要素を関数呼び出しのパラメーターとして使用する必要があることがあります。この展開操作 を実装するには、JavaScript で Function.prototype.apply を使用できます。この記事では、拡散演算とは何か、および new 演算子を使用して拡散演算を実行する方法について説明します。1.
アンパックとは、関数呼び出しまたはメソッド呼び出しで配列を通じて必要なパラメーターを提供することを意味します。Python では、この操作は
アンパック と呼ばれます。ECMAScript.next にはすでに (展開演算子) スプレッド演算子 (プレフィックス

...

として表されます) は、現在の JavaScript で、Function.prototype を通じて同じ効果を実現できます。 .apply メソッド。 翻訳者注: 拡張演算子は、配列を展開するために実際のパラメータの位置で使用されるだけでなく、残りのパラメータを表すために仮パラメータの位置でも使用できます。私が翻訳した MDN ドキュメントを参照してください。残りのパラメータ

2. 関数パラメータを展開します

Math.max() メソッドは、0 からいくつかの数値型パラメータを使用して最大値を返します。展開演算記号を使用すると、配列をパラメータとして直接使用できます:

Math.max(...[13, 7, 30]) これは、次の記述と同等です



コードをコピーします

コードは次のとおりです: Math.max(13, 7, 30) In 現在の JavaScript では、apply() を使用できます。

コードをコピーします。

コードは次のとおりです。 🎜> > Math.max.apply(null, [13, 7, 30]) 30 apply メソッドの機能は次のとおりです。メソッド呼び出し:

コードをコピー

コードは次のとおりです:

func.apply(thisValue, [param1, param2, ...]) を置き換えます

コードをコピーします

コードは次のとおりです。

thisValue.func(param1, param2, ...) func は必ずしも thisValue に属するメソッドではないことに注意してください。 apply は、このメソッドを一時的に所有させることができます。

3. コンストラクターのパラメーターを展開します。

Date コンストラクターは、いくつかの数値型パラメーターを受け入れ、Date Through オブジェクトを生成します。展開演算子を使用する場合は、配列を直接渡すことができます。



コードをコピーします

コードは次のとおりです。

new Date(...[2011, 11, 24]) // 2011 年のクリスマスイブ ただし、今回は apply メソッドを使用して展開操作を実装することはできません。新しい日付を操作します:

コードをコピーします

コードは次のとおりです:

> new Date。 apply(null, [2011, 11, 24]) TypeError: function apply () { [ネイティブ コード] } はコンストラクターではありません 新しい演算子は Date.apply がコンストラクターであることを期待していますこの式を括弧で囲んだ場合でも、根本的な問題は依然として存在します。apply は関数呼び出しを実行しますが、

3.1 解決策

ステップ。まずは結果を正しくしましょう。少し待ってから、配列を使用して分割されたパラメータを置き換える方法を検討してください。

コードをコピーします
コードは次のとおりです:


new (Date.bind(null, 2011, 11, 24))

まず、bind() を使用してパラメータなしの関数を作成し (パラメータはバインドされた関数内ですでにバインドされています)、次に通常のバインド関数を呼び出すのと同じように、new を使用してそれを呼び出します。署名は次のとおりです。

コードをコピーします コードは次のとおりです。

func.bind(thisValue, arg1, arg2 , . ..)

バインド関数は、元の関数 func を新しい関数に変換します。この新しい関数の この値は常にパラメーター thisValue で指定された値、およびその初期パラメータには arg1 から end までのすべてのパラメータが含まれます。この新しい関数が呼び出されると、新しく追加されたパラメータは bind でバインドされた既存のパラメータに従います。 による。MDN には の詳細情報 があることに注意してください。Date 関数には が必要ないため、最初のパラメーターは null です。 thisValue: コンストラクターとして呼び出された場合、new 演算子はバインドで指定された thisValue. を上書きします。

ステップ 2.配列をバインドに渡したいと考えています。そこで、再度 apply を使用して配列を拡張パラメータに変換し、それらをバインド関数に渡します。 🎜 >.

コードをコピー コードは次のとおりです。

new (関数.prototype.bind .apply(

Date, [null].concat([2011, 11, 24])))

関数 Function の apply メソッドを呼び出します。パラメータは 2 つあります:

•最初のパラメータ: この値は Date として指定されます。これは、上で記述した Date.bind(...) と同等です。
• 2 番目のパラメーター:バインド メソッドに渡されるパラメーター、null とそれに続く配列 [2011, 11, 24] が接続されて、新しい配列を形成します。


3.2 ライブラリ関数
Mozilla は、上記の作業をライブラリ メソッドにカプセル化することを提案しています。次のコードは、その提案

に基づいてわずかに変更されています。

コードをコピー コードは次のとおりです。 if (!Function.prototype.construct) {

Function.prototype.construct = function(argArray) {

if (! Array.isArray(argArray)) {
throw new TypeError("引数は配列である必要があります")
}
var constr = this;
var nullaryFunc = Function.prototype.bind.apply(
constr, [null].concat(argArray));
return new nullaryFunc();
}


実行します:

コードをコピーします

コードは次のとおりです: > Date.construct([2011, 11, 24]) Sat Dec 24 2011 00:00:00 GMT 0100 (CET)

3.3 A一見単純な解決策
新しい演算子の操作を手動で実装できます。例:

コードをコピーします。

コードは次のとおりです。 var foo = new Foo("abc");

は、実際には

コードをコピー

コードは次のとおりです。 var foo = Object.create(Foo.prototype) Foo.call(foo, " abc");

この原則に従って、簡単なライブラリ メソッドを作成できます:

コードをコピー

コードは次のとおりです: Function.prototype.construct = function(argArray) { var constr = this; var inst = Object.create(constr.prototype) ;

constr.apply(inst, argArray);

;
残念なことに、Date を通常の関数として呼び出すことは、コンストラクターとして呼び出すことと同じです。call() メソッドと apply() メソッドの最初のパラメーターで指定された this 値は無視され、常に A が生成されて返されます。

翻訳者注: ここで著者は Date を通常の関数として呼び出すことと、コンストラクターとして呼び出すことはまったく異なります。現在時刻の文字列を返します。つまり (new Date()).toString()

コードをコピー コードは次のとおりです

> Date.construct([2011, 11, 24])
{}

翻訳者注: 組み込みコンストラクターでは、 Array()、Function()、RegExp()、Error() などのコンストラクターを呼び出しても、new を追加するかどうかはほぼ同じです。たとえば、Array(10) も配列を生成しますが、Number()、String は生成されません。 ()、Boolean () は異なり、new を追加しないと元の値を返し、

を返します。コードをコピー コードは次のとおりです。

>typeof Number("1")
"number"
>typeof new Number( "1")
"object"

ご覧のとおり、Date() メソッドを操作するとき、私たちが作成したconstruct() メソッドは期待どおりに動作しません。組み込みコンストラクターも Date と同じように動作しますが、ライブラリーでカスタム コンストラクターを操作している場合、このメソッドは基本的に正常に動作します (少数のコンストラクターは、デフォルト値を返す代わりに、指定したオブジェクト値を返します)。自動生成されたインスタンス this)。

翻訳者注: コンストラクターの return ステートメントがオブジェクト値を返す限り、デフォルトの this 値は上書きされます。例:

。 コードをコピー コードは次のとおりです。

function Func1(){
this.value = "this"; }
}

function Func2(){
this.value = "this"; return 1}function Func3(){ this.value = "this";}>new Func1() // 返される {} はオブジェクト値であり、デフォルトの this をカバーします。{}>new Func2() // 返される 1 は元の値であるため、デフォルトの this.{value: "this"}>new Func3 ( ) //return文はなく、デフォルトではプリミティブ値であるunknownが返されるため、デフォルトのthisが返されます。{value:"this"}>new Func3 //パラメータがない場合、括弧は省略可能です。{value:"this "}