學習內容來源：JavaScript 陣列方法

JavaScript 陣列方法

把陣列轉換為字串

1、JavaScript 方法 toString() 把陣列轉換為陣列值（逗號分隔）的字串。

注意：所有 JavaScript 物件都擁有 toString() 方法

// id 為 demo 的 html 元素的內容是 Banana,Orange,Apple,Mango
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 
 

2、join() 方法也可將所有陣列元素結合為一個字串。它的行為類似 toString()，但是還可以規定分隔符。

// id 為 demo 的 html 元素的內容是 Banana * Orange * Apple * Mango
var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 

Popping 和 Pushing

Popping 指的是從陣列彈出專案，Pushing 指的是向陣列推入專案。

Popping

pop() 方法從陣列中刪除最後一個元素，並返回“被彈出”的值

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango"

Pushing

push() 方法在陣列結尾處向陣列新增一個新的元素，並返回新陣列的長度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");   //  x 的值是 5

位移元素

shift()

會刪除首個數組元素，並把所有其他元素“位移”到更低的索引。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();   // 從 fruits 刪除第一個元素 "Banana"，並返回返回被“位移出”的字串 "Banana"

unshift()

在開頭向陣列新增新元素，並“反向位移”舊元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 向 fruits 新增新元素 "Lemon"，並返回新陣列的長度

更改元素

通過使用陣列的索引號來訪問陣列元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // 把 fruits 的第一個元素改為 "Kiwi"

length 屬性提供了向陣列追加新元素的簡易方法。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"

刪除元素

JavaScript 陣列屬於物件，其中的元素就可以使用 JavaScript delete 運算子來刪除。

注意：使用 delete 會在陣列留下未定義的空洞。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首個元素改為 undefined

拼接陣列

注意：使用 splice() 會改變原陣列

1、使用 splice() 向陣列新增新項

// 第一個引數（2）定義了應新增新元素的位置（拼接）。
// 第二個引數（2）定義應刪除多少元素。
// 其餘引數（“Lemon”，“Kiwi”）定義要新增的新元素。
// 最後返回一個包含已刪除項的陣列。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi"); // 返回 ["Apple", "Mango"]

2、使用 splice() 來刪除元素

// 第一個引數（0）定義新元素應該被新增（接入）的位置。
// 第二個引數（1）定義應該刪除多個元素。
// 其餘引數被省略。沒有新元素將被新增。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 刪除 fruits 中的第一個元素 "Banana"，返回 ["Banana"]

合併（連線）陣列

concat() 方法通過合併（連線）現有陣列來建立一個新陣列。concat() 方法不會更改現有陣列。它總是返回一個新陣列。concat() 方法可以使用任意數量的陣列引數。

1、合併兩個陣列

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 連線 myGirls 和 myBoys

2、合併三個陣列

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 將arr1、arr2 與 arr3 連線在一起

3、將陣列與值合併

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]); 

裁剪陣列

slice() 方法用陣列的某個片段切出新陣列。會建立新陣列。它不會從源陣列中刪除任何元素。

1、接收一個引數

從引數作為陣列索引開始選取元素，直到陣列結束為止。

// 從陣列元素索引3 （"Apple"）開始切出一段陣列
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);   // 返回 ["Apple", "Mango"]

2、接受兩個引數

從第一個引數作為陣列索引選取元素，直到結束引數（不包括）為止。

// 從陣列元素索引3 （"Apple"）開始切出一段陣列
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);  // 返回 ["Orange", "Lemon"]