ES6 - 陣列

---

---

使用變數儲存值存在以下限制：

• 變數本質上是標量的。換句話說，一個變數宣告一次只能包含一個值。這意味著要在一個程式中儲存 n 個值，需要 n 個變數宣告。因此，當需要儲存大量值時，使用變數是不可行的。

• 程式中的變數以隨機順序分配記憶體，從而難以按宣告順序檢索/讀取值。

JavaScript 引入了陣列的概念來解決這個問題。

陣列是值的同質集合。簡而言之，陣列是相同資料型別值的集合。它是一種使用者定義的型別。

陣列的特性

• 陣列宣告分配連續的記憶體塊。

• 陣列是靜態的。這意味著一旦初始化，陣列就不能調整大小。

• 每個記憶體塊代表一個數組元素。

• 陣列元素由一個唯一的整數標識，稱為元素的下標/索引。

• 陣列也像變數一樣，應該在使用前宣告。

• 陣列初始化是指填充陣列元素。

• 陣列元素的值可以更新或修改，但不能刪除。

宣告和初始化陣列

要在 JavaScript 中宣告和初始化陣列，請使用以下語法：

var array_name; //declaration 
array_name = [val1,val2,valn..]   //initialization 
OR 
var array_name = [val1,val2…valn]

注意 - [] 對稱為陣列的維度。

例如，宣告：var numlist = [2,4,6,8] 將建立一個如下所示的陣列。

訪問陣列元素

陣列名稱後跟下標用於引用陣列元素。

以下是相同的語法。

array_name[subscript]

示例：簡單陣列

var alphas; 
alphas = ["1","2","3","4"] 
console.log(alphas[0]); 
console.log(alphas[1]);

成功執行上述程式碼後將顯示以下輸出。

1 
2

示例：單語句宣告和初始化

var nums = [1,2,3,3] 
console.log(nums[0]); 
console.log(nums[1]); 
console.log(nums[2]); 
console.log(nums[3]);

成功執行上述程式碼後將顯示以下輸出。

1 
2 
3 
3

陣列物件

也可以使用 Array 物件建立陣列。Array 建構函式可以作為以下內容傳遞：

• 表示陣列大小的數值；或

• 以逗號分隔的值列表。

以下示例使用此方法建立陣列。

示例

var arr_names = new Array(4)  
for(var i = 0;i<arr_names.length;i++) { 
   arr_names[i] = i * 2 
   console.log(arr_names[i]) 
}

成功執行上述程式碼後將顯示以下輸出。

0 
2 
4 
6 

示例：Array 建構函式接受逗號分隔的值

var names = new Array("Mary","Tom","Jack","Jill") 
for(var i = 0;i<names.length;i++) { 
   console.log(names[i]) 
}

成功執行上述程式碼後將顯示以下輸出。

Mary 
Tom 
Jack 
Jill

陣列方法

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

ES6 - 陣列方法

以下是 ES6 中引入的一些新的陣列方法。

Array.prototype.find

find 允許你迭代陣列並返回導致給定回撥函式返回 true 的第一個元素。找到元素後，函式立即返回。這是獲取與給定條件匹配的第一個專案的有效方法。

示例

var numbers = [1, 2, 3]; 
var oddNumber = numbers.find((x) => x % 2 == 1); 
console.log(oddNumber); // 1

成功執行上述程式碼後將顯示以下輸出。

1

注意 - ES5 的 filter() 和 ES6 的 find() 不是同義詞。Filter 始終返回匹配項陣列（並將返回多個匹配項），find 始終返回實際元素。

Array.prototype.findIndex

findIndex 的行為類似於 find，但它不是返回匹配的元素，而是返回該元素的索引。

var numbers = [1, 2, 3]; 
var oddNumber = numbers.findIndex((x) => x % 2 == 1); 
console.log(oddNumber); // 0 

上面的例子將返回值 1 的索引 (0) 作為輸出。

Array.prototype.entries

entries 是一個函式，它返回一個 Array Iterator，可用於迴圈遍歷陣列的鍵和值。Entries 將返回一個數組的陣列，其中每個子陣列都是一個 [index, value] 陣列。

var numbers = [1, 2, 3]; 
var val = numbers.entries(); 
console.log(val.next().value);  
console.log(val.next().value);  
console.log(val.next().value);

成功執行上述程式碼後將顯示以下輸出。

[0,1] 
[1.2] 
[2,3]

或者，我們也可以使用擴充套件運算子一次性獲取條目陣列。

var numbers = [1, 2, 3]; 
var val= numbers.entries(); 
console.log([...val]);

成功執行上述程式碼後將顯示以下輸出。

[[0,1],[1,2],[2,3]]

Array.from

Array.from() 能夠從類似陣列的物件建立一個新陣列。Array.from() 的基本功能是將兩種型別的變數轉換為陣列：

• 類似陣列的值。

• 可迭代的值，如 Set 和 Map。

示例

"use strict" 
for (let i of Array.from('hello')) { 
   console.log(i) 
}

成功執行上述程式碼後將顯示以下輸出。

h                               
e                               
l                               
l                               
o

Array.prototype.keys()

此函式返回陣列索引。

示例

console.log(Array.from(['a', 'b'].keys()))

成功執行上述程式碼後將顯示以下輸出。

[ 0, 1 ] 

使用 for…in 迴圈遍歷陣列

可以使用 for…in 迴圈遍歷陣列。

"use strict" 
var nums = [1001,1002,1003,1004] 
for(let j in nums) { 
   console.log(nums[j]) 
}

迴圈執行基於索引的陣列遍歷。成功執行上述程式碼後將顯示以下輸出。

1001 
1002 
1003 
1004

JavaScript 中的陣列

JavaScript 支援以下關於陣列的概念：

陣列解構

解構是指將陣列或物件中的單個值提取到不同的變數中。考慮需要將陣列的值分配給單個變數的情況。傳統的做法如下：

var a= array1[0]
var b= array1[1]
var c= array1[2]

解構有助於以簡潔的方式實現相同的功能。

語法

//destructuring an array
let [variable1,variable2]=[item1,item2]
//destructuring an object
let {property1,property2} = {property1:value1,property2:value2}

示例

<script>
   let names = ['Mohtashim','Kannan','Kiran']
   let [n1,n2,n3] = names;
   console.log(n1)
   console.log(n2)
   console.log(n3);
   //rest operator with array destructuring
   let locations=['Mumbai','Hyderabad','Chennai']
   let [l1,...otherValues] =locations
   console.log(l1)
   console.log(otherValues)
   //variables already declared
   let name1,name2;
   [name1,name2] =names
   console.log(name1)
   console.log(name2)
   //swapping
   let first=10,second=20;
   [second,first] = [first,second]
   console.log("second is ",second) //10
   console.log("first is ",first) //20
</script>

以上程式碼的輸出將如下所示：

Mohtashim
Kannan
Kiran
Mumbai
["Hyderabad", "Chennai"]
Mohtashim
Kannan
second is 10
first is 20