在JavaScript中向数组追加元素

在JavaScript中，向数组追加一个或多个值是一个非常常见的任务。虽然实现起来并不难，但有几种可用的方法，每种方法都有其优缺点。选择正确的方法最终取决于使用场景。

Array.prototype.push()

向数组末尾追加元素的经典方法是使用Array.prototype.push()。虽然功能多样，但需要记住它会改变原始数组。另一方面，它支持一次添加多个元素。最后，Array.prototype.push()的返回值是数组的新长度。

const arr = ['a', 'b', 'c'];
arr.push('d', 'e'); // 返回 5（追加2个元素后的新长度）
// arr = ['a', 'b', 'c', 'd', 'e']

Array.prototype.unshift()

与Array.prototype.push()类似，Array.prototype.unshift()将元素追加到数组的开头。此外，这个方法也会改变原始数组，并支持一次添加多个元素。

const arr = ['a', 'b', 'c'];
arr.unshift('d', 'e'); // 返回 5（追加2个元素后的新长度）
// arr = ['d', 'e', 'a', 'b', 'c']

Array.prototype.splice()

Array.prototype.splice()更常用于从数组中删除元素，但它也可以用于追加元素。虽然它也会改变原始数组，但它可以在数组的任意位置追加元素。与前面的方法类似，它支持一次添加多个元素。在这种用法下，这个方法的返回值实际上没有意义。

const arr = ['a', 'b', 'c'];
arr.splice(1, 0, 'd', 'e');
// arr = ['a', 'd', 'e', 'b', 'c']

Array.prototype.length

将元素添加到数组末尾意味着为索引等于其长度的位置设置一个值。这是因为JavaScript中的数组是从零开始索引的。幸运的是，Array.prototype.length可以与数组索引表示法结合使用来实现这一点。与前面的方法一样，这种方法会改变原始数组。此外，它只能一次添加一个元素，并且只能添加到数组的末尾。

const arr = ['a', 'b', 'c'];
arr[arr.length] = 'd';
// arr = ['a', 'b', 'c', 'd']

Array.prototype.concat()

第一个不会改变原始数组的选项是Array.prototype.concat()。该方法返回一个新数组，其中包含原始数组的元素和新元素的连接。它可以用于将元素添加到数组的任一端，同时还支持一次添加多个元素。

const arr = ['a', 'b', 'c'];
const arr2 = arr.concat('d', 'e');
// arr = ['a', 'b', 'c'], arr2 = ['a', 'b', 'c', 'd', 'e']
const arr3 = ['d', 'e'].concat(...arr);
// arr = ['a', 'b', 'c'], arr3 = ['d', 'e', 'a', 'b', 'c']

Spread运算符

最后，最后一个不会改变原始数组的选项是扩展运算符（...）。它的工作方式与Array.prototype.concat()基本相同，支持将一个或多个元素添加到数组的任一端。

const arr = ['a', 'b', 'c'];
const arr2 = [...arr, 'd', 'e'];
// arr = ['a', 'b', 'c'], arr2 = ['a', 'b', 'c', 'd', 'e']
const arr3 = ['d', 'e', ...arr];
// arr = ['a', 'b', 'c'], arr3 = ['d', 'e', 'a', 'b', 'c']