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

Question

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

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

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

Answer 1

使用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 Array documentation。实际上，每个能够从数组中推送/弹出元素的语言都具有非移位/移位（有时称为push_front / pop_front）元素的能力，您自己永远不必实现这些元素。

---

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

const array = [ 3, 2, 1 ]

const newFirstElement = 4

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

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 ]

Answer 2

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

Answer 3

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

<强>样本

＆＃13;

＆＃13;

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

console.log(arr)

＆＃13;

＆＃13;

＆＃13;

Answer 4

通过concat

执行此操作的另一种方法

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

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

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

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

这是测试结果

Answer 5

快速备忘单：

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

Answer 6

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 7

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

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

使用theArray.unshift(response)

Answer 8

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

Answer 9

备忘单，可将新元素添加到数组中

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 spread...

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

注意：在上述每个示例中，您都可以通过提供更多要插入的项目来添加多个项目。

Answer 10

没有突变

实际上，所有unshift / push和shift / pop 变异原始数组。

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

但是有一种方法可以不带突变地将项目添加到数组中。结果是一个新数组，要添加到数组末尾，请使用以下代码：

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

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

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

通过上述方法，您无需更改即可添加到数组的开头/结尾。

Answer 11

var array = [23, 45, 12, 67];  
array.unshift(11);  
alert(array);

Answer 12

如果您需要在数组的开头连续插入元素，则使用.column-1-3 { width: 29.666%; margin-right: 5.5%; float: left; } .column-last-child { margin-right: 0!important; } .section { width: 100%; margin: 40px 0; padding: 40px 0; position: relative; } .row { width: 80%; max-width: 1080px; min-width: 414px; margin: auto; } .post { width: 100%; height: auto; position: relative; background: #000; padding: 50px; } .video-post { background: #000; height: 300px; width: 100% }语句然后调用<div class="section"> <div class="row"> <div class="column-1-3"> <div class="video-post"></div> </div> <div class="column-1-3"> <div class="video-post"></div> </div> <div class="column-1-3 column-last-child"> <div class="video-post"></div> </div> </div> </div>会更快，而不是调用push所有时间。

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

Answer 13

使用ES6解构：（避免从原始阵列中进行突变）

const newArr = [item, ...oldArr]

Answer 14

您可以先反转数组，然后将 elem 添加到数组中，然后将其反转回来。

const arr = [2,3,4,5,6];
const arr2 = 1;
arr.reverse();
//[6,5,4,3,2]
arr.push(arr2);

console.log(arr.reverse()); // [1,2,3,4,5,6]

好锁

阿里·阿里扎德。

Answer 15

使用splice在开始时将元素插入数组：

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

Answer 16

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

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

Answer 17

您可以反转数组并推送数据，最后再次反转它：

var arr=[2,3,4,5,6];
var arr2=1;
arr.reverse();
//[6,5,4,3,2]
arr.push(arr2);

Answer 18

性能：对于小型阵列，您可以随意选择，没有显着的性能差异。 但是对于几十个项目来说，unshift() 比其他任何东西都要好得多。

在此处查看结果：https://jsben.ch/GDA3P