在 JavaScript 中實現 Arraylist

Nithin Krishnan 2023年1月30日 2022年5月11日
  1. 在 JavaScript 中建立陣列元素
  2. 在 JavaScript 中訪問陣列元素
  3. 在 JavaScript 中向陣列新增元素
  4. 從陣列中刪除元素
在 JavaScript 中實現 Arraylist

我們非常熟悉 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 屬性,可返回陣列的大小。
  • typeoftypeof 是一元運算子。它用於在 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 中 ArrayListremove() 函式。

  • .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"]

相關文章 - JavaScript Array