Bagaimana saya bisa menambahkan elemen array baru di awal array di Javascript?

1586

Saya perlu menambahkan atau menambahkan elemen di awal array.

Misalnya, jika array saya terlihat seperti di bawah ini:

[23, 45, 12, 67]

Dan respon dari panggilan AJAX saya adalah 34, saya ingin array yang diperbarui menjadi seperti berikut:

[34, 23, 45, 12, 67]

Saat ini saya berencana untuk melakukannya seperti ini:

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

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

theArray = newArray;
delete newArray;

Apakah ada cara yang lebih baik untuk melakukan ini? Apakah Javascript memiliki fungsi bawaan yang melakukan ini?

Kompleksitas metode saya O(n)dan akan sangat menarik untuk melihat implementasi yang lebih baik.

Bulan
sumber
9
FYI: Jika Anda perlu terus-menerus memasukkan elemen di awal array, lebih cepat menggunakan pushpernyataan yang diikuti oleh panggilan reverse, alih-alih menelepon unshiftsepanjang waktu.
Jenny O'Reilly
2
@ JennyO'Reilly Anda harus memposting ini sebagai jawaban. Cocok dengan case saya. terima kasih
merampok
2
Tes kinerja: jsperf.com/adding-element-to-the-array-start Tetapi hasilnya berbeda untuk setiap browser.
Avernikoz

Jawaban:

2813

Gunakan unshift. Itu seperti push, kecuali itu menambahkan elemen ke awal array bukan akhir.

  • unshift/ push- tambahkan elemen ke awal / akhir array
  • shift/ pop - hapus dan kembalikan elemen pertama / terakhir dari sebuah array

Diagram sederhana ...

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

dan bagan:

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

Lihatlah dokumentasi Array MDN . Sebenarnya setiap bahasa yang memiliki kemampuan untuk mendorong / memunculkan elemen dari sebuah array juga akan memiliki kemampuan untuk melepaskan / menggeser (kadang-kadang disebut push_front/ pop_front) elemen, Anda seharusnya tidak harus mengimplementasikannya sendiri.


Seperti yang ditunjukkan dalam komentar, jika Anda ingin menghindari mutasi array asli Anda, Anda dapat menggunakan concat, yang menggabungkan dua array atau lebih secara bersamaan. Anda dapat menggunakan ini untuk secara fungsional mendorong elemen tunggal ke depan atau belakang array yang ada; untuk melakukannya, Anda perlu mengubah elemen baru menjadi array elemen tunggal:

const array = [ 3, 2, 1 ]

const newFirstElement = 4

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

concatjuga dapat menambahkan item. Argumen untuk concatdapat dari jenis apa pun; mereka secara implisit dibungkus dalam array elemen tunggal, jika mereka belum menjadi array:

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 ]
meagar
sumber
51
Menggunakan concatmungkin lebih disukai karena mengembalikan array baru. Sangat berguna untuk merantai. [thingToInsertToFront].concat(originalArray).reduce(fn).reverse().map(fn)dll ... Jika Anda menggunakan unshift, Anda tidak dapat melakukan rantai itu karena yang Anda dapatkan hanyalah panjangnya.
StJohn3D
4
shift / unshift, push / pop, sambatan. Nama yang sangat logis untuk metode tersebut.
linuxunil
1398

gambar operasi array

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

Maksym
sumber
117
Alasan mengapa orang memerlukan pedoman visual untuk 4 fungsi yang digunakan sehari-hari adalah karena nama fungsi yang dienkripsi ... Mengapa unshift tidak disebut Sisipan? Pergeseran harus Hapus. dll ...
Pascal
76
// Mengapa unshift tidak disebut Sisipkan? // Itu berasal dari konvensi bahasa pemrograman C di mana elemen array diperlakukan seperti tumpukan. (lihat perlmonks.org/?node_id=613129 untuk penjelasan lengkap)
dreftymac
25
@Pascal Tidak, menyisipkan dan menghapus akan menjadi nama yang sangat buruk untuk ini; mereka menyiratkan akses acak, alih-alih menambahkan / menghapus dari depan array
meagar
25
Saya akan berpikir bahwa unshift harus menghapus kunci pertama, dan shift akan menyisipkan pada kunci pertama, tapi itu hanya pemikiran umum saya
Shannon Hochkins
27
Saya suka referensi DNA
Hunter WebDev
235

Dengan ES6, gunakan operator spread ...:

DEMO

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

console.log(arr)

Abdennour TOUMI
sumber
19
juga menciptakan array baru, berguna untuk fungsi murni
devonj
apa implikasi kinerja di sini? Apakah lebih lambat daripada menggunakan unshift ()?
Peter T.
1
Tentu, ini akan lebih lambat karena ini adalah array yang tidak dapat diubah (membuat array baru). Jika Anda bekerja dengan array besar atau kinerja adalah persyaratan pertama Anda, silakan pertimbangkan untuk menggunakannya concat.
Abdennour TOUMI
kinerja tidak penting di 2018, versi baru di browser dan node mendapatkan kinerja yang sama
stackdave
75

Cara lain untuk melakukannya concat

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

Perbedaan antara concatdan unshiftadalah yang concatmengembalikan array baru. Performa di antara mereka dapat ditemukan di sini .

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

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

Inilah hasil tesnya

masukkan deskripsi gambar di sini

zangw
sumber
Akan lebih baik untuk jawaban Anda untuk menambahkan perbandingan kinerja keduanya selain menambahkan referensi.
Ivan De Paz Centeno
Saya baru saja mendapatkan jsPerf untuk sementara tidak tersedia sementara kami sedang berusaha merilis v2. Silakan coba lagi nanti dari tautan. Alasan bagus lainnya untuk menyertakan hasil alih-alih menautkannya.
Tigger
jsPref hasil:: unshift25.510 ± 3.18% 99% lebih lambat concat: 2.436.894 ± 3.39% tercepat
Illuminator
Di Safari terbaru, fn_unshift () berjalan lebih cepat.
passatgt
Di Safari terbaru (v 10), fn_unshift () lebih lambat lagi.
rmcsharry
45

Cheatsheet Cepat:

Istilah shift / unshift dan push / pop bisa sedikit membingungkan, setidaknya untuk orang-orang yang mungkin tidak terbiasa dengan pemrograman dalam C.

Jika Anda tidak terbiasa dengan istilah itu, berikut ini adalah terjemahan cepat dari istilah-istilah alternatif, yang mungkin lebih mudah diingat:

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

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

Anda memiliki sebuah array: var arr = [23, 45, 12, 67];

Untuk menambahkan item ke awal, Anda ingin menggunakan splice:

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

ozimax06
sumber
arr.splice (0, arr.length, 34);
Lior Elrom
1
@LiorElrom, apa yang cuplikan Anda lakukan?
Janus Troelsen
@poushy itu spesifik browser, di Firefox 54 unshift50% lebih cepat (tapi sebagian besar lebih mudah dibaca)
icl7126
@poushy Tidak lagi. Jauh lebih lambat.
Andrew
17

Tanpa bermutasi

Sebenarnya, semua unshift/ pushdan shift/ pop mutasi array asal.

The unshift/ pushmenambahkan item ke array ada dari mulai / akhir dan shift/ popmenghapus item dari awal / akhir array.

Tetapi ada beberapa cara untuk menambahkan item ke array tanpa mutasi. hasilnya adalah array baru, untuk menambahkan ke akhir array gunakan kode di bawah ini:

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

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

Untuk menambahkan untuk memulai array asli gunakan kode di bawah ini:

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

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

Dengan cara di atas, Anda menambah awal / akhir array tanpa mutasi.

Amerika
sumber
Saya hanya menempatkan slicefungsi pada akhir originArrayuntuk mencegahnya dari berubah-ubah.
Ahmad Khani
1
Luar biasa! Ketika datang ke (Redux) Manajemen negara ... jawaban ini sangat berharga!
Pedro Ferreira
1
Ini cara yang benar!
mmm
10

Menggunakan destruksi ES6: (menghindari mutasi dari array asli)

const newArr = [item, ...oldArr]

Ben Adam
sumber
8

Jika Anda perlu terus-menerus memasukkan elemen di awal array, lebih cepat menggunakan pushpernyataan yang diikuti oleh panggilan reverse, alih-alih menelepon unshiftsepanjang waktu.

Tes patokan: http://jsben.ch/kLIYf

Jenny O'Reilly
sumber
1
Catatan: array awal harus kosong.
192kb
5

Menggunakan splicekami menyisipkan elemen ke array di awal:

arrName.splice( 0, 0, 'newName1' );
Srikrushna
sumber
Itu jawaban yang benar. Terima kasih Srikrushna
Khanh Tran