JavaScript で配列を複製する

Ammar Ali 2023年10月12日
  1. JavaScript の values() 関数を使用して既存の配列のクローンを作成する
  2. JavaScript の concat() 関数を使用して配列を複製する
  3. JavaScript の slice() 関数を使用して配列を複製する
  4. JavaScript のループを使用して配列のクローンを作成する
  5. JavaScript の map() 関数を使用して配列を複製する
JavaScript で配列を複製する

このチュートリアルでは、JavaScript で次の関数を使用して既存の配列のクローンを作成する方法について説明します:values()concat()slice()、loop、および map()

JavaScript の values() 関数を使用して既存の配列のクローンを作成する

既存の配列のクローンを作成するには、JavaScript の values() 関数を使用できます。このコマンドは、指定された配列と同じ値を持つ別の配列を作成します。たとえば、配列を作成し、values() 関数を使用してクローンを作成しましょう。以下のコードを参照してください。

var ArrA = [1, 2, 3];
var ArrB = Object.values(ArrA);
console.log(ArrB)

出力:

[1, 2, 3]

Date() 関数を使用して、この関数のパフォーマンスをテストすることもできます。Date() 関数は、現在の時刻をミリ秒単位で返します。たとえば、1000 行 1000 列の配列を作成し、values() 関数を使用してクローンを作成し、Date() 関数を使用してそのパフォーマンスを確認してみましょう。以下のコードを参照してください。

num = 1000 * 1000;
TimeStart = +new Date();
ArrA = Array(num);
ArrB = Object.values(ArrA);
console.log(new Date() - TimeStart, 'ms');

出力:

19 ms

このテストは Chrome ブラウザで実行されますが、システムやブラウザによって異なる場合があります。この方法を使用して、さまざまな機能のパフォーマンスを確認できます。

JavaScript の concat() 関数を使用して配列を複製する

concat() 関数を使用して、JavaScript で既存の配列のクローンを作成することもできます。この関数は、ある配列を別の配列と連結するため、空の配列を既存の配列と連結することで新しい配列を作成できます。たとえば、配列を作成し、concat() 関数を使用してクローンを作成しましょう。以下のコードを参照してください。

var ArrA = [1, 2, 3];
var ArrB = [];
ArrB = ArrB.concat(ArrA);
console.log(ArrB)

出力:

[1, 2, 3]

Date() 関数を使用して、concat() 関数のパフォーマンスをテストすることもできます。Date() 関数は、現在の時刻をミリ秒単位で返します。たとえば、1000 行 1000 列の配列を作成し、concat() 関数を使用してクローンを作成し、Date() 関数を使用してそのパフォーマンスを確認してみましょう。以下のコードを参照してください。

num = 1000 * 1000;
TimeStart = +new Date();
ArrA = Array(num);
var ArrB = [];
ArrB = ArrB.concat(ArrA);
console.log(new Date() - TimeStart, 'ms');

出力:

12 ms

出力でわかるように、concat() 関数を使用して 1000 行 1000 列の配列のクローンを作成するには 12 ミリ秒かかります。

JavaScript の slice() 関数を使用して配列を複製する

slice() 関数を使用して、JavaScript で配列のクローンを作成することもできます。この関数は、既存の配列の選択された要素または値を返し、それを別の配列に保存します。たとえば、slice() 関数を使用して既存の配列を使用して配列を作成しましょう。以下のコードを参照してください。

var ArrA = [1, 2, 3];
var ArrB = [];
ArrB = ArrA.slice();
console.log(ArrB)

出力:

[1, 2, 3]

Date() 関数を使用して、slice() 関数のパフォーマンスをテストすることもできます。Date() 関数は、現在の時刻をミリ秒単位で返します。クローン操作の前後の時間を記録して、この関数にかかる時間を確認できます。たとえば、1000 行 1000 列の配列を作成し、slice() 関数を使用してクローンを作成し、Date() 関数を使用してそのパフォーマンスを確認してみましょう。以下のコードを参照してください。

num = 1000 * 1000;
TimeStart = +new Date();
ArrA = Array(num);
var ArrB = ArrA.slice();
console.log(new Date() - TimeStart, 'ms');

出力:

14 ms

出力では、slice() 関数を使用して 1000 行 1000 列の配列のクローンを作成するのに 14 ミリ秒かかります。

JavaScript のループを使用して配列のクローンを作成する

ループを使用して、既存の配列のクローンを作成することもできます。ループを使用して、各要素を 1つの配列から別の配列にコピーする必要があります。たとえば、while ループを使用して既存の配列のクローンを作成しましょう。以下のコードを参照してください。

var ArrA = [1, 2, 3];
var ArrB = [];
var i = ArrA.length;
while (i--) {
  ArrB[i] = ArrA[i];
}
console.log(ArrB)

出力:

[1, 2, 3]

Date() 関数を使用して、このメソッドのパフォーマンスをテストすることもできます。このコマンドは、現在の時刻をミリ秒単位で返します。1000 行 1000 列の配列を使用してこのメ​​ソッドのパフォーマンスを確認してみましょう。以下のコードを参照してください。

num = 1000 * 1000;
TimeStart = +new Date();
ArrA = Array(num);
var ArrB = [];
var i = ArrA.length;
while (i--) {
  ArrB[i] = ArrA[i];
}
console.log(new Date() - TimeStart, 'ms');

出力:

125 ms

出力に注意できるように、while ループを使用して 1000 行 1000 列の配列のクローンを作成するには 125 ミリ秒かかります。

JavaScript の map() 関数を使用して配列を複製する

既存の配列のクローンを作成するには、JavaScript の map() 関数を使用することもできます。このコマンドは、既存の配列の各要素に対して関数を呼び出すことにより、別の配列を作成します。たとえば、map() 関数を使用して既存の配列を使用して配列を作成しましょう。以下のコードを参照してください。

var ArrA = [1, 2, 3];
var ArrB = ArrA.map(function(i) {
  return i
});
console.log(ArrB)

出力:

[1, 2, 3]

Date() 関数を使用して、map() 関数のパフォーマンスをテストすることもできます。この関数が 1000 行 1000 列の配列に対してどのように機能するかを確認してみましょう。以下のコードを参照してください。

num = 1000 * 1000;
TimeStart = +new Date();
ArrA = Array(num);
ArrB = ArrA.map(function(i) {
  return i
});
console.log(new Date() - TimeStart, 'ms');

出力:

25 ms

出力に基づいて、map() 関数を使用して 1000 行 1000 列の配列のクローンを作成するのに 25 ミリ秒かかります。

著者: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

関連記事 - JavaScript Array