web-dev-qa-db-ja.com

spread構文は配列のスプライスにどのように影響しますか

次のコードを見つけましたが、AとBの違いがわかりません。

var fruits = ["Banana", "Orange", "Apple", "Mango"];

A

fruits.splice(2,0,["Lemon", "Kiwi"]);

B

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"]));

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var A = fruits.splice(2, 0, ["Lemon", "Kiwi"]);
var B = fruits.splice(...[2, 0].concat(["Lemon", "Kiwi"]));

console.log(A)
console.log(B)
javascriptarraysspread-syntax
35
vuvu

まず、ステートメントAとステートメントBはdifferentの結果を生成します。

_Statement A_では、0個のアイテムを削除しながら、位置2に配列要素として配列（_["Lemon", "Kiwi"]_）を挿入しています。したがって、位置2の別の文字列配列に文字列配列を挿入しています。

_var fruits = ["Banana", "Orange", "Apple", "Mango"];


fruits.splice(2,0,["Lemon", "Kiwi"]);

console.log(fruits);_

ただし、、_Statement B_ははるかに興味深い。完全に理解するには、まず次のようなコア部分をログアウトします。

console.log(...[2,0].concat(["Lemon", "Kiwi"]));  // basic array concatenation then spread

ご覧のとおり、_2 0 Lemon Kiwi_が生成されます。次に、fruits.splice(..here..)にパラメーターとして渡されます。 _array#splice_ によれば、位置2に2つの文字列（Lemon＆Kiwi）を入力し、0個の要素を削除します。

_var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"]));
// is same as fruits.splice(2, 0, 'Lemon', 'Kiwi')

console.log(fruits);_

注意：

  • _array#splice_は元の配列を更新します。
  • _Statement A_は親文字列配列にarray（IE _["Lemon", "Kiwi"]_）を挿入しますが、_Statement B_は2つの文字列（IE _'Lemon', 'Kiwi'_）親文字列配列。
35
BlackBeard

御treat走["Lemon", "Kiwi"] 1つのアイテムとして、指定されたインデックスに挿入します

["Banana", "Orange", ["Lemon", "Kiwi"], "Apple" , "Mango"];

B連結[2,0]および["Lemon", "Kiwi"]そして、次のようなコンマ区切りの引数としてスプライスに渡します

fruits.splice(2,0,"Lemon", "Kiwi");

以下のように配列を変更します

["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]
10
Hikmat G.

doc 関数シグネチャから：

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

Bで：

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"]));

[2,0].concat(["Lemon", "Kiwi"])は[2,0,"Lemon", "Kiwi"]を意味するためです。

したがって、fruits.splice(...[2,0,"Lemon", "Kiwi"]);は、スプレッド演算子（...）を使用してfruits.splice(2,0,"Lemon", "Kiwi");になります。

上記のコードは、0個のアイテムを削除せずに、インデックス"Lemon"から"Kiwi"、2を追加します。

この場合、2はstartインデックス、deleteCountは0、item1は"Lemon"、item2は"Kiwi"です。

今Aで：

fruits.splice(2,0,["Lemon", "Kiwi"]);

0個のアイテムを削除して、インデックス["Lemon", "Kiwi"]から2を追加すると言っています。この場合、2はstartインデックス、deleteCountは0、item1は["Lemon", "Kiwi"]です。

8
Arup Rakshit

まず、スプライスの仕組みを理解する必要があります

array.splice（start [、deleteCount [、item1 [、item2 [、...]]]]）

start（ゼロから開始するインデックス）、削除する要素の数、残りの引数はその開始インデックスに追加されます。

これで、スプライスが明確になったので、それらのステートメントをより明確に理解するために、一歩ずつ進みましょう。

次の声明

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"]));

連結後

fruits.splice(...[2,0,"Lemon", "Kiwi"]);

広がると

fruits.splice(2,0,"Lemon", "Kiwi");

次に、スプ​​ライスはインデックス2から実を取り、何も削除せず（ゼロを指定）、残りの引数（「レモン」と「キウィ」）を追加します。

したがって、["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

どこのように

fruits.splice(2,0,["Lemon", "Kiwi"]);

スプライスはインデックス2から実を取り、何も削除しません（再び0が与えられます）。残りの引数、つまり「["Lemon"、 "Kiwi"]」を追加します。

したがって、["Banana", "Orange", ["Lemon", "Kiwi"], "Apple", "Mango"]

役に立てば幸いです。

6
Ankit Kumar Ojha

他のすべての回答は、 splice メソッドとスプレッド演算子の動作を正しく説明していますが、結果についての誤解を修正しようとするものはありません。

実際に表示されるのは、戻り値splice メソッドです。これは、削除された要素を含む配列です。 （両方のメソッド呼び出しでなし）。そのため、結果として空の配列を取得します。

splice メソッドを呼び出す動作を確認するには、各呼び出しの後にfruits配列を記録する必要があります（戻り値ではなくメソッド）。これは、2番目の呼び出しではfruits配列に対する期待が保持されないため、それほど有用ではありません。

5
Mohammad Dehghan

スプレッドを使用しない場合、Bは次のとおりです。

fruits.splice( 2, 0, "Lemon", "Kiwi" );

concatは少しわかりにくいですが、次のように書くこともできます。

fruits.splice( ...[ 2, 0 ], ...[ "Lemon", "Kiwi" ] );

または：

fruits.splice( ...[ 2, 0, "Lemon", "Kiwi" ] );
4
Ben West