JavaScript數組添加數據詳解

一、push()方法

JavaScript中，數組添加數據最基本的方法就是使用push()函數，它可以將新元素添加至數組的末尾，而不影響原來的數組元素。

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // Output: [1, 2, 3, 4]

除了添加單個元素，push()也可以同時添加多個元素：

let arr = [1, 2, 3];
arr.push(4, 5);
console.log(arr); // Output: [1, 2, 3, 4, 5]

此外，如果要往數組開頭添加數據，可以採用unshift()方法：

let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // Output: [0, 1, 2, 3]

二、splice()方法

splice()方法可以在指定位置插入（或刪除）元素，並返回被刪除的元素數組：

let arr = ['a', 'b', 'c'];
arr.splice(1, 0, 'd');
console.log(arr); // Output: ['a', 'd', 'b', 'c']

上例中，splice(1, 0, ‘d’)實現了在第二個位置插入’d’元素。若刪除一個元素，第二個參數改為1即可：

let arr = ['a', 'b', 'c'];
arr.splice(1, 1);
console.log(arr); // Output: ['a', 'c']

除了刪除、添加單個元素，splice()也可以添加多個元素：

let arr = [1, 2, 3];
arr.splice(1, 1, 4, 5);
console.log(arr); // Output: [1, 4, 5, 3]

上例將第二個元素刪除並同時添加了4和5兩個元素。

三、concat()方法

concat()方法用來合併數組，不會影響原有數組：

let arr1 = [1, 2, 3];
let arr2 = [4, 5];
let arr3 = arr1.concat(arr2);
console.log(arr3); // Output: [1, 2, 3, 4, 5]

concat()方法也可以用來添加單個元素：

let arr = [1, 2, 3];
arr = arr.concat(4);
console.log(arr); // Output: [1, 2, 3, 4]

四、擴展運算符

ES6中的擴展運算符（spread operator）可以用來將一個數組「展開」成為多個參數，方便將其添加到新數組中：

let arr1 = [1, 2, 3];
let arr2 = [4, 5];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // Output: [1, 2, 3, 4, 5]

如果要在擴展運算符後添加新元素，可以使用push()方法即可：

let arr1 = [1, 2, 3];
let arr2 = [4, 5];
let arr3 = [...arr1, ...arr2];
arr3.push(6);
console.log(arr3); // Output: [1, 2, 3, 4, 5, 6]

五、Array.from()方法

Array.from()方法將類似數組的對象轉化為真正的數組。

let arrLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
let arr = Array.from(arrLike);
console.log(arr); // Output: ['a', 'b', 'c']

與此同時，Array.from()也可以用來添加新元素。如要在之前的數組基礎上添加新元素，可以通過提供一個map函數來實現：

let arr = [1, 2, 3];
let newArr = Array.from(arr, val => val * 2);
console.log(newArr); // Output: [2, 4, 6]

上例中的參數val代表原先數組的元素，箭頭函數定義了對每個元素進行的操作（將其乘以2）。

六、結尾

以上是JavaScript中數組添加數據的幾種方法。無論是push()、splice()、concat()、擴展運算符還是Array.from()方法，都有其特定的使用場景，開發者可以根據實際需求進行選擇。