logo

TechCodeview

JavaScript で配列のクローンを作成するにはどうすればよいですか?

で JavaScript、 配列のクローン作成とは、元の配列と同じ要素を持つ新しい配列を作成することを意味します。 JavaScript での配列のクローン作成は、元の配列を変更せずに、既存の配列と同じ要素を持つ新しい配列を作成する場合に便利です。

アレイのクローンをいつ作成するか?

配列に対して並べ替え、フィルタリング、マッピングなどの操作を実行したいが、元の配列は変更したくない場合は、元の配列のクローンを作成し、代わりにそのクローンに対して操作を実行できます。



  • 配列を引数として関数に渡すとき、関数が元の配列を変更しないようにしたい場合があります。この場合、代わりに配列のクローンを渡すことができます。
  • 将来の参照のために元の配列を保存したい場合は、元の配列のクローンを作成し、そのクローンをさらなる処理または操作に使用できます。
  • オブジェクトまたは配列を要素として含む配列があり、元のオブジェクトまたは配列の変更を避けたい場合は、配列のクローンを作成して操作することができます。これにより、クローン内のオブジェクトまたは配列に変更が加えられなくなります。元のオブジェクトまたは配列に影響を与えます。

したがって、 JavaScript で配列のクローンを作成する これは、元の配列とその要素の整合性を維持しながら配列を操作する場合に便利なテクニックです。

アレイのクローン作成の一般的な使用例をいくつか示します。

目次



Array.slice() メソッドの使用

私たちが使用するのは、 スライス法 配列の浅いコピーを作成します。このメソッドは、元の配列の要素のサブセットを含む新しい配列を作成します。

例： この例は、上で説明したアプローチの実装を示しています。

JavaScript 
const originalArray = [1, 2, 3]; const clonedArray = originalArray.slice(); console.log(clonedArray);>
出力 
[ 1, 2, 3 ]>

スプレッド演算子の使用

を使用して、 スプレッド演算子 … は、JavaScript で配列のクローンを作成する簡潔かつ簡単な方法です。スプレッド演算子を使用すると、配列を個々の要素に展開し、それを使用して新しい配列を作成できます。



例： この例は、上で説明したアプローチの実装を示しています。

JavaScript 
const originalArray = [1, 2, 3]; const clonedArray = [...originalArray]; console.log(clonedArray);>
出力 
[ 1, 2, 3 ]>

Array.from() メソッドの使用

を使用して、 Array.from() メソッドは、JavaScript で配列のクローンを作成する別の方法です。このメソッドは、オプションのマッピング関数を使用して新しい配列の値を変換し、既存の配列から新しい配列を作成します。

例： この例は、上で説明したアプローチの実装を示しています。

JavaScript 
const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray); console.log(clonedArray);>
出力 
[ 1, 2, 3 ]>

Array.concat() メソッドの使用

を使用して、 Array.concat() メソッドは、JavaScript で配列のクローンを作成する別の方法です。このメソッドは、2 つ以上の配列を連結して新しい配列を作成します。

c 乱数

例： この例は、上で説明したアプローチの実装を示しています。

JavaScript 
const originalArray = [1, 2, 3]; const clonedArray = [].concat(originalArray); console.log(clonedArray);>
出力 
[ 1, 2, 3 ]>

for ループを使用する

この方法では、元の配列の各要素を反復処理し、各要素を新しい配列にコピーします。

例： この例は、上で説明したアプローチの実装を示しています。

JavaScript 
const originalArray = [1, 2, 3]; const clonedArray = []; for (let i = 0; i < originalArray.length; i++) {  clonedArray.push(originalArray[i]); } console.log(clonedArray);>
出力 
[ 1, 2, 3 ]>

Array.map() メソッドの使用

を使用して、 Array.map() メソッドは、JavaScript で配列のクローンを作成する別の方法です。このメソッドは、元の配列の各要素を新しい値にマッピングすることにより、新しい配列を作成します。

例： この例は、上で説明したアプローチの実装を示しています。

JavaScript 
const originalArray = [1, 2, 3]; const clonedArray = originalArray.map(x =>バツ）; console.log(clonedArray);>>
出力 
[ 1, 2, 3 ]>

Array.from() メソッドとマップ関数の使用

を使用して、 Array.from() 方法 Map 関数を使用することは、JavaScript で配列のクローンを作成するもう 1 つの方法です。このメソッドは、提供された関数を使用して、元の配列の各要素を新しい値にマッピングすることにより、新しい配列を作成します。

例： この例は、上で説明したアプローチの実装を示しています。

JavaScript 
const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray, x =>バツ）; console.log(clonedArray);>>
出力 
[ 1, 2, 3 ]>

Array.of() メソッドの使用

このメソッドは、元の配列と同じ要素を持つ新しい配列を作成します。

例： この例は、上で説明したアプローチの実装を示しています。

JavaScript 
const originalArray = [1, 2, 3]; const clonedArray = Array.of(...originalArray); console.log(clonedArray);>
出力 
[ 1, 2, 3 ]>

JSON.parse() メソッドと JSON.stringify() メソッドの使用

を使用して、 JSON.parse() そして JSON.stringify() メソッドは、JavaScript で配列のクローンを作成するもう 1 つの方法です。この方法では、元の配列を JSON 文字列に変換し、その JSON 文字列を解析して新しい配列を作成します。

例： この例は、上で説明したアプローチの実装を示しています。

JavaScript 
const originalArray = [1, 2, 3]; const clonedArray = JSON.parse(JSON.stringify(originalArray)); console.log(clonedArray);>
出力 
[ 1, 2, 3 ]>

Object.assign() メソッドの使用

を使用して、 Object.assign() 方法 これは、JavaScript で配列のクローンを作成する別の方法です。このメソッドは、元の配列のプロパティを新しいオブジェクトにコピーすることにより、新しい配列を作成します。

例： この例は、上で説明したアプローチの実装を示しています。

Javaの基本
JavaScript 
const originalArray = [1, 2, 3]; const clonedArray = Object.assign([], originalArray); console.log(clonedArray);>
出力 
[ 1, 2, 3 ]>

Array.reduce() メソッドの使用

の Array.reduce() メソッド 配列の各要素に対してリデューサー関数を実行し、単一の出力値を生成します。これを使用して、元の配列と同じ要素を持つ新しい配列を構築できます。

構文：

例 : この例では、Array.reduce() メソッドを使用して配列のクローンを作成します。

JavaScript 
// Input array const originalArray = [1, 2, 3, 4]; // Cloning the array using reduce const clonedArray = originalArray.reduce((acc, val) =>{ acc.push(val);  ACC を返します。 }、[]); // 元の配列と複製された配列を表示します console.log('Original Array:',originalArray); // 出力: [1, 2, 3, 4] console.log('クローンされた配列:', clonedArray); // 出力: [1, 2, 3, 4]>>'  
  出力      注記：    したがって、アレイのクローンを作成するときは、データの複雑さとアプリケーションのパフォーマンス要件を考慮することが重要です。