Câu hỏi Làm thế nào tôi có thể 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ảng.

Ví dụ, nếu mảng của tôi trông giố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 giống như sau:

[34, 23, 45, 12, 67]

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

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 không? JavaScript có bất kỳ chức năng tích hợp nào không?

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


1137
2017-11-10 00:35


gốc


unshift
FYI: Nếu bạn cần phải liên tục chèn một phần tử vào đầu của một mảng, nó là nhanh hơn để sử dụng push báo cáo theo sau là một cuộc gọi đến reverse, thay vì gọi unshift mọi lúc. - Jenny O'Reilly
@ JennyO'Reilly bạn nên đăng bài này như một câu trả lời. Phù hợp với trường hợp sử dụng của tôi một cách hoàn hảo. cảm ơn - rob
@rob Cảm ơn bạn đã bình luận. Tôi đã thêm nó làm câu trả lời bao gồm cả bài kiểm tra điểm chuẩn. - Jenny O'Reilly


Các câu trả lời:


Sử dụng unshift. Nó giống như push, ngoại trừ nó thêm các phần tử vào phần đầu của 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ử và mảng đầu tiên / cuối cù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 push / pop elements từ một mảng cũng sẽ có khả năng unshift / shift (đôi khi được gọi là push_front/pop_front) các yếu tố, bạn không bao giờ phải tự mình triển khai.


2129
2017-11-10 00:37



Sử dụng concat có thể thích hợp hơn khi nó trả về mảng mới. Rất hữu ích cho chuỗi. [thingToInsertToFront].concat(originalArray).reduce(fn).reverse().map(fn) vv ... Nếu bạn sử dụng unshift, bạn không thể làm điều đó chuỗi bởi vì tất cả các bạn nhận được trở lại là chiều dài. - St. John Peaster
shift / unshift, push / pop, ghép nối. Tên rất hợp lý cho các phương pháp như vậy. - 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



Lý do tại sao mọi người cần một hướng dẫn trực quan cho 4 chức năng được sử dụng hàng ngày là vì các tên chức năng được mã hóa ... Tại sao unshift không được gọi là Chèn? Shift phải được loại bỏ. v.v ... - Pascal
// Tại sao unshift không được gọi là Insert? // Nó xuất phát từ các quy ước của ngôn ngữ lập trình C trong đó các phần tử mảng được xử lý như một chồng. (xem perlmonks.org/?node_id=613129 cho một lời giải thích đầy đủ) - dreftymac
@Pascal Không, chèn và loại bỏ sẽ là tên đặc biệt xấu cho việc này; chúng ngụ ý truy cập ngẫu nhiên, thay vì thêm / xóa khỏi mặt trước của mảng - meagar♦
Tôi đã nghĩ rằng unshift nên loại bỏ khóa đầu tiên, và sự thay đổi sẽ chèn vào khóa đầu tiên, nhưng đó chỉ là suy nghĩ chung của tôi - Shannon Hochkins
Tôi thích tham chiếu DNA - DNACode


Với ES6, sử dụng toán tử spread ... :

BẢN GIỚI THIỆU

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

console.log(arr)


125
2017-09-16 12:26



cũng tạo ra một mảng mới, hữu ích cho các hàm thuần túy - devonJS
ý nghĩa hiệu suất ở đây là gì? Nó có chậm hơn sử dụng unshift () không? - Pedi T.
Chắc chắn, nó sẽ chậm hơn vì nó là một mảng bất biến (tạo ra một mảng mới). Nếu bạn đang làm việc với một mảng lớn hoặc hiệu suất là yêu cầu đầu tiên của bạn, hãy xem xét sử dụng concat thay thế. - Abdennour TOUMI
hiệu suất không quan trọng trong năm 2018, các phiên bản mới trong trình duyệt và nút có cùng hiệu suất - stackdave


Một cách khác để thực hiện đ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 concat và unshift đó là concat trả 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

enter image description here


48
2018-02-19 10:56



Nó sẽ là tốt cho câu trả lời của bạn để nối thêm so sánh hiệu suất của cả hai ngoài việc thêm tham chiếu. - Ivan De Paz Centeno
Tôi vừa có jsPerf tạm thời không khả dụng trong khi chúng tôi đang phát hành phiên bản v2. Vui lòng thử lại sau từ liên kết. Một lý do khác để bao gồm các kết quả thay vì liên kết với chúng. - Tigger
jsPref kết quả: unshift: 25,510 ± 3,18% 99% chậm hơn concat: 2,436,894 ± 3,39% nhanh nhất - Illuminator
Trong Safari mới nhất, fn_unshift () chạy nhanh hơn. - passatgt
Trong Safari mới nhất (v 10), fn_unshift () lại chậm hơn. - rmcsharry


Cheatsheet nhanh: 

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

Nếu bạn không quen với ngôn ngữ, đây là bản dịch nhanh các cụm từ 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 ) 

38
2018-04-15 17:28





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


13
2018-04-20 19:19



arr.splice (0, arr.length, 34); - Lior Elrom
@LiorElrom Đoạn trích của bạn làm gì? - Janus Troelsen
Vâng! mối nối nhanh hơn unshift. jsperf.com/array-unshift-vs-splice - poushy
@poushy đó là trình duyệt cụ thể, trong Firefox 54 là unshift Nhanh hơn 50% (nhưng chủ yếu là dễ đọc hơn) - icl7126


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


2
2018-05-29 06:14