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


How can I add new array elements at the beginning of an array in Javascript?

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

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

1
[23, 45, 12, 67]

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

1
[34, 23, 45, 12, 67]

目前我正计划这样做：

1
2
3
4
5
6
7
8
9
var newArray = [];
newArray.push(response);

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

theArray = newArray;
delete newArray;

有没有更好的办法？javascript是否有任何内置的功能可以做到这一点？

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

相关讨论

使用unshift。它类似于push，只是它在数组的开头而不是结尾添加元素。

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

一个简单的图表…

1
2
   unshift -> array <- push
   shift   <- array -> pop

图表：

1
2
3
4
5
          add  remove  start  end
   push    X                   X
    pop           X            X
unshift    X             X
  shift           X      X

查看MDN阵列文档。实际上，每一种能够从数组中推/弹出元素的语言都具有取消推/移位(有时称为push_front/pop_front元素)的能力，您不必自己实现这些元素。

相关讨论

array operations image

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

相关讨论

使用ES6时，使用排列运算符...：

演示

1
2
3
4
var arr = [23, 45, 12, 67];
arr = [34, ...arr]; // RESULT : [34,23, 45, 12, 67]

console.log(arr)

相关讨论

另一种方法是通过concat

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

concat和unshift的区别在于concat返回一个新数组。他们之间的表现可以在这里找到。

1
2
3
4
5
6
7
8
function fn_unshift() {
  arr.unshift(0);
  return arr;
}

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

这是测试结果

enter image description here

相关讨论

快速作弊表：

术语shift/unshift和push/pop可能有点混淆，至少对于那些不熟悉C语言编程的人来说。

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

1
2
3
4
5
* 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：

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

相关讨论

push()在数组的末尾添加了一个新元素。pop()从数组的末尾删除一个元素。

unshift()在数组的开头添加了一个新元素。shift()从数组的开头删除一个元素。

使用theArray.unshift(response)。

1
2
3
4
var testdata = new Array();
testdata = [23, 45, 12, 67];
testdata = [34, ...testdata];
console.log(testdata)
1
 

相关讨论

不变异

实际上，所有的unshift／push／shift／pop都会使源阵列发生突变。

unshift和shift和pop从数组的开始/结束向已有的数组添加一个项，从数组的开始/结束删除一个项。

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

1
2
3
const originArray = ['one', 'two', 'three'];
const newItem = 4;
const newArray = originArray.concat(newItem);

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

1
2
3
const originArray = ['one', 'two', 'three'];
const newItem = 0;
const newArray = (originArray.reverse().concat(newItem)).reverse();

通过上面的方法，您可以添加到数组的开始/结束部分，而不需要进行突变。

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

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

1
2
3
var array = [23, 45, 12, 67];  
array.unshift(11);  
alert(array);
相关讨论

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

1
arrName.splice( 0, 0, 'newName1' );