JavaScriptの配列コピーで迷ったらコレ！slice、forループ、Set、lodashの使い分けガイド

2024-05-17

JavaScript 配列を重複なしで複製する最も速い方法: slice vs. for ループ

slice メソッドは、配列の一部を切り取ったり、新しい配列を作成したりする際に使用されます。配列を複製する場合、slice メソッドは以下の通り使用できます。

const originalArray = [1, 2, 3, 4, 5];
const duplicatedArray = originalArray.slice();
console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(duplicatedArray); // [1, 2, 3, 4, 5]

このコードでは、originalArray のすべての要素を新しい配列 duplicatedArray にコピーしています。slice メソッドは、引数なしで呼び出すと、開始インデックスを 0、終了インデックスを配列の長さに設定し、元の配列全体を複製します。

for ループを使用して、配列を要素ごとに複製することもできます。

const originalArray = [1, 2, 3, 4, 5];
const duplicatedArray = [];

for (let i = 0; i < originalArray.length; i++) {
  duplicatedArray.push(originalArray[i]);
}

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(duplicatedArray); // [1, 2, 3, 4, 5]

このコードでは、for ループを使用して、originalArray の各要素を duplicatedArray に追加しています。

どちらの方法が速い？

一般的に、slice メソッドの方が for ループよりも高速です。これは、slice メソッドが内部的により効率的なアルゴリズムを使用しているためです。ただし、配列が非常に小さい場合は、for ループの方が高速になる場合があります。

ほとんどの場合、配列を複製するには slice メソッドを使用することをお勧めします。ただし、配列が非常に小さい場合は、for ループの方が高速になる可能性があります。

JavaScript で配列を複製するサンプルコード

slice メソッドを使用する

const originalArray = [1, 2, 3, 4, 5];
const duplicatedArray = originalArray.slice();

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(duplicatedArray); // [1, 2, 3, 4, 5]

解説:

originalArray という名前の配列を定義します。
slice() メソッドを使用して、originalArray のコピーを作成します。
duplicatedArray にコピーを格納します。

このコードでは、slice() メソッドを使用して originalArray のすべてのコピーを作成します。slice() メソッドは引数を取らずに呼び出すと、元の配列全体を複製します。

for ループを使用する

const originalArray = [1, 2, 3, 4, 5];
const duplicatedArray = [];

for (let i = 0; i < originalArray.length; i++) {
  duplicatedArray.push(originalArray[i]);
}

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(duplicatedArray); // [1, 2, 3, 4, 5]

for ループを使用して、originalArray の各要素を反復処理します。
push() メソッドを使用して、現在の要素を duplicatedArray に追加します。

以下のコードは、より複雑な状況で配列を複製する方法を示しています。

特定の要素のみを複製する

const originalArray = [1, 2, 3, 4, 5];
const evenNumbers = originalArray.filter(number => number % 2 === 0);

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(evenNumbers);  // [2, 4]

このコードでは、filter() メソッドを使用して、偶数のみを含む新しい配列 evenNumbers を作成します。

配列を複製して新しい要素を追加する

const originalArray = [1, 2, 3];
const duplicatedArray = originalArray.slice();
duplicatedArray.push(10);

console.log(originalArray); // [1, 2, 3]
console.log(duplicatedArray); // [1, 2, 3, 10]

このコードでは、slice() メソッドを使用して originalArray のコピーを作成し、push() メソッドを使用して新しい要素 10 を duplicatedArray に追加します。

JavaScript で配列を複製するには、さまざまな方法があります。状況に応じて適切な方法を選択することが重要です。一般的には、slice メソッドを使用することが最も効率的ですが、for ループやその他の方法も役立つ場合があります。

JavaScriptで配列を重複なしで複製する方法：その他の方法

Set オブジェクトは、要素の重複を自動的に排除する集合型データ構造です。この特性を利用して、配列の重複を効率的に除去し、新しい配列を作成することができます。

const originalArray = [1, 2, 3, 4, 5, 2, 3];
const uniqueArray = [...new Set(originalArray)];

console.log(originalArray); // [1, 2, 3, 4, 5, 2, 3]
console.log(uniqueArray);   // [1, 2, 3, 4, 5]

new Set() コンストラクタを使って、originalArray の要素をすべて含む新しい Set オブジェクトを作成します。
... 演算子を使って、Set オブジェクトをスプレッド構文で展開し、新しい配列 uniqueArray に格納します。

利点:

コードが簡潔で読みやすい。
重複要素を効率的に除去できる。

注意点:

Set オブジェクトは、要素の順序を保持しません。
オブジェクトのキーと値は同一視されるため、オブジェクトを含む配列の複製には適していない場合があります。

Array.from() 関数は、イテレータブルなオブジェクト (配列や文字列など) を新しい配列に変換するために使用できます。この関数にはオプション引数として map 関数を渡すことができ、その中で重複チェックと新しい配列への要素追加処理をまとめて記述することができます。

const originalArray = [1, 2, 3, 4, 5, 2, 3];
const uniqueArray = Array.from(originalArray, element => element);

console.log(originalArray); // [1, 2, 3, 4, 5, 2, 3]
console.log(uniqueArray);   // [1, 2, 3, 4, 5]

Array.from() 関数に originalArray と、各要素をそのまま返す map 関数を渡します。
map 関数は、originalArray の各要素に対して一度だけ実行されます。
処理結果は新しい配列 uniqueArray に格納されます。

Set オブジェクトよりも新しい方法で、重複排除と新しい配列への要素追加を処理できる。

Array.from() 関数は比較的新しい機能であり、古いブラウザではサポートされていない場合があります。

lodash ライブラリを利用する

lodash は、JavaScript でよく使用されるユーティリティライブラリです。このライブラリには、uniq 関数という、配列の重複要素を効率的に除去する関数があります。

const originalArray = [1, 2, 3, 4, 5, 2, 3];
const uniqueArray = _.uniq(originalArray);

console.log(originalArray); // [1, 2, 3, 4, 5, 2, 3]
console.log(uniqueArray);   // [1, 2, 3, 4, 5]