JavaScript - 陣列

JavaScript 的Array 物件允許您在單個變數中儲存多個值。陣列用於儲存相同或不同資料型別的多個元素的順序集合。在 JavaScript 中，陣列是動態的，因此您無需在定義陣列時指定陣列的長度。JavaScript 陣列的大小可以在建立後減小或增大。

語法

使用以下語法在 JavaScript 中建立陣列物件：

const arr = new Array(val1, val2, val3, ..., valN)

引數

val1, val2, val3, ..., valN − 它接受多個值作為引數，用它們初始化陣列。

返回值

它返回一個數組物件。

注意 − 當您向 Array() 建構函式傳遞單個數字引數時，它將定義一個長度為引數的陣列，其中包含未定義的值。陣列允許的最大長度為 4,294,967,295。

您可以將多個用逗號分隔的元素放在方括號內，使用陣列字面量建立陣列：

const fruits = [ "apple", "orange", "mango" ];

您將使用序數來訪問和設定陣列內部的值，如下所示。

fruits[0] is the first element
fruits[1] is the second element
fruits[2] is the third element

JavaScript 陣列參考

在 JavaScript 中，Array 物件允許在單個變數名稱下儲存多個元素的集合。它提供了各種方法和屬性來對陣列執行操作。在這裡，我們列出了 Array 類的屬性和方法。

JavaScript 陣列屬性

以下是 Array 物件的屬性列表及其描述：

序號	名稱和描述
1	constructor 返回對建立該物件的陣列函式的引用。
2	length 反映陣列中元素的數量。

序號

名稱和描述

constructor

返回對建立該物件的陣列函式的引用。

length

反映陣列中元素的數量。

JavaScript 陣列方法

以下是 Array 物件的方法列表及其描述：

陣列靜態方法

這些方法使用 Array 類本身呼叫：

序號	名稱和描述
1	from() 建立陣列的淺複製。
2	isArray() 根據引數是否為陣列返回布林值。
3	of() 從多個引數建立陣列。

序號

名稱和描述

from()

建立陣列的淺複製。

isArray()

根據引數是否為陣列返回布林值。

of()

從多個引數建立陣列。

陣列例項方法

這些方法使用 Array 類的例項呼叫：

序號	名稱和描述
1	at() 獲取特定索引處的元素。
2	concat() 返回一個新陣列，該陣列由該陣列與另一個數組和/或值連線而成。
3	copyWithin() 將陣列的一部分複製到陣列中的不同位置。
4	entries() 獲取陣列的每個條目。
5	every() 如果該陣列中的每個元素都滿足提供的測試函式，則返回 true。
6	fill() 用靜態值填充陣列。
7	filter() 建立一個新陣列，其中包含該陣列的所有元素，對於這些元素，提供的過濾函式返回 true。
8	find() 查詢滿足條件的元素。
9	findIndex() 查詢滿足條件的元素的索引。
10	findLast() 從最後查詢滿足條件的元素。
11	findLastIndex() 從最後查詢滿足條件的元素的索引。
12	flat() 扁平化陣列。
13	flatMap() 在扁平化陣列後獲取一個新陣列。
14	forEach() 為陣列中的每個元素呼叫一個函式。
15	Includes() 如果陣列包含特定元素，則返回布林值。
16	indexOf() 返回陣列中等於指定值的第一個（最小）元素的索引，如果未找到則返回 -1。
17	join() 將陣列的所有元素連線成一個字串。
18	keys() 返回一個數組迭代器，其中包含每個陣列元素的鍵。
19	lastIndexOf() 返回陣列中等於指定值的最後一個（最大）元素的索引，如果未找到則返回 -1。
20	map() 建立一個新陣列，其中包含對該陣列中每個元素呼叫提供的函式的結果。
21	pop() 從陣列中刪除最後一個元素並返回該元素。
22	push() 將一個或多個元素新增到陣列的末尾，並返回陣列的新長度。
23	reduce() 對陣列的兩個值（從左到右）同時應用一個函式，以將其減少為單個值。
24	reduceRight() 對陣列的兩個值（從右到左）同時應用一個函式，以將其減少為單個值。
25	reverse() 反轉陣列元素的順序——第一個元素變成最後一個，最後一個元素變成第一個。
26	shift() 移除陣列中的第一個元素並返回該元素。
27	slice() 提取陣列的一部分並返回一個新陣列。
28	some() 如果此陣列中至少有一個元素滿足提供的測試函式，則返回 true。
29	toSorted() 按特定順序對陣列的元素進行排序。
30	sort() 對陣列的元素進行排序。
31	splice() 新增和/或從陣列中移除元素。
32	toLocaleString() 將陣列元素轉換為字串。
33	toReversed() 返回陣列的反轉。
34	toSpliced() 此方法返回一個新陣列，其中某些元素已在給定索引處移除和/或替換。
35	toString() 返回表示陣列及其元素的字串。
36	unshift() 將一個或多個元素新增到陣列的開頭，並返回陣列的新長度。
37	values() 獲取一個包含每個陣列索引值的迭代器。
38	with() 此方法返回一個新陣列，其中給定索引處的元素被替換為給定值。

JavaScript 陣列物件的簡單示例

在以下示例中，我們演示了 JavaScript 陣列物件的基本方法和屬性的使用。

示例（建立 JavaScript 陣列物件）

在下面的示例中，陣列 'strs' 使用作為 Array() 建構函式引數傳遞的字串值進行初始化。

‘cars’ 陣列包含 20 個未定義的元素。如果傳遞多個數字值，它將定義包含這些元素的陣列，但需要小心對 array() 建構函式使用單個數字引數。

<html>
<head>
   <title> JavaScript - Array() constructor </title>
</head>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");

      let strs = new Array("Hello", "World!", "Tutorials Point");
      output.innerHTML += "strs ==> " + strs + "<br>";

      let cars = new Array(20);
      output.innerHTML += "cars ==> " + cars + "<br>";
   </script>
</body>
</html>

輸出

執行上述程式以檢視所需的輸出。

strs ==> Hello,World!,Tutorials Point
cars ==> ,,,,,,,,,,,,,,,,,,,

示例（使用陣列字面量建立陣列）

在下面的示例中，我們建立了不同的陣列。arr1 陣列包含數字，arr2 陣列包含字串，arr3 陣列包含布林值。

<html>
<head>
   <title> JavaScript - Array literals </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");

      const arr1 = [10, 40, 50, 60, 80, 90];  // Array of numbers
      const arr2 = ["Hello", "Hi", "How", "are", "you?"]; // Array of strings
      const arr3 = [true, false, true, true]; // Array of booleans

      output.innerHTML += "arr1 ==>  " + arr1 + "<br>";
      output.innerHTML += "arr2 ==>  " + arr2 + "<br>";
      output.innerHTML += "arr3 ==>  " + arr3 + "<br>";
   </script>
</body>
</html>

輸出

執行上述程式以檢視所需的輸出。

arr1 ==> 10,40,50,60,80,90
arr2 ==> Hello,Hi,How,are,you?
arr3 ==> true,false,true,true

訪問 JavaScript 陣列元素

陣列索引從 0 開始。因此，您可以使用其索引訪問陣列元素。

let number = arr[index]

在上述語法中，'arr' 是一個數組，'index' 是一個數字，我們需要從中訪問陣列元素。

示例

在下面的示例中，我們建立了數字陣列並訪問了陣列中第 0 個和第 2 個索引處的元素。第 0 個索引處的元素是 1，第 2 個索引處的元素是 6。

<html>
<head>
   <title> JavaScript - Accessing array elements </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const nums = [1, 5, 6, 8, 90];
      document.getElementById("output").innerHTML =
      "Element at 0th index is : " + nums[0] + "<br>" +
      "Element at 2nd index is : " + nums[2];
   </script>
</body>
</html>

輸出

Element at 0th index is : 1
Element at 2nd index is : 6

JavaScript 陣列長度

陣列的 'length' 屬性用於查詢陣列的長度。

let len = arr.length;

示例

在下面的示例中，'length' 屬性返回 5，因為陣列包含 5 個元素。

<html>
<head>
   <title> JavaScript - Array length </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const nums = [1, 5, 6, 8, 90];
      document.getElementById("output").innerHTML = 
      "Array length is : " + nums.length;
   </script>
</body>
</html>

輸出

Array length is : 5

向陣列新增新元素

您可以使用 push() 方法將元素插入到陣列的末尾。另一種解決方案是您可以將陣列插入到等於陣列長度的索引處。

arr.push(ele)
OR
arr[arr.length] = ele;

在上述語法中，'ele' 是要插入到陣列中的新元素。這裡，如果陣列長度為 N，則陣列包含從 0 到 N – 1 索引的元素。因此，我們可以將新元素插入到第 N 個索引處。

示例

在下面的示例中，我們使用 push() 方法將 6 插入到陣列中。此外，我們使用 'length' 屬性將元素插入到末尾。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      const nums = [1, 2, 3, 4, 5];
      nums.push(6); // Inserting 6 at the end
      output.innerHTML += "Updated array is : " + nums + "<br>";
      nums[nums.length] = 7; // Inserting 7
      output.innerHTML += "Updated array is : " + nums + "<br>"
   </script>
</body>
</html>

輸出

正如我們在輸出中看到的，提供的元素已新增。

Updated array is : 1,2,3,4,5,6
Updated array is : 1,2,3,4,5,6,7

更新 JavaScript 陣列元素

要更新任何陣列元素，您可以訪問陣列索引並更改其值。

arr[index] = ele;

在上述語法中，'index' 是我們需要使用 'ele' 值更新值的索引。

示例

在下面的示例中，我們更新陣列中第一個索引處的元素。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const nums = [1, 2, 3, 4, 5];
      nums[0] = 100; // Updating first element
      document.getElementById("output").innerHTML = 
      "Updated array is : " + nums;
   </script>
</body>
</html>

輸出

Updated array is : 100,2,3,4,5

遍歷 JavaScript 陣列

您可以使用迴圈遍歷每個陣列元素。但是，存在一些內建方法來遍歷陣列，我們將在後面的章節中看到。

for (let p = 0; p < nums.length; p++) {
   // Access array using the nums[p]
}

示例

在下面的程式碼中，陣列包含 5 個數字。我們使用 for 迴圈遍歷陣列並列印每個元素。

但是，while 和 do-while 迴圈也可以用於遍歷陣列。

<html>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      const nums = [1, 2, 3, 4, 5];
      for (let p = 0; p < nums.length; p++) {
         output.innerHTML += "nums[" + p + "] ==> " + nums[p] + "<br>";
      }
   </script>
</body>
</html>

輸出

nums[0] ==> 1
nums[1] ==> 2
nums[2] ==> 3
nums[3] ==> 4
nums[4] ==> 5

列印頁面