如何在JavaScript中的数组开头添加新的数组元素？

我需要在数组的开头添加或添加元素。

例如，如果我的数组如下所示：

[23, 45, 12, 67]

我的AJAX调用的响应是34，我希望更新后的数组如下所示：

[34, 23, 45, 12, 67]

目前我计划这样做：

var newArray = [];newArray.push(response);
for (var i = 0; i < theArray.length; i++) {newArray.push(theArray[i]);}
theArray = newArray;delete newArray;

有更好的方法吗？JavaScript是否有任何内置功能可以做到这一点？

我的方法的复杂性是O(n)，看到更好的实现会非常有趣。

1292330 次浏览
小开
最佳答案

使用#0。它类似于#1，除了它将元素添加到数组的开头而不是结尾。

  • unshift/push-将元素添加到数组的开头/结尾
  • shift/pop-删除并返回数组的第一个/最后一个元素

一个简单的图表…

   unshift -> [array] <- pushshift   <- [array] -> pop

和图表：

          add  remove  start  endpush    X                   Xpop           X            Xunshift    X             Xshift           X      X

几乎每种能够从数组中推送/弹出元素的语言也能够取消移位/移位（有时称为push_front/pop_front）元素，你不应该自己实现这些。

正如评论中指出的，如果你想避免改变原始数组，你可以使用#0，它将两个或多个数组连接在一起。你可以使用它在功能上将单个元素推送到现有数组的前面或后面；为此，你需要将新元素转换为单个元素数组：

const array = [3, 2, 1]
const newFirstElement = 4
const newArray = [newFirstElement].concat(array) // [ 4, 3, 2, 1 ]
console.log(newArray);

concat还可以附加项目。concat的参数可以是任何类型；如果它们还不是数组，它们会隐式包装在单元素数组中：

const array = [3, 2, 1]
const newLastElement = 0
// Both of these lines are equivalent:const newArray1 = array.concat(newLastElement) // [ 3, 2, 1, 0 ]const newArray2 = array.concat([newLastElement]) // [ 3, 2, 1, 0 ]
console.log(newArray1);console.log(newArray2);

小开

数组操作图像

var a = [23, 45, 12, 67];a.unshift(34);console.log(a); // [34, 23, 45, 12, 67]

小开

快速备忘单：

术语Shift/UnShift和Push/pop可能有点令人困惑，至少对于那些可能不熟悉C编程的人来说是这样。

如果你不熟悉术语，这里有一个替代术语的快速翻译，可能更容易记住：

* array_unshift()  -  (aka Prepend ;; InsertBefore ;; InsertAtBegin )* array_shift()    -  (aka UnPrepend ;; RemoveBefore  ;; RemoveFromBegin )
* array_push()     -  (aka Append ;; InsertAfter   ;; InsertAtEnd )* array_pop()      -  (aka UnAppend ;; RemoveAfter   ;; RemoveFromEnd )
小开

你有一个数组：var arr = [23, 45, 12, 67];

要将项目添加到开头，您需要使用splice：

var arr = [23, 45, 12, 67];arr.splice(0, 0, 34)console.log(arr);

小开

另一种方法是通过concat：

var arr = [1, 2, 3, 4, 5, 6, 7];console.log([0].concat(arr));

concat和unshift的区别在于concat返回一个新数组。它们之间的性能可以在这里中找到。

function fn_unshift() {arr.unshift(0);return arr;}
function fn_concat_init() {return [0].concat(arr)}

以下是测试结果：

在此处输入图片描述

小开

对于ES6，使用扩展运算符...：

Demo

var arr = [23, 45, 12, 67];arr = [34, ...arr]; // RESULT : [34,23, 45, 12, 67]
console.log(arr)

小开

如果您需要在数组的开头连续插入元素，使用push语句后跟调用reverse会更快，而不是一直调用unshift。

基准测试：http://jsben.ch/kLIYf

小开

使用splice，我们在开始时将一个元素插入数组：

arrName.splice( 0, 0, 'newName1' );
小开

没有突变

实际上，所有unshift/push和shift/pop突变都是源数组。

unshift/push从开始/结束向已存在的数组添加一个项目，shift/pop从数组的开始/结束中删除一个项目。

但是有几种方法可以在没有突变的情况下将项目添加到数组中。结果是一个新数组，要添加到数组末尾，请使用下面的代码：

const originArray = ['one', 'two', 'three'];const newItem = 4;
const newArray = originArray.concat(newItem); // ES5const newArray2 = [...originArray, newItem]; // ES6+

要添加到原始数组的开头，请使用以下代码：

const originArray = ['one', 'two', 'three'];const newItem = 0;
const newArray = (originArray.slice().reverse().concat(newItem)).reverse(); // ES5const newArray2 = [newItem, ...originArray]; // ES6+

使用上述方法，您可以在没有突变的情况下添加到数组的开头/结尾。

小开

使用ES6解构（避免原始数组的突变）：

const newArr = [item, ...oldArr]

小开

如果您想推送数组开头数组中的元素，请使用<func>.apply(<this>, <Array of args>)：

const arr = [1, 2];arr.unshift.apply(arr, [3, 4]);console.log(arr); // [3, 4, 1, 2]

小开

在数组中添加新元素的备忘单

1.Array#unshift

const list = [23, 45, 12, 67];
list.unshift(34);
console.log(list); // [34, 23, 45, 12, 67];

2.Array#splice

const list = [23, 45, 12, 67];
list.splice(0, 0, 34);
console.log(list); // [34, 23, 45, 12, 67];

3.ES6扩展…

const list = [23, 45, 12, 67];const newList = [34, ...list];
console.log(newList); // [34, 23, 45, 12, 67];

4.Array#concat

const list = [23, 45, 12, 67];const newList = [32].concat(list);
console.log(newList); // [34, 23, 45, 12, 67];

备注：在这些示例中，您可以通过提供更多要插入的项目来添加多个项目。


提交答案