6 种方式给 JavaScript 数组添加元素

JavaScript 的数组是一个非常灵活的数据结构，也有着丰富的 API 来对数组进行操作，对于添加元素到数组中的方式就有 6 种。在介绍它们之前，你先想一下，你知道的有多少种呢？

我知道：
A.	小于等于 3 种
B.	大于 3 种

好，不管你知道有多少种，接下来我们分别看一下添加元素到数组中的这 6 种方式。

Array.push()

第一种是使用 array.push() 方法，可以追加新的元素到原数组的末尾，push() 接收一个可变参数，可以一次性追加多个元素。这个方法会直接修改原数组：

let arr = [1, 2, 3, 4];
arr.push(5);
arr; // [1, 2, 3, 4, 5]
arr.push(6, 7);
arr; // [1, 2, 3, 4, 5, 6, 7]

Array.unshift()

第二种是使用 array.unshift()，与 push() 的操作类似，只是把元素追加到数组的开始，它也会直接修改原数组：

let arr = [1, 2, 3, 4];
arr.unshift(5);
arr; // [5, 1, 2, 3, 4]
arr.unshift(6, 7);
arr; // [6, 7, 5, 1, 2, 3, 4]

Array.splice()

第三种是使用 array.splice()，splice() 方法既可以删除数组元素，也可以添加元素到数组中，splice() 第 1 个参数接收要添加或删除元素的索引位置，第 2 个参数指定要删除的元素个数，如果指定为 0，那么就是添加元素，第 3 个参数是变长参数，可以指定多个要添加的元素：

let arr = [1, 2, 3, 4];
arr.splice(4, 0, 5);
arr; // [1, 2, 3, 4, 5]
arr.splice(4, 0, 6, 7);
arr; // [1, 2, 3, 4, 6, 7, 5]

Array.length

第四种是使用数组的 length 属性，因为 length 表示数组最后一个索引加 1 的位置，直接给这个位置赋值，数组长度会自动加 1，并把新添加的值作为最后一个元素添加到数组中：

let arr = [1, 2, 3, 4];
arr[arr.length] = 5;
arr;

Array.concat()

第五种是使用 array.concat()，与 push() 类似，只是 array.concat() 既可以接收多个单个的值，也可以接收多个数组，或者是混合形式，它会把数组中的值拿出来，并追加到调用 concat() 的数组中，这个方法会返回一个新数组，不会修改原数组：

[1, 2, 3, 4].concat(5, 6, 7);
[1, 2, 3, 4].concat(5, [6, 7], [8]);

展开运算符

第六种是使用展开运算符，展开运算符与 concat() 的操作类似，使用它可以把展开的数组元素以及新添加的元素放到同一个数组中，同时也不会修改原数组，而是返回新数组：

[...[1, 2, 3, 4], 5]; // [1, 2, 3, 4, 5]
[...[1, 2, 3, 4], ...[5, 6]]; // [1, 2, 3, 4, 5, 6]

小结

好了，这个就是 6 种添加新元素到数组中的方法，你学会了吗？如果有帮助请三连，想学更多有用的前端开发知识，请关注峰华前端工程师，感谢观看！ ​