JavaScript 陣列方法
基本陣列方法
JavaScript 陣列長度
length 屬性返回陣列的長度（大小）。
JavaScript 陣列 toString()
JavaScript 方法 toString() 將陣列轉換為由（逗號分隔的）陣列值組成的字串。
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
結果
JavaScript Array at() 方法
ES2022 引入了陣列方法 at()
示例
使用 at() 獲取 fruits 的第三個元素
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);
自己動手試一試 »
使用 [] 獲取 fruits 的第三個元素
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];
自己動手試一試 »
at() 方法返回陣列中指定索引的元素。
at() 方法返回與 [] 相同的結果。
at() 方法自 2022 年 3 月起在所有現代瀏覽器中受支援
| Chrome 92 | Edge 92 | Firefox 90 | Safari 15.4 | Opera 78 |
| 2021 年 4 月 | 2021 年 7 月 | 2021 年 7 月 | 2022 年 3 月 | 2021 年 8 月 |
注意
許多語言允許使用 負括號索引，例如 [-1]，來訪問物件/陣列/字串末尾的元素。
這在 JavaScript 中是不可能的，因為 [] 用於訪問陣列和物件。obj[-1] 指的是鍵 -1 的值，而不是物件的最後一個屬性。
at() 方法在 ES2022 中引入，旨在解決此問題。
JavaScript 陣列 join()
join() 方法也將所有陣列元素連線成一個字串。
它的行為與 toString() 完全相同，但此外您還可以指定分隔符。
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
結果
彈出和推入
在處理陣列時，可以輕鬆地刪除元素和新增新元素。
這就是彈出和推入的含義。
將項 **彈出** 陣列，或將項 **推入** 陣列。
JavaScript 陣列 pop()
pop() 方法刪除陣列的最後一個元素。
pop() 方法返回被“彈出”的值。
JavaScript 陣列 push()
push() 方法將一個新元素新增到陣列（末尾）。
push() 方法返回新的陣列長度。
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");
自己動手試一試 »移動元素
移動（shift）等同於彈出（pop），但操作的是第一個元素而不是最後一個。
JavaScript 陣列 shift()
shift() 方法刪除第一個陣列元素，並將其他所有元素“向左移”（索引降低）。
shift() 方法返回被“移出”的值。
JavaScript 陣列 unshift()
unshift() 方法將一個新元素新增到陣列（開頭），並將舊元素“向右移”（索引增加）。
unshift() 方法返回新的陣列長度。
更改元素
陣列元素透過其 **索引號** 進行訪問。
陣列 **索引** 從 0 開始。
[0] 是第一個陣列元素。
[1] 是第二個。
[2] 是第三個 ...
JavaScript 陣列長度
length 屬性提供了一種簡單的方法來在陣列末尾追加一個新元素。
JavaScript 陣列 delete()
警告！
使用 delete() 會在陣列中留下 undefined 的空位。
請改用 pop() 或 shift()。
合併陣列（連線）
在程式語言中，連線（concatenation）意味著將字串首尾相連。
連線 "snow" 和 "ball" 得到 "snowball"。
連線陣列意味著將陣列首尾相連。
JavaScript 陣列 concat()
concat() 方法透過合併（連線）現有陣列來建立一個新陣列。
示例（合併兩個陣列）
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
自己動手試一試 »
注意
concat() 方法不會更改現有陣列。它始終返回一個新陣列。
concat() 方法可以接受任意數量的陣列引數。
示例（合併三個陣列）
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);
自己動手試一試 »
concat() 方法也可以接受字串作為引數。
示例（合併一個數組和一些值）
const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");
自己動手試一試 »
陣列 copyWithin()
copyWithin() 方法將陣列元素複製到陣列中的另一個位置。
示例
複製到索引 2，複製索引 0 開始的所有元素。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);
自己動手試一試 »
複製到索引 2，複製索引 0 到 2 的元素。
const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
fruits.copyWithin(2, 0, 2);
自己動手試一試 »
注意
copyWithin() 方法會覆蓋現有值。
copyWithin() 方法不會向陣列新增專案。
copyWithin() 方法不會改變陣列的長度。
展平陣列
展平陣列是將陣列的維度降低的過程。
當您想將多維陣列轉換為一維陣列時，展平很有用。
JavaScript 陣列 flat() 方法
ES2019 引入了 Array flat() 方法。
flat() 方法建立一個新陣列，將子陣列元素展平到指定的深度。
瀏覽器支援
JavaScript 陣列 flat() 自 2020 年 1 月起在所有現代瀏覽器中均受支援
| Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
| 2018 年 9 月 | 2020 年 1 月 | 2018 年 9 月 | 2018 年 9 月 | 2018 年 9 月 |
JavaScript Array flatMap()
ES2019 在 JavaScript 中添加了 Array flatMap() 方法。
flatMap() 方法首先對映陣列的所有元素，然後透過展平陣列建立一個新陣列。
瀏覽器支援
JavaScript Array flatMap() 自 2020 年 1 月起在所有現代瀏覽器中都受支援
| Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
| 2018 年 9 月 | 2020 年 1 月 | 2018 年 9 月 | 2018 年 9 月 | 2018 年 9 月 |
拼接和切片陣列
splice() 方法向陣列新增新項。
slice() 方法從陣列中提取一部分。
JavaScript 陣列 splice()
splice() 方法可用於向陣列新增新項。
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
自己動手試一試 »
第一個引數（2）定義了 **新增** 新元素（拼接）的位置。
第二個引數（0）定義了 **刪除** 多少個元素。
其餘引數（"Lemon" , "Kiwi"）定義了要 **新增** 的新元素。
splice() 方法返回一個包含已刪除專案的陣列。
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
自己動手試一試 »
使用 splice() 刪除元素
透過巧妙的引數設定，您可以使用 splice() 刪除元素，而不會在陣列中留下“空位”。
第一個引數（0）定義了 **新增** 新元素（拼接）的位置。
第二個引數（1）定義了 **刪除** 多少個元素。
其餘引數被省略。不會新增新元素。
JavaScript 陣列 toSpliced()
ES2023 添加了 Array toSpliced() 方法，作為一種安全地拼接陣列而不改變原始陣列的方法。
新的 toSpliced() 方法與舊的 splice() 方法的區別在於，新方法建立一個新陣列，使原始陣列保持不變，而舊方法則改變了原始陣列。
JavaScript 陣列 slice()
slice() 方法將陣列的一部分切片到一個新陣列中。
示例
從陣列元素 1（"Orange"）開始切片一部分陣列。
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
自己動手試一試 »
注意
slice() 方法建立一個新陣列。
slice() 方法不會從源陣列中刪除任何元素。
示例
從陣列元素 3（"Apple"）開始切片一部分陣列。
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
自己動手試一試 »
slice() 方法可以像 slice(1, 3) 一樣接受兩個引數。
然後，該方法選擇從開始引數開始，到（但不包括）結束引數的元素。
示例
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
自己動手試一試 »
如果像第一個示例一樣省略了結束引數，slice() 方法會切片陣列的其餘部分。
示例
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
自己動手試一試 »
自動 toString()
當需要原始值時，JavaScript 會自動將陣列轉換為逗號分隔的字串。
當您嘗試輸出陣列時，總是會發生這種情況。
這兩個示例將產生相同的結果：
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
自己動手試一試 »
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
自己動手試一試 »
注意
所有 JavaScript 物件都有一個 toString() 方法。
搜尋陣列
本教程的下一章將介紹 陣列搜尋。
排序陣列
陣列排序 涵蓋了用於排序陣列的方法。
迭代陣列
陣列迭代 涵蓋了操作所有陣列元素的方法。
