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

IT技术 javascript arrays
2021-02-08 12:40:53

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

例如,如果我的数组如下所示:

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

6个回答

使用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)元素,您永远不必自己实现这些。


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

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);

使用concat可能更可取,因为它返回新数组。对于链接非常有用。 [thingToInsertToFront].concat(originalArray).reduce(fn).reverse().map(fn)等等...如果你使用unshift,你不能做那个链接,因为你得到的只是长度。
2021-03-21 12:40:53
移位/取消移位、推/弹出、拼接。此类方法的非常合乎逻辑的名称。
2021-03-25 12:40:53

数组操作图像

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

人们之所以需要 4 个日常使用的函数的视觉指南,是因为加密的函数名称......为什么 unshift 不称为 Insert?Shift 应该是 Remove。等等...
2021-03-14 12:40:53
我原以为 unshift 应该删除第一个键,而 shift 会插入第一个键,但这只是我的一般想法
2021-03-21 12:40:53
@Pascal 不,插入和删除将是特别糟糕的名称;它们意味着随机访问,而不是从数组的前面添加/删除
2021-03-26 12:40:53
//为什么unshift不叫Insert?//它来自C编程语言的约定,其中数组元素被视为堆栈。有关完整说明,请参阅perlmonks.org/?node_id=613129
2021-04-04 12:40:53
记住这[23, 45, 12, 67].unshift(34)行不通。Array必须首先保存在变量中,因为unshift 它本身会返回一个值。
2021-04-05 12:40:53

在 ES6 中,使用扩展运算符...

演示

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

console.log(arr)

这里的性能含义是什么?它比使用 unshift() 慢吗?
2021-03-11 12:40:53
@AbdennourTOUMI 只是为了澄清您的评论。它不是创建一个不可变的数组,它只是创建一个新数组而不改变现有数组。
2021-03-15 12:40:53
当然,它会更慢,因为它是一个不可变数组(创建一个新数组)。如果您正在使用大型阵列或性能是您的首要要求,请考虑concat改用。
2021-03-17 12:40:53
2018年性能不重要,浏览器和节点的新版本获得相同的性能
2021-03-17 12:40:53
还创建了一个新数组,对纯函数有用
2021-04-01 12:40:53

另一种方法是通过concat

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

之间的差concatunshiftconcat返回一个新的数组。他们之间的表现可以在这里找到

function fn_unshift() {
  arr.unshift(0);
  return arr;
}

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

这是测试结果:

在此处输入图片说明

在最新的 Safari 中,fn_unshift() 运行得更快。
2021-03-13 12:40:53
除了添加参考之外,最好将两者的性能比较附加到您的答案中。
2021-03-20 12:40:53
在最新的 Safari (v 10) 中, fn_unshift() 再次变慢。
2021-04-01 12:40:53
我刚刚得知jsPerf 在我们正在发布 v2 时暂时不可用。请稍后从链接重试包含结果而不是链接到结果的另一个很好的理由。
2021-04-05 12:40:53
jsPref结果: unshift: 25,510 ±3.18% 慢 99% concat: 2,436,894 ±3.39% 最快
2021-04-09 12:40:53

快速备忘单:

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