陣列

在上一篇文章中我們提到如何宣告值和取得陣列值，但其實在 JavaScript 中還有很多對陣列的操作方法，例如新增、刪除、修改、或過濾陣列值等等，接下來就讓我們一一介紹吧。

修改陣列值

語法：

array[index] = 值;

當我們有一陣列，可以直接使用 array[index] = 值 來修改或賦予該位置的值。

let array = [1, 3, 4, 2];
array[0] = 5; // 將 array[0] 的值改為 5
console.log(array); // [5, 3, 4, 2]

若 array[index] 的 index 超過陣列原有的最大索引值，例如在一個長度為 3 (最大索引值為 2) 的陣列中下 array[4] = 2，則陣列會自動加長到指定索引值的長度，中間未賦值的項則會為空值。

// 原始陣列長度為 3，最大索引值為 2 (array[2])
let array = ["a", "b", "c"];
// 指定 array[4]
array[4] = "xx";
console.log(array); // ['a', 'b', 'c', empty, 'xx']
// 陣列加長至 5，第四項未賦值，為空

在陣列最前和最末端加入值

語法：

// 在陣列末端加入一個值
array.push(值);
// 在陣列末端加入多個值
array.push(值, 值, 值); // 以逗號連接

// 在陣列最前端加入一個值
array.unshift(值);
// 在陣列最前端加入多個值
array.unshift(值, 值, 值); // 以逗號連接

範例：

let array = ["a", "b", "c"];
array.push(1); // 在陣列最後加入 1
console.log(array); // ['a', 'b', 'c', 1]
array.push("哈", "囉"); // 在陣列最後加入 "哈"、"囉"
console.log(array); //['a', 'b', 'c', 1, '哈', '囉']
array.unshift(2); // 在陣列最前加入 2
console.log(array); // [2, 'a', 'b', 'c', 1, '哈', '囉']

移出陣列最前/後的值

語法：

// 移出陣列最後一項
array.pop();
// 移出陣列最後一項並賦值到變數中 (原陣列最後一項同樣會被刪除)
let a = array.pop();

// 移出陣列第一項
array.shift();
// 移出陣列第一項並賦值到變數中 (原陣列第一項同樣會被刪除)
let b = array.shift();

範例：

let array = ['a', 'b', 'c', 'd'];
let item1 = array.pop(); // 移出最後一項放到變數 item1 中
let item2 = array.shift(); // 移出第一項放到變數 item2 中
console.log(array); // ['b', 'c']，原始陣列剩下第二項和第三項
console.log(item1); // 'd'
console.log(item2); // 'a'

刪除陣列值

當我們需要刪除陣列中的某一項或者某幾項時，可以使用 array.splice()，splice 主要有兩個參數，第一個是「開始進行刪除的索引值」，第二個參數則是「要刪除幾項」。
語法：

array.splice(索引值, 要刪除幾個);

範例：

let array = ['a', 'b', 'c', 'd'];
array.splice(1, 2); // 從索引值 1 開始刪除兩項 (索引 1 和 2)
console.log(array); // ['a', 'd']

陣列排序

在陣列中 sort() 可以將陣列中的值進行排序，預設會將元素轉型成字串再進行比較，而比較的方式是從左到右依序比對元素中每個字元的 Unicode code point 大小，並將陣列轉為由小到大排序。不過由於 sort() 會先將值都轉為字串，所以在陣列 [1 , 2, 10, 3] 中，排序後的結果為 [1, 10, 2, 3]。
sort() 其實也可以加參數自定義排序方法，不過目前我們就先知道它能夠將陣列由小到大排序就好了。
語法：

array.sort();

範例：

let array = ['d', 'b', 'g', 'd'];
array.sort();
console.log(array); // ['b', 'd', 'd', 'g']

let num = [3, 1, 11, 2, 21];
num.sort();
console.log(num); //  [1, 11, 2, 21, 3]

反轉陣列

reverse() 會將陣列反轉，也就是原本排列為 [1, 2, 3, 4] 的陣列會變成 [4, 3, 2, 1]。
語法：

array.reverse();

範例：

let array = ['a', 'b', 'c', 'd'];
array.reverse(); // 反轉陣列
console.log(array); // ['d', 'c', 'b', 'a']

判斷是否包含某值

當我們想判斷陣列中是否包含某個值時，可以使用 indexOf 或 includes，前者會回傳該項所在的索引值，若不包含則為 -1，而後者會直接回傳是否存在的 Boolean 值。

• array.indexOf()
  • 無法判斷 NaN
  • 回傳元素的 index 值，若無則回傳 -1
• array.includes()
  • 可以判斷 NaN
  • 直接回傳 Boolean 值

範例：

let array = ['a', 'b', 'c', 'd'];
// indexOf
console.log(array.indexOf('a')); // 0
console.log(array.indexOf('c')); // 2
console.log(array.indexOf('z')); // -1 (沒有在陣列中)
// includes
console.log(array.includes('c')); // true
console.log(array.includes('x')); // false

上一篇：[快速入門前端 50] JavaScript：Array 陣列 (1) 陣列宣告和取值
下一篇：[快速入門前端 52] JavaScript：Object 物件
系列文章列表：[快速入門前端] 系列文章索引列表