JS数组操作的正确姿势：让你的数组快速插入新元素

一、使用push()和unshift()方法插入元素

在JavaScript中，我们可以使用push()和unshift()方法来向数组末尾或开头插入元素。push()方法在数组末尾插入新元素，unshift()方法在数组开头插入新元素。

    const arr = [1, 2, 3];
    arr.push(4); // [1, 2, 3, 4]
    arr.unshift(0); // [0, 1, 2, 3, 4]

这两个方法非常方便且易于理解。然而，当需要插入多个元素时，它们的效率可能不如其他方法高。

二、使用splice()方法插入元素

splice()方法可以像push()和unshift()方法一样向数组中插入元素。不过，与push()和unshift()方法不同的是，splice()方法不仅可以插入元素，还可以删除元素，甚至可以一次插入多个元素。

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

splice()方法有三个参数：第一个参数是指定插入或删除的元素的起始位置；第二个参数是指定要删除的元素个数，如果不删除元素，可以传入0；第三个及之后的参数是要插入的新元素。

需要注意的是，splice()方法会改变原数组，如果只是想在原数组基础上插入元素，可以先复制原数组，进行操作后再重新赋值。

    const arr = [1, 2, 3];
    const newArr = [...arr];
    newArr.splice(1, 0, 4);

三、使用concat()方法插入元素

concat()方法可以将多个数组连接在一起，并返回一个新数组。如果需要在数组中插入新元素，可以将需要插入的元素封装成一个数组，然后将这个数组与原数组连接在一起。

    const arr = [1, 2, 3];
    const newArr = arr.concat([4]); // [1, 2, 3, 4]

同样地，如果需要一次插入多个元素，可以将多个元素封装进数组中后再使用concat()方法连接。

    const arr = [1, 2, 3];
    const newArr = arr.concat([4, 5], [6]); // [1, 2, 3, 4, 5, 6]

四、使用扩展运算符

扩展运算符可以将数组或其他可迭代对象展开，生成一个新数组，可以使用扩展运算符向数组中插入新元素。

    const arr = [1, 2, 3];
    const newArr = [...arr, 4]; // [1, 2, 3, 4]
    const anotherArr = [...arr.slice(0, 1), 4, ...arr.slice(1)]; // [1, 4, 2, 3]

需要注意的是，扩展运算符只能用于生成新数组，如果需要在原数组基础上插入元素，同样需要先复制原数组，进行操作后再重新赋值。

五、比较不同方法的效率

为了比较每种方法的效率，我们可以使用浏览器的性能分析工具。下面是插入元素所需的时间对比：

    // 测试数据
    const arr = Array(1000000).fill(0);
    let start, end;

    // 使用push()方法插入元素
    start = performance.now();
    arr.push(1);
    end = performance.now();
    console.log('push(): ', end - start); // 大约需要1-2ms

    // 使用unshift()方法插入元素
    start = performance.now();
    arr.unshift(1);
    end = performance.now();
    console.log('unshift(): ', end - start); // 大约需要250-350ms

    // 使用splice()方法插入元素
    start = performance.now();
    arr.splice(1, 0, 1);
    end = performance.now();
    console.log('splice(): ', end - start); // 大约需要5-10ms

    // 使用concat()方法插入元素
    start = performance.now();
    arr.concat([1]);
    end = performance.now();
    console.log('concat(): ', end - start); // 大约需要10-15ms

    // 使用扩展运算符插入元素
    start = performance.now();
    [...arr, 1];
    end = performance.now();
    console.log('spread operator: ', end - start); // 大约需要10-15ms

从测试结果可以看出，push()方法插入元素的时间最短，unshift()方法的时间最长，其他方法的时间处于中间状态。

综上所述，虽然push()和unshift()方法非常方便，但是当需要插入多个元素时，使用splice()方法、concat()方法或扩展运算符可能更为高效。