Mari selesaikan kekeliruan di sekitar kaedah slice (), splice (), & split () dalam JavaScript

Pengaturcaraan

Kaedah bawaan JavaScript banyak membantu kita semasa memprogram, setelah kita memahaminya dengan betul. Saya ingin menerangkan tiga daripadanya dalam artikel ini: kaedah slice(), splice()dan split()kaedah. Mungkin kerana penamaan mereka sangat serupa, mereka sering keliru, bahkan di kalangan pembangun yang berpengalaman.

Saya menasihati pelajar dan pengembang junior untuk membaca artikel ini dengan teliti kerana ketiga-tiga kaedah ini juga boleh ditanya dalam TINJAUAN PEKERJAAN.

Anda boleh mendapatkan ringkasan setiap kaedah pada akhirnya. Sekiranya anda mahu, anda juga boleh menonton versi video di bawah:

Oleh itu mari kita mulakan ...

Susunan JavaScript

Pertama, anda perlu memahami bagaimana tatasusunan JavaScript berfungsi. Seperti dalam bahasa pengaturcaraan lain, kami menggunakan tatasusunan untuk menyimpan banyak data di JS. Tetapi perbezaannya adalah bahawa tatasusunan JS dapat berisi berbagai jenis data sekaligus.

Kadang kala kita perlu melakukan operasi pada tatasusunan tersebut. Kemudian kami menggunakan beberapa kaedah JS seperti slice () & splice () . Anda dapat melihat di bawah ini cara mendeklarasikan larik dalam JavaScript:

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

Sekarang mari kita nyatakan susunan lain dengan pelbagai jenis data. Saya akan menggunakannya di bawah dalam contoh:

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

Penggunaan ini berlaku dalam JavaScript. Array dengan pelbagai jenis data: rentetan, nombor, dan boolean.

Potongan ()

The keping () kaedah salinan bahagian yang diberikan pelbagai dan pulangan yang disalin bahagian sebagai pelbagai baru. Ia tidak mengubah susunan asal.

array.slice(from, until);

  • Dari: Potong kepingan bermula dari indeks elemen
  • Sehingga: Potong kepingan sehingga indeks elemen lain

Sebagai contoh, saya ingin memotong tiga elemen pertama dari tatasusunan di atas. Oleh kerana elemen pertama array selalu diindeks pada 0, saya mula memotong "dari" 0.

array.slice(0, until);

Sekarang inilah bahagian yang sukar. Apabila saya ingin memotong tiga elemen pertama, saya mesti memberikan parameter hingga 3. Kaedah slice () tidak termasuk elemen terakhir yang diberikan.

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

Ini boleh menimbulkan kekeliruan. Itulah sebabnya saya memanggil parameter kedua "sampai".

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

Akhirnya, saya memberikan Array yang dihiris kepada pemboleh ubah newArray . Sekarang mari kita lihat hasilnya:

Catatan Penting: kaedah Slice () juga dapat digunakan untuk tali.

Sambungan ()

Nama fungsi ini sangat serupa dengan slice () . Kesamaan penamaan ini sering membingungkan pembangun. The sambat () kaedah perubahan pelbagai, dengan menambah atau membuang unsur-unsur daripadanya. Mari lihat cara menambah dan membuang unsur dengan sambaran ( ) :

Mengeluarkan Elemen

Untuk membuang elemen, kita perlu memberikan parameter indeks , dan jumlah elemen yang akan dikeluarkan:

array.splice(index, number of elements);

Indeks adalah titik permulaan untuk membuang unsur. Elemen yang mempunyaibilangan indeks yang lebih kecil dari indeks yang diberikan tidak akan dikeluarkan:

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

Sekiranya kita tidak menentukan parameter kedua, setiap elemen yang bermula dari indeks yang diberikan akan dikeluarkan dari array:

Sebagai contoh kedua, saya memberikan parameter kedua sebagai 1, jadi elemen yang bermula dari indeks 2 akan dikeluarkan satu persatu setiap kali kita memanggil kaedah sambatan () :

array.splice(2, 1);

Selepas panggilan pertama:

Selepas panggilan ke-2:

Ini boleh berterusan sehingga tidak ada indeks 2 lagi.

Menambah Elemen

Untuk menambahkan elemen, kita perlu memberikannya sebagai parameter ke-3, ke-4, ke-5 (bergantung kepada berapa banyak yang hendak ditambahkan) pada kaedah sambatan () :

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

Sebagai contoh, saya menambahkan a dan b pada awal array dan saya tidak mengeluarkan apa-apa:

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

Berpisah ()

Kaedah slice () dan splice () adalah untuk tatasusunan. Kaedah split () digunakan untuk rentetan . Ia membahagi rentetan menjadi substring dan mengembalikannya sebagai array. Ia memerlukan 2 parameter, dan keduanya adalah pilihan.

string.split(separator, limit);

  • Separator: Menentukan cara memisahkan rentetan ... dengan koma, watak dll
  • Had: Hadkan bilangan perpecahan dengan nombor tertentu

Kaedah split () tidak berfungsi secara langsung untuk tatasusunan . Namun, pertama-tama kita dapat mengubah elemen array kita menjadi rentetan, kemudian kita dapat menggunakan kaedah split () .

Mari lihat bagaimana ia berfungsi.

Pertama, kami menukar array kami ke rentetan dengan kaedah toString () :

let myString = array.toString();

Sekarang mari kita bahagikan myString dengan koma, hadkannya kepada tiga substring, dan kembalikan sebagai array:

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

Seperti yang kita lihat, myString dibahagi dengan koma. Oleh kerana kami mengehadkan pemisahan kepada 3, hanya 3 elemen pertama yang dikembalikan.

CATATAN: Sekiranya kita mempunyai penggunaan seperti ini:array.split("");maka setiap watak rentetan akan dibahagikan sebagai substring:

Ringkasan:

Potongan ()

  • Menyalin elemen dari tatasusunan
  • Mengembalikannya sebagai tatasusunan baru
  • Tidak mengubah susunan asal
  • Mula memotong dari… hingga indeks yang diberikan: array.slice (dari, hingga)
  • Slice tidak termasuk parameter indeks "sampai"
  • Boleh digunakan untuk tatasusunan dan tali

Sambungan ()

  • Digunakan untuk menambah / mengeluarkan elemen dari array
  • Mengembalikan pelbagai elemen yang dikeluarkan
  • Menukar susunan
  • Untuk menambahkan elemen: array.splice (indeks, bilangan elemen, elemen)
  • Untuk mengeluarkan elemen: array.splice (indeks, bilangan elemen)
  • Hanya boleh digunakan untuk tatasusunan

Berpisah ()

  • Membahagi rentetan menjadi substring
  • Mengembalikannya dalam tatasusunan
  • Mengambil 2 parameter, keduanya adalah pilihan: string.split (pemisah, had)
  • Tidak menukar rentetan asal
  • Hanya boleh digunakan untuk tali

Terdapat banyak kaedah bawaan lain untuk tatasusunan dan rentetan JavaScript, yang memudahkan kerja dengan pengaturcaraan JavaScript. Seterusnya, anda boleh melihat artikel baru saya mengenai Kaedah Substring JavaScript.

Sekiranya anda ingin mengetahui lebih lanjut mengenai pembangunan web, sila ikuti saya di Youtube !

Terima kasih kerana membaca!