Mari kita perjelas kebingungan seputar metode slice (), splice (), & split () di JavaScript

Metode bawaan JavaScript banyak membantu kita saat memprogram, setelah kita memahaminya dengan benar. Saya ingin menjelaskan tiga di antaranya dalam artikel ini: metode slice(), splice()dan split(). Mungkin karena penamaannya sangat mirip sehingga sering membuat bingung, bahkan di antara developer berpengalaman.

Saya menyarankan siswa dan pengembang junior untuk membaca artikel ini dengan cermat karena ketiga metode ini juga dapat ditanyakan dalam WAWANCARA PEKERJAAN.

Anda dapat menemukan ringkasan dari setiap metode di bagian akhir. Jika mau, Anda juga dapat menonton versi video di bawah ini:

Jadi ayo mulai…

Array JavaScript

Pertama, Anda perlu memahami cara kerja array JavaScript . Seperti dalam bahasa pemrograman lain, kami menggunakan array untuk menyimpan banyak data di JS. Tetapi perbedaannya adalah bahwa array JS dapat berisi tipe data yang berbeda sekaligus.

Terkadang kita perlu melakukan operasi pada array tersebut. Kemudian kami menggunakan beberapa metode JS seperti slice () & splice () . Anda dapat melihat di bawah ini cara mendeklarasikan array dalam JavaScript:

let arrayDefinition = [];   // Array declaration in JS

Sekarang mari kita deklarasikan array lain dengan tipe data berbeda. Saya akan menggunakannya di bawah ini sebagai contoh:

let array = [1, 2, 3, "hello world", 4.12, true];

Penggunaan ini valid di JavaScript. Larik dengan tipe data berbeda: string, angka, dan boolean.

Irisan ()

The slice () metode salinan bagian tertentu dari array dan pengembalian yang disalin bagian sebagai array baru. Itu tidak mengubah larik asli.

array.slice(from, until);

  • Dari: Iris array mulai dari indeks elemen
  • Hingga: Iris array hingga indeks elemen lainnya

Misalnya, saya ingin memotong tiga elemen pertama dari array di atas. Karena elemen pertama dari sebuah array selalu diindeks pada 0, saya mulai memotong "dari" 0.

array.slice(0, until);

Sekarang inilah bagian yang sulit. Ketika saya ingin memotong tiga elemen pertama, saya harus memberikan parameter sampai sebagai 3. Metode slice () tidak menyertakan elemen yang diberikan terakhir.

array[0] --> 1 // included array[1] --> 2 // included array[2] --> 3 // included array[3] --> "hello world" // not included

Ini dapat menimbulkan kebingungan. Itu sebabnya saya menyebut parameter kedua “sampai”.

let newArray = array.slice(0, 3);   // Return value is also an array

Akhirnya, saya menetapkan irisan Array ke variabel newArray . Sekarang mari kita lihat hasilnya:

Catatan Penting: metode Slice () juga bisa digunakan untuk string.

Sambungan ()

Nama fungsi ini sangat mirip dengan slice () . Kesamaan penamaan ini sering membingungkan developer. The sambatan () metode perubahan array, dengan menambahkan atau menghapus elemen dari itu. Mari kita lihat cara menambah dan menghapus elemen dengan splice ( ) :

Menghapus Elemen

Untuk menghapus elemen, kita perlu memberikan parameter indeks , dan jumlah elemen yang akan dihapus:

array.splice(index, number of elements);

Indeks adalah titik awal untuk menghilangkan elemen. Elemen yang memilikinomor indeks lebih kecil dari indeks yang diberikan tidak akan dihapus:

array.splice(2);  // Every element starting from index 2, will be removed

Jika kita tidak mendefinisikan parameter kedua, setiap elemen yang dimulai dari indeks yang diberikan akan dihapus dari array:

Sebagai contoh kedua, saya memberikan parameter kedua sebagai 1, jadi elemen yang dimulai dari indeks 2 akan dihapus satu per satu setiap kali kita memanggil metode splice () :

array.splice(2, 1);

Setelah panggilan pertama:

Setelah panggilan kedua:

Ini dapat berlanjut hingga tidak ada indeks 2 lagi.

Menambahkan Elemen

Untuk menambahkan elemen, kita perlu memberikannya sebagai parameter ke-3, ke-4, ke-5 (tergantung pada berapa banyak yang akan ditambahkan) ke metode splice () :

array.splice (indeks, jumlah elemen, elemen, elemen);

Sebagai contoh, saya menambahkan a dan b di awal array dan saya tidak menghapus apa pun:

array.splice(0, 0, 'a', 'b');

Pisahkan ()

Metode Slice () dan splice () adalah untuk array. Metode split () digunakan untuk string . Ini membagi string menjadi substring dan mengembalikannya sebagai array. Dibutuhkan 2 parameter, dan keduanya opsional.

string.split(separator, limit);

  • Pemisah: Mendefinisikan bagaimana membagi string… dengan koma, karakter dll.
  • Batas: Membatasi jumlah pemisahan dengan nomor tertentu

Metode split () tidak bekerja secara langsung untuk array . Namun, pertama-tama kita dapat mengonversi elemen array kita menjadi string, kemudian kita dapat menggunakan metode split () .

Mari kita lihat cara kerjanya.

Pertama, kami mengonversi array kami menjadi string dengan metode toString () :

let myString = array.toString();

Sekarang mari kita pisahkan myString dengan koma, batasi menjadi tiga substring, dan kembalikan sebagai array:

let newArray = myString.split(",", 3);

Seperti yang bisa kita lihat, myString dipisahkan dengan koma. Karena kita membatasi pembagian menjadi 3, hanya 3 elemen pertama yang dikembalikan.

CATATAN: Jika kita memiliki penggunaan seperti ini:array.split("");maka setiap karakter string akan dibagi menjadi substring:

Ringkasan:

Irisan ()

  • Menyalin elemen dari larik
  • Mengembalikannya sebagai larik baru
  • Tidak mengubah larik asli
  • Mulai mengiris dari… hingga diberikan indeks: array.slice (dari, hingga)
  • Slice tidak menyertakan parameter indeks "hingga"
  • Dapat digunakan baik untuk array maupun string

Sambungan ()

  • Digunakan untuk menambah / menghapus elemen dari larik
  • Mengembalikan larik elemen yang dihapus
  • Mengubah array
  • Untuk menambahkan elemen: array.splice (indeks, jumlah elemen, elemen)
  • Untuk menghapus elemen: array.splice (indeks, jumlah elemen)
  • Hanya dapat digunakan untuk array

Pisahkan ()

  • Membagi string menjadi beberapa substring
  • Mengembalikannya dalam array
  • Membawa 2 parameter, keduanya opsional: string.split (pemisah, batas)
  • Tidak mengubah string asli
  • Hanya dapat digunakan untuk string

Ada banyak metode bawaan lainnya untuk array dan string JavaScript, yang membuat lebih mudah untuk bekerja dengan pemrograman JavaScript. Selanjutnya, Anda dapat melihat artikel baru saya tentang Metode Substring JavaScript.

Jika Anda ingin mempelajari lebih lanjut tentang pengembangan web, silakan ikuti saya di Youtube !

Terima kasih telah membaca!