在 JavaScript 中實現 Arraylist

1. 在 JavaScript 中建立陣列元素
2. 在 JavaScript 中訪問陣列元素
3. 在 JavaScript 中向陣列新增元素
4. 從陣列中刪除元素

我們非常熟悉 Java 中的 Arraylist，它允許我們在不指定陣列大小的情況下向陣列新增元素。這是一個不錯的功能，但我們在 JavaScript 中有類似的功能嗎？每種語言都有自己的一組資料結構。在 JavaScript 中，我們有可以儲存同構值和異構值的陣列。異構意味著值可能是各種資料型別，如字串、數字、布林值等，都放在一個陣列中。與 Java 中的 ArrayList 相比，它是一個獨特且更好的特性。

在 JavaScript 中建立陣列元素

在 JavaScript 中建立陣列很容易。我們使用 var 關鍵字建立一個陣列。它類似於我們在 Java 中使用 ArrayList 建立陣列的方式。Java 堅持指定 ArrayList 的資料型別。但是在 JavaScript 中，我們並沒有明確宣告 Array 的資料型別。我們讓 JavaScript 直譯器根據陣列中分配的值做出決定。無論如何，對於 JavaScript，陣列的型別是 object。參考以下程式碼建立一個 Array。

var a = [1, 6, 3, 5];
console.log(a.length);
console.log(typeof a);
console.log(typeof a[2]);

輸出：

4
object
number

• length：JavaScript 具有 length 屬性，可返回陣列的大小。
• typeof：typeof 是一元運算子。它用於在 JavaScript 中查詢運算元的型別。上面的程式碼使用 typeof 運算子將 Array 的資料型別作為 object 返回。

在 JavaScript 中訪問陣列元素

就像 Java 中的 Arraylist 一樣，我們可以使用迴圈、for 迴圈和 while 迴圈遍歷 JavaScript 陣列。JavaScript 還具有 .foreach() 函式，用於迭代陣列中的元素。我們可以使用 foreach() 在每個 Array 元素上執行某些程式碼行。foreach 函式接受一個函式作為引數。我們可以將此函式編寫為行內函數。檢查下面的程式碼片段以更好地理解。

var a = ['hello', 1, false];
a.forEach((i) => {
  console.log(typeof i);
})

輸出：

string
number
boolean

在這裡，我們對 Array 的每個元素應用 typeof 操作。該程式碼進一步將輸出記錄到 Web 瀏覽器控制檯。JavaScript 有另一個函式，.reverse() 函式，它反轉陣列中元素的位置。參考以下程式碼。

var a = ['hello', 1, false];
console.log(a.reverse());

輸出：

[false, 1, "hello"]

上述日誌是在 Google Chrome 網路瀏覽器控制檯中獲得的。

在 JavaScript 中向陣列新增元素

我們可以使用 Java 中的 .add() 函式將元素新增到 ArrayList。類似地，在 JavaScript 中，我們有一些函式可以用來在陣列的不同位置新增元素。

• .push()：顧名思義，我們可以使用 push() 函式將元素新增到陣列中。它將作為引數傳遞給函式的元素附加到陣列的末尾。push() 函式改變原始陣列。因此，在程式碼中使用它時要注意它。新增新元素後，它返回陣列的修改大小。
• .unshift()：如果我們必須在陣列的開頭新增一個元素，這將是一項繁忙的任務，因為我們需要通過索引重新定位陣列中的所有內容。我們可以使用 JavaScript 中的 .unshift() 函式來完成這個任務。使用 unshift()，我們可以將一個或多個元素新增到陣列的開頭。我們將希望新增到 Array 的元素作為引數傳遞給 unshift 函式。

var a = ['hello', 1, false];
a.push(2.15);
console.log(a);
a.unshift(123);
console.log(a);

輸出：

["hello", 1, false, 2.15]
[123, "hello", 1, false, 2.15]

輸出是在 google chrome 網路瀏覽器中獲得的。請注意，這些操作無需使用賦值運算子即可更改原始陣列。

從陣列中刪除元素

同樣，我們可以使用以下 JavaScript 函式從陣列中刪除元素。它類似於 Java 中 ArrayList 的 remove() 函式。

• .pop() 如果我們要從 array 後面刪除一個元素，我們可以使用 .pop() 函式。請注意，該函式會更改原始 Array 並返回它剛剛彈出的最後一個元素。
• .shift() 如果我們必須從陣列的開頭刪除一個元素，我們可以使用 .shift() 函式。與 .pop() 一樣，.shift() 也會改變原始陣列。所以在使用 .shift() 函式時要注意。

var a = [123, 'hello', 1, false, 2.15];
a.pop();
console.log(a);
a.shift();
console.log(a);

輸出：

[123, "hello", 1, false]
["hello", 1, false]

這裡有幾點需要注意。

1. pop() 和 shift() 函式都不接受任何引數。它們用於在給定時間從陣列中刪除一個元素。
2. 他們無需賦值運算子即可更改原始陣列。因此，我們必須明智地使用它們，否則我們可能會陷入難以除錯的未知副作用。

從陣列中新增和刪除多個元素

JavaScript 中有另一種方法，splice() 函式。我們可以使用它從陣列中新增或刪除一個或多個元素。splice() 函式採用以下幾個引數。

• startIndex：我們使用 startIndex 引數指定陣列索引。
• count：此引數指定我們希望從陣列中刪除的元素數量。如果未指定計數，則 splice() 將刪除從 startIndex 到陣列末尾的所有元素。
• elements：最後一個引數是我們希望從 startIndex 新增到陣列的元素列表。如果在 splice() 函式中沒有指定元素，它將從陣列中刪除元素。

讓我們看看下面的程式碼來了解更多。

var a = [123, 'hello', 1, false, 2.15];
a.splice(2, 1, 'there');
console.log(a);
a.splice(2, 2);
console.log(a);
a.splice(2);
console.log(a);

輸出：

[123, "hello", "there", false, 2.15]
[123, "hello", 2.15]
[123, "hello"]