如何在 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 陣列文檔。 幾乎每一種能夠從數組中推送/彈出元素的語言也將能夠取消移動/移動（有時稱為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);

Answer 2

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

Answer 3

在 ES6 中，使用擴展運算符... ：

演示

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

Answer 4

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

這是測試結果：

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

使用 ES6 解構（避免原始數組的突變）：

const newArr = [item, ...oldArr]

Answer 7

沒有變異

實際上，所有unshift / push和shift / pop都會改變源數組。

unshift / push從開始/結束向現有數組添加一個項目，而shift / pop從數組的開始/結束刪除一個項目。

但是很少有方法可以在沒有突變的情況下將項目添加到數組中。 結果是一個新數組，要添加到數組末尾，請使用以下代碼：

const originArray = ['one', 'two', 'three'];
const newItem = 4;

const newArray = originArray.concat(newItem); // ES5
const newArray2 = [...originArray, newItem]; // ES6+

要添加到原始數組的開頭，請使用以下代碼：

const originArray = ['one', 'two', 'three'];
const newItem = 0;

const newArray = (originArray.slice().reverse().concat(newItem)).reverse(); // ES5
const newArray2 = [newItem, ...originArray]; // ES6+

通過上述方式，您可以添加到數組的開頭/結尾而沒有突變。

Answer 8

你有一個數組： var arr = [23, 45, 12, 67];

要將項目添加到開頭，您需要使用splice ：

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

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 傳播...

 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

push()將新元素添加到數組的末尾。
pop()從數組末尾刪除元素。

unshift()將新元素添加到數組的開頭。
shift()從數組的開頭刪除一個元素。

使用theArray.unshift(response)

Answer 11

如果您需要在數組的開頭連續插入一個元素，使用push語句然后調用reverse會更快，而不是一直調用unshift 。

基准測試：http: //jsben.ch/kLIYf

Answer 12

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

Answer 13

使用splice我們在開始時將元素插入到數組中：

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

Answer 14

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

Answer 15

JavaScript 中的 Pop、Push、Shift 和 Unshift 數組方法 JavaScript 為我們提供了四種方法來在數組的開頭或結尾添加或刪除項目：

pop() : 從數組的末尾刪除一個項目

let cats = ['Bob', 'Willy', 'Mini'];

cats.pop(); // ['Bob', 'Willy']

pop() 返回刪除的項目。

push() : 將元素添加到數組的末尾

let cats = ['Bob'];

cats.push('Willy'); // ['Bob', 'Willy']

cats.push('Puff', 'George'); // ['Bob', 'Willy', 'Puff', 'George']
push() returns the new array length.

shift() ：從數組的開頭刪除一個項目

let cats = ['Bob', 'Willy', 'Mini'];

cats.shift(); // ['Willy', 'Mini']
shift() returns the removed item.

unshift() ：將項目添加到數組的開頭

let cats = ['Bob'];

cats.unshift('Willy'); // ['Willy', 'Bob']

cats.unshift('Puff', 'George'); // ['Puff', 'George', 'Willy', 'Bob']

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

有幾種方法可以實現這一點：

1. 使用移位（可變）

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

2. 使用 ES6 解構（不可變）

 const num = 1; const arr = [2, 3]; const newArr = [num, ...arr]; console.log(newArr);

3. 使用Array.prototype.concat （不可變）

 const num = 1; const arr = [2, 3]; const newArr = [num].concat(arr); console.log(newArr);

Answer 18

您可以先反轉數組，然后將 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 19

 let arr = [5, 6]; // using unshift arr.unshift(4); console.log('arr : ', arr); // using spread operator arr = [3, ...arr]; console.log('arr : ', arr); // using concat arr = [2].concat(arr); console.log('arr : ', arr); // using splice arr.splice(0, 0, 1) console.log('arr : ', arr);

Answer 20

性能：對於小型陣列，您可以隨意選擇，沒有顯着的性能差異。 但是對於幾十個項目， unshift() 比其他任何東西都要好得多。

在此處查看結果： https : //jsben.ch/GDA3P

Answer 21

使用unshift功能。 它將在數組的開頭推送元素

var list = [23, 45, 12, 67];

list.unshift(34);

// It will return [34, 23, 45, 12, 67];

Answer 22

“array.unshift()”是一種用於在數組開頭添加元素的方法。

該指南在下面的鏈接中。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

 let array = [23, 45, 12, 67]; array.unshift(12); console.log(array);

Answer 23

您可以反轉數組並推送數據，最后再次反轉它：

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