在 JavaScript 中將元素追加到陣列中

1. 在 JavaScript 中使用陣列的 .length 屬性追加陣列中的元素
2. 在 JavaScript 中使用 push() 方法來新增陣列中的元素
3. 使用 unshift() 方法將元素新增到陣列中
4. 使用 splice() 方法在陣列中追加元素
5. 使用 concat() 方法將元素新增到陣列中
6. 使用 spread 語法在陣列中追加元素

在本文中，我們將學習如何在 JavaScript 中將元素追加到陣列中。

有幾種方法可以將元素追加到 JavaScript 中的陣列。我們可以附加一個元素，多個元素，甚至可以將整個陣列附加到給定的陣列。我們可以使用一種方法，具體取決於我們是否要進行變異，速度和效率要求，程式碼的可讀性。

在 JavaScript 中使用陣列的 .length 屬性追加陣列中的元素

在經典方法中，我們使用陣列的總長度獲取陣列的最後一個空索引，並在該索引處插入一個元素。該方法最容易使用，並且效率極高。它僅允許我們一次附加一個元素。這是一種變異方法，因為它會更改原始陣列。

let arr = [0,1,2];
arr[arr.length]=3;
console.log(arr);

輸出：

[0, 1, 2, 3]

在上面的程式碼中，我們使用 arr.length 獲得陣列的最後一個索引為 3，然後在這些索引處新增元素。

在 JavaScript 中使用 push() 方法來新增陣列中的元素

push() 方法用於將元素新增到陣列的末尾。我們可以新增一個元素，多個元素甚至一個陣列。它是最簡單也是最快的選項之一，在某些情況下甚至可以在大型陣列中使用 Array.length 擊敗上述方法。.push() 執行的動作可以通過 .pop() 方法反轉。當多個元素一起傳遞時，它們的順序由 push() 運算子保留。此方法還會更改陣列，因此是可變的。

const arr =[1,2,3];
const arr2 = [8,9,10];
arr.push(4);// single item 
arr.push(5,6,7);// multiple items
arr.push(...arr2);// spread operator
console.log(arr);

輸出：

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

在上面的程式碼中，我們演示了所有的 3 種情況：使用擴充套件語法新增單個元素，多個元素甚至整個陣列。所有元素都附加在陣列的末尾。

使用 unshift() 方法將元素新增到陣列中

unshift() 方法可幫助我們在陣列的開頭新增一個元素。它返回陣列的新長度。可以呼叫它或將其應用於屬性類似於陣列的物件。當多個元素一起傳遞時，它們的順序由 unshift() 運算子保留。此方法還會更改陣列，因此是可變的。

const arr = [1,2,3];
const arr2 = [8,9,10];
arr.unshift(4); // single item
arr.unshift(5,6,7); // multiple items
arr.unshift(...arr2) // spread operator
console.log(arr);

輸出：

[8, 9, 10, 5, 6, 7, 4, 1, 2, 3]

在上面的程式碼中，我們演示了所有 3 種情況：使用擴充套件語法新增單個元素，多個元素甚至整個陣列。注意此操作與 push() 有何不同，所有元素都附加到陣列的開頭。

使用 splice() 方法在陣列中追加元素

splice() 方法可以通過新增/刪除元素來修改陣列的內容。它採用以下 3 引數：

1. index：一個整數值，指定要新增/刪除元素的位置。我們甚至可以使用負索引從陣列的後面指定一個索引。
2. howmany：這是一個可選引數。它指定要從陣列中刪除多少個專案。如果將其設定為 0，則不會刪除任何專案。
3. item1, item2, ... ,itemx：要新增到陣列中的專案。

此方法還會更改陣列，因此是可變的。

const arr = [1,2,3,4,5];
arr.splice(4,3,7,8,9);
console.log(arr);

輸出：

[1, 2, 3, 4, 7, 8, 9]

在上面的程式碼中，我們選擇了索引 4，並在該索引處新增了 3 元素 7,8,9。

使用 concat() 方法將元素新增到陣列中

concat() 方法將陣列作為輸入並將它們連線在一起，即，它採用一個陣列並將其餘陣列附加到其末尾。但是此運算子不會修改原始陣列，而是返回一個包含合併結果的全新陣列。它可以採用兩個或多個陣列並將它們連線在一起。由於此方法不會修改給定的陣列，因此它是非可變的。

const arr = [1,2,3];
const arr2 = [8,9,10];
const arr3 = arr.concat(arr2);
console.log(arr3);

輸出：

[1, 2, 3, 8, 9, 10]

在上面的程式碼中，我們採用兩個陣列 arr 和 arr2，並呼叫 concat() 函式將它們連線起來以形成新陣列-arr3。

使用 spread 語法在陣列中追加元素

我們可以使用傳播語法將完整的陣列追加到給定的陣列中。這是一種非變異方法，因為我們只是將陣列元素散佈到一個新陣列中。它與 concat() 操作非常相似。它可以幫助我們建立副本或合併兩個分開的陣列。仔細使用傳播語法很重要。如果我們使用語法 const arr = [arr1, arr2]; 我們得到一個包含兩個子陣列的巢狀陣列，而如果使用 const arr=[...arr1 , ...arr2]; 我們將兩個陣列的元素連線在一起。

const arr = [1,2,3];
const arr2 = [8,9,10];
const arr3 = [...arr, ...arr2];

輸出：

[1, 2, 3, 8, 9, 10]

在上面的程式碼中，我們使用傳播操作符將兩個陣列 arr 和 arr2 附加到一個新陣列 arr3 中。

除 spread 語法外，所有主要瀏覽器均支援上述所有方法。Internet Explorer 不支援 spread 語法。