Array.splice dan Array.slice di JavaScript

Halo, Habr! Saya mempersembahkan untuk Anda terjemahan artikel “Array.splice dan Array.slice in JavaScript” oleh Kunal Tandon.

Anda hanya harus menggunakan fungsi-fungsi di atas yang tersedia dalam prototipe JavaScript Array. Tapi mereka terlihat sangat mirip sehingga kadang-kadang Anda bisa bingung di antara mereka.

Perbedaan utama

Array.splice memodifikasi array asli dan mengembalikan array yang mengandung elemen yang dihapus.

Array.slice tidak mengubah array asli. Ini hanya mengembalikan array elemen baru, yang merupakan subset dari array asli.

Array.splice

Splice digunakan untuk memodifikasi konten array, yang mencakup menghapus elemen, mengganti elemen yang ada, atau bahkan menambahkan elemen baru ke array ini.

Saat menggunakan fungsi sambatan, array asli diperbarui.

Pertimbangkan array berikut:

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Array.splice dengan sintaks

arr.splice (dariIndex, itemsToDelete, item1ToAdd, item2ToAdd, ...);

Hapus item

Untuk menghapus elemen dari array, kami menulis:

 var deleItems = arr.splice (3, 2); 

Ini akan menghapus dua elemen mulai dari indeks 3 dan mengembalikan array jarak jauh. Sebagai hasilnya, kita mendapatkan:

 deleItems // [3, 4] arr // [0, 1, 2, 5, 6, 7, 8] 

Menambahkan Item Baru

Untuk menambahkan elemen baru ke array, kita menulis:

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; var arr2 = arr.splice (2, 0, 100, 101); 

Mulai dari elemen kedua array, angka 100 dan 101 akan ditambahkan. Nilai akhirnya adalah sebagai berikut:

 arr2 // [],         arr // [0, 1, 100, 101, 2, 3, 4, 5, 6, 7, 8] 

Ubah item yang ada

Kita dapat dengan sulit memodifikasi elemen yang ada dalam array menggunakan splice untuk menghapus elemen dengan nomor indeksnya dan memasukkan elemen baru di tempatnya.

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Untuk mengganti 3 dengan 100, kami menulis:

 var arr2 = arr.splice (3, 1, 100); //   -   3  1    100 

Kami mendapatkan nilai-nilai berikut untuk arr dan arr2 setelah mengeksekusi cuplikan kode di atas:

 arr2 // [3]      3   arr arr // [0, 1, 2, 100, 4, 5, 6, 7, 8] // 3   100   arr 

Array.slice

Sementara splice juga dapat menyisipkan dan memperbarui elemen array, fungsi slice hanya digunakan untuk menghapus elemen dari array.
Kami hanya dapat menghapus elemen dari array menggunakan fungsi slice

Sintaks Array.slice

arr.slice (startIndex, endIndex);

startIndex - indeks awal elemen untuk array baru, yang harus kita dapatkan di array baru
startIndex.endIndex (opsional) adalah indeks akhir yang harus dilakukan pemotongan, tidak termasuk elemen ini.

Pertimbangkan array berikut:

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Untuk mendapatkan bagian dari array dari nilai [2, 3, 4, 5], kita menulis:

 var slicedArr = arr.slice (2, 6); 

Harap perhatikan bahwa di sini kami menentukan argumen kedua 6, bukan 5. Setelah mengeksekusi kode di atas, kami mendapatkan array berikut:

 arr // [0, 1, 2, 3, 4, 5, 6, 7, 8] slicedArr // [2, 3, 4, 5] 

Variabel arr tetap tidak berubah setelah pernyataan slice dieksekusi, sementara pernyataan splice memperbarui array asli.

Jadi, jika kita ingin memperbarui array asli, kita menggunakan fungsi splice, tetapi jika kita hanya perlu bagian dari array, kita menggunakan slice.