JavaScriptコピー配列：ガイド

JavaScriptでは、配列のコピーは、代入演算子（=）を使用して複製を作成するほど簡単ではありません。これを試したことがあれば、元のリストへのリンクしか作成されないことに驚かれることでしょう。どうしたんだ？

このガイドでは、JavaScript配列をコピーする方法について説明します。配列のコピーを開始できるように、3つのJavaScriptコピー配列戦略のコードについて説明します。

JavaScript配列のコピーに関する問題

あるレベルでは、「=」演算子は配列のコピーを新しい変数に作成します。ただし、これはコピーというよりはポインタです。これは、「=」演算子が元の配列への参照を作成するためです。既存のアレイの複製は作成されません。

他のコードなしで代入演算子を使用して配列のコピーを作成してみましょう：

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = berries;

console.log(fruits);

コードは次のようになります：

[ "Strawberry", "Gooseberry", "Raspberry" ]

アレイがコピーされたようです。 「fruits」には、「berry」配列のすべての値が含まれています。

それでは、「果物」配列にアイテムを追加してみましょう。

fruits.push("Melon");
console.log(fruits);
console.log(berries);

フルーツの配列に「メロン」を追加しました。次に、「果物」と「ベリー」の値をコンソールに出力します。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]

「果物」と「ベリー」の両方に同じ値が含まれています。これは、アレイのクローンを技術的に作成していないためです。それへの参照を作成しました。

「berry」配列を操作するたびに、「fruits」配列に変更が加えられます。

JavaScript配列をコピーする方法

代入演算子は配列をコピーしません。別のアプローチを使用する必要があります。幸いなことに、配列のコピーを作成する方法はたくさんあります。上位3つのアプローチは次のとおりです。

• スプレッド演算子の使用
• forループの使用
• Array.fromの使用

これらについて1つずつ話し合いましょう。

スプレッド演算子の使用

スプレッド演算子は、JavaScriptES6で導入された機能です。これにより、反復可能なオブジェクトのコンテンツにアクセスできます。この演算子は、配列の浅いコピーを作成するためによく使用されます。

スプレッド演算子は、省略記号（…）のように3つのドットで構成されます。以前の「ベリー」配列のコピーを作成してみましょう：

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = [...berries];
fruits.push("Melon");

スプレッド演算子を使用して、配列のコピーを作成しました。配列の値をチェックして、それらが正しいことを確認しましょう：

console.log(berries);
console.log(fruits);

コードは次のようになります：

[ "Strawberry", "Gooseberry", "Raspberry" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]

値「Melon」は「fruits」配列にのみ追加されました。これは、spread演算子を使用して「berry」配列の複製を作成したためです。現在、「fruits」配列は独自の配列です。その値は「ベリー」配列とは別のものです。

forループの使用

forループを使用する、実証済みの真の方法は、配列のコピーを作成するための良い方法です。

この方法は、より多くのコード行を必要とするため、spread演算子ほど好まれない場合があります。そうは言っても、forループはオブジェクトをうまくコピーします。

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = [];

for (var i = 0; i < berries.length; i++) {
	fruits[i] = berries[i]
}

ベリーとフルーツの2つのリストを宣言しました。 Fruitsは最初は空のリストです。次に、forループを使用して、「ベリー」リストのすべてのアイテムをループしました。リスト内の各アイテムについて、値が「fruits」配列にコピーされます。

テストを実行して、アレイが分離されているかどうかを確認しましょう：

fruits.push("Grapefruit");
console.log(berries);
console.log(fruits);

コードは次のようになります：

[ "Strawberry", "Gooseberry", "Raspberry" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Grapefruit" ]

成功！ 「ベリー」と「フルーツ」は2つの別々の配列です。

Array.from（）の使用

Array.from() メソッドは、反復可能なオブジェクトを配列に変換します。反復可能で各項目を調べ、それを新しい配列に追加します。これは、アレイのコピーに使用できることを意味します。

「ベリー」配列のコピーをもう一度作成しましょう：

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = Array.from(berries);

このソリューションは、spread演算子の構文と同様に、2行のコードしか使用しません。これは、アレイをコピーするための効率的で簡潔な方法です。それでは、テストを実行して新しいアレイを確認しましょう。

fruits.push("Pineapple");
console.log(berries);
console.log(fruits);

コードは次のようになります：

[ "Strawberry", "Gooseberry", "Raspberry" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Pineapple" ]

アレイは正常にコピーされました。

結論

方法を知っていれば、JavaScriptで配列をコピーするのは簡単です。

別のバージョンの配列を作成する場合は、代入演算子だけでは配列をコピーできません。これは、代入演算子が既存の配列へのポインターを作成するためです。新しいアレイは作成されません。

配列のコピーは、spread演算子、forループ、またはArray.from()を使用して作成できます。 方法。これで、エキスパートのようにJavaScriptで配列をコピーする準備が整いました。