如何在 JavaScript 中清空一個陣列

Kirill Ibrahim 2023年10月12日

JavaScript JavaScript Array

陣列是儲存在一個方便的、有索引的集合中的元素集合。如果我們想清空一個包含乘法項的陣列怎麼辦？

本教程介紹瞭如何在 JavaScript 中清空陣列的不同方法。

JavaScript 將陣列設定為大小為零的新陣列

這是最快的方法。這將把陣列設定為一個新的空陣列。

let Arr = [1, 2, 3, 4];
Arr = [];

如果你沒有任何其他地方對原陣列的引用，這是很直接的。如果你這樣做，這些引用不會被更新，這些地方將繼續使用舊陣列。這意味著對以前的陣列內容的引用仍然保留在記憶體中，導致記憶體洩漏。

只有當你用原來的變數 Arr 來引用陣列時，才可以使用這個方法。

下面的程式碼示例顯示了使用該方法時可能遇到的問題。

let Arr1 = [1, 2, 3, 4, 5, 6];
let Arr2 = Arr1;
Arr1 = [];
console.log({Arr1, Arr2});

輸出：

{
  Arr1: [],
  Arr2: [1, 2, 3, 4, 5, 6]
}

它通過將現有陣列的長度設定為 0 來清除現有陣列，陣列的長度屬性是一個讀/寫屬性，所以在 ECMAScript 5 中使用嚴格模式時也可以使用。

Arr1.length = 0

這種方式有一個優點，因為它刪除了陣列中的所有內容，這確實會影響其他引用。如果我們有兩個對同一個陣列的引用，我們使用 Arr1.length = 0 刪除陣列的內容，現在兩個引用都將指向同一個空陣列。

let foo1 = [1, 2, 3];
let bar1 = [1, 2, 3];
let foo2 = foo1;
let bar2 = bar1;
foo1 = [];
bar1.length = 0;
console.log({foo1, bar1, foo2, bar2});

輸出：

{
  bar1: [],
  bar2: [circular object Array],
  foo1: [],
  foo2: [1, 2, 3]
}

array.splice() 方法是 JavaScript 中的一個內建方法，用於在陣列中新增/刪除專案，並返回刪除的專案。

let Arr1 = ['Tomato', 'Letcuce', 'Spinash', 'Cucumber'];
Arr1.splice(2, 0, 'Lemon', 'Kiwi')
console.log(Arr1);

輸出：

["Tomato", "Letcuce", "Lemon", "Kiwi", "Spinash", "Cucumber"]

清空陣列：

Arr1.splice(0, Arr1.length);
console.log(Arr1);

輸出：

[]

它從陣列中刪除所有元素，並將清理原始陣列。

pop() 方法從一個陣列中刪除最後一個元素，並返回該元素。並且會改變陣列的長度。

let vegetables = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(vegetables.pop());

console.log(vegetables);

輸出：

tomato
(4) ["broccoli", "cauliflower", "cabbage", "kale"]

我們在陣列上迴圈，每迴圈一次就彈出一個陣列元素，最後得到一個空陣列。

let Arr1 = [1, 2, 3, 4, 5];
for (let i = Arr1.length; i > 0; i--) {
  Arr1.pop();
}
console.log(Arr1);

輸出：

[]

該解決方案不是很簡潔，它也是最慢的解決方案。