在 JavaScript 中克隆一個陣列

Ammar Ali 2023年1月30日 2021年7月3日
  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() 函式以毫秒為單位返回當前時間。我們可以記錄 clone 操作前後的時間來檢視這個函式所用的時間。例如,讓我們建立一個 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 中使用迴圈克隆陣列

我們還可以使用迴圈來克隆現有陣列。我們需要使用迴圈將每個元素從一個陣列複製到另一個陣列。例如,讓我們使用 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 毫秒。

Author: 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