Làm cách nào để thêm các phần tử mảng mới vào đầu một mảng trong Javascript?

Tôi có nhu cầu thêm hoặc thêm các phần tử vào đầu một mảng.

Ví dụ: nếu mảng của tôi trông như dưới đây:

[23, 45, 12, 67]

Và phản hồi từ cuộc gọi AJAX của tôi là 34, tôi muốn mảng được cập nhật như sau:

[34, 23, 45, 12, 67]

Hiện tại tôi đang lên kế hoạch để làm điều đó như thế này:

var newArray = [];
newArray.push(response);

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

theArray = newArray;
delete newArray;

Có cách nào tốt hơn để làm điều này? Javascript có chức năng tích hợp nào thực hiện việc này không?

Sự phức tạp của phương pháp của tôi là O(n)và sẽ rất thú vị khi thấy các triển khai tốt hơn.

Sử dụng unshift. Nó giống như push, ngoại trừ nó thêm các phần tử vào đầu mảng thay vì kết thúc.

• unshift/ push- thêm một phần tử vào đầu / cuối của một mảng
• shift/ pop - loại bỏ và trả về phần tử đầu tiên / cuối cùng của một mảng

Một sơ đồ đơn giản ...

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

và biểu đồ:

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

Kiểm tra tài liệu MDN Array . Hầu như mọi ngôn ngữ có khả năng đẩy / bật các phần tử từ một mảng cũng sẽ có khả năng dịch chuyển / dịch chuyển (đôi khi được gọi là push_front/ pop_front), bạn không bao giờ phải tự thực hiện các phần tử này.

Như đã chỉ ra trong các bình luận, nếu bạn muốn tránh làm thay đổi mảng ban đầu của mình, bạn có thể sử dụng concat, nối hai hoặc nhiều mảng lại với nhau. Bạn có thể sử dụng điều này để đẩy một phần tử lên mặt trước hoặc mặt sau của một mảng hiện có; để làm như vậy, bạn cần biến phần tử mới thành một mảng phần tử duy nhất:

const array = [ 3, 2, 1 ]

const newFirstElement = 4

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

concatcũng có thể nối các mục. Các đối số concatcó thể thuộc bất kỳ loại nào; chúng được bao bọc hoàn toàn trong một mảng phần tử đơn, nếu chúng chưa phải là một mảng:

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 ]

Với ES6, sử dụng toán tử trải rộng ...:

BẢN GIỚI THIỆU

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

console.log(arr)

Một cách khác để làm điều đó thông qua concat

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

Sự khác biệt giữa concatvà unshiftlà concattrả về một mảng mới. Hiệu suất giữa chúng có thể được tìm thấy ở đây .

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

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

Đây là kết quả kiểm tra

Áo choàng nhanh:

Các thuật ngữ shift / unshift và push / pop có thể hơi khó hiểu, ít nhất là với những người không quen thuộc với lập trình trong C.

Nếu bạn không quen thuộc với biệt ngữ, đây là bản dịch nhanh các thuật ngữ thay thế, có thể dễ nhớ hơn:

* array_unshift()  -  (aka Prepend ;; InsertBefore ;; InsertAtBegin )     
* array_shift()    -  (aka UnPrepend ;; RemoveBefore  ;; RemoveFromBegin )

* array_push()     -  (aka Append ;; InsertAfter   ;; InsertAtEnd )     
* array_pop()      -  (aka UnAppend ;; RemoveAfter   ;; RemoveFromEnd ) 

bạn có một mảng: var arr = [23, 45, 12, 67];

Để thêm một mục vào đầu, bạn muốn sử dụng splice:

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

Không có đột biến

Trên thực tế, tất cả unshift/ pushvà shift/ pop đột biến mảng gốc.

Các unshift/ pushthêm một mục vào mảng tồn tại từ bắt đầu / kết thúc và shift/ popxóa một mục từ đầu / kết thúc của một mảng.

Nhưng có một vài cách để thêm các mục vào một mảng mà không bị đột biến. kết quả là một mảng mới, để thêm vào cuối mảng sử dụng mã bên dưới:

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

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

Để thêm vào để bắt đầu mảng ban đầu, sử dụng mã dưới đây:

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

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

Với cách trên, bạn thêm vào đầu / cuối của một mảng mà không có đột biến.

Sử dụng hàm hủy ES6: (tránh đột biến khỏi mảng ban đầu)

const newArr = [item, ...oldArr]

Nếu bạn cần liên tục chèn một phần tử vào đầu một mảng, thì nhanh hơn là sử dụng các pushcâu lệnh theo sau là một cuộc gọi đến reverse, thay vì gọi unshiftmọi lúc.

Kiểm tra điểm chuẩn: http://jsben.ch/kLIYf

Sử dụng splicechúng tôi chèn một phần tử vào một mảng tại phần nhận thức:

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