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()方法，都有其特定的使用场景，开发者可以根据实际需求进行选择。