题 如何在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) 看到更好的实现会很有趣。


1137
2017-11-10 00:35


起源


不印字
仅供参考:如果您需要在数组的开头连续插入元素,则使用起来会更快 push 语句后跟一个电话 reverse而不是打电话 unshift 每时每刻。 - Jenny O'Reilly
@ JennyO'Reilly你应该发布这个作为答案。完美匹配我的用例。谢谢 - rob
@rob感谢您的评论。我将其添加为包括基准测试的答案。 - Jenny O'Reilly


答案:


使用 unshift。就像是 push,除了它将元素添加到数组的开头而不是结尾。

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

一个简单的图表......

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

和图表:

          add  remove  start  end
   push    X                   X
    pop           X            X
unshift    X             X
  shift           X      X

看看 MDN阵列文档。实际上,每个能够从数组中推送/弹出元素的语言也都具有非移位/移位的能力(有时称为 push_front/pop_front)元素,你永远不必自己实现这些。


2129
2017-11-10 00:37



运用 concat 可能更好,因为它返回新数组。对链接非常有用。 [thingToInsertToFront].concat(originalArray).reduce(fn).reverse().map(fn) 等...如果你使用 unshift,你不能做那个链,因为所有你回来的是长度。 - St. John Peaster
shift / unshift,push / pop,splice。这种方法非常合乎逻辑。 - linuxunil


array operations image

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


1163
2017-11-10 00:40



人们需要4个日常使用功能的视觉指南的原因是因为加密的函数名称...为什么不移位不称为插入?应该删除Shift。等等... - Pascal
//为什么unshift不会被称为Insert?// 它来自C编程语言的约定,其中数组元素被视为堆栈。 (看到 perlmonks.org/?node_id=613129 如需完整说明) - dreftymac
@Pascal不,插入和删除会是特别糟糕的名字;它们意味着随机访问,而不是从数组的前面添加/删除 - meagar♦
我本以为unshift应该删除第一个键,而shift会插入第一个键,但这只是我的一般思想 - Shannon Hochkins
我喜欢DNA参考 - DNACode


使用ES6,使用扩展运算符 ... :

DEMO

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

console.log(arr)


125
2017-09-16 12:26



还创建了一个新的数组,对纯函数很有用 - devonJS
这里的表现含义是什么?它比使用unshift()慢吗? - Pedi T.
当然,它会更慢,因为它是一个不可变的数组(创建一个新的数组)。如果您正在使用大型阵列或性能是您的第一要求,请考虑使用 concat 代替。 - Abdennour TOUMI
性能在2018年并不重要,浏览器和节点中的新版本获得了相同的性能 - stackdave


另一种方法是通过 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)
}

这是测试结果

enter image description here


48
2018-02-19 10:56



除了添加引用之外,将两者的性能比较附加到你的答案是好的。 - Ivan De Paz Centeno
我刚得到 当我们正在努力发布v2时,jsPerf暂时不可用。请稍后再试 从链接。包含结果而不是链接到结果的另一个好理由。 - Tigger
jsPref 结果: unshift:25,510±3.18%慢99% concat:2,436,894±3.39%最快 - Illuminator
在最新的Safari中,fn_unshift()运行得更快。 - passatgt
在最新的Safari(第10版)中,fn_unshift()再次变慢。 - rmcsharry


快速备忘单: 

术语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 ) 

38
2018-04-15 17:28





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

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

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


13
2018-04-20 19:19



arr.splice(0,arr.length,34); - Lior Elrom
@LiorElrom你的代码片段做了什么? - Janus Troelsen
是!拼接比不变速快。 jsperf.com/array-unshift-vs-splice - poushy
@poushy它的浏览器特定,在Firefox 54中 unshift 快50%(但更可读) - icl7126


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


2
2018-05-29 06:14





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

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

使用 theArray.unshift(response)


1
2018-05-30 08:57





如果需要在数组的开头连续插入元素,则使用起来会更快 push 语句后跟一个电话 reverse而不是打电话 unshift 每时每刻。

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


1
2018-06-07 13:12





运用 推,拼接, 和 索引号 我们首先在元素中插入一个元素

arrName.push('newName1');
arrName.splice(0, 0,'newName1');
arrName[0] = 'newName1';

0
2018-06-28 19:54