Pengenalan mengenai sintaks Spread dalam JavaScript

Apa itu dan mengapa kita memerlukannya?

Sintaks spread diperkenalkan dalam spesifikasi JavaScript ES6. Sejak itu terbukti menjadi sekeping kod yang berharga menjadikan kod itu bersih dan mudah difahami.

MDN mentakrifkan sebagai:

Sintaks penyebaran membolehkan pengulangan seperti ungkapan array atau rentetan diperluas di tempat-tempat di mana sifar atau lebih argumen (untuk fungsi panggilan) atau unsur-unsur (untuk literal array) diharapkan, atau ekspresi objek diperluas di tempat-tempat di mana sifar atau lebih pasangan nilai-kunci (untuk literal objek) dijangka.

Mari kita semua bersetuju bahawa definisi di atas adalah segelintir dan tidak ada di antara kita yang memahami perkataan yang cuba disampaikan. Oleh itu, mari kita mulakan dengan perkara paling asas mengenai sintaks penyebaran.

  • Pengendali spread hanya 3 titik ...
  • Ia dapat digunakan pada iterables seperti array atau string.
  • Ini mengembangkan berulang pada elemen individu
  • Ia dapat memberikan fungsi panggilan dengan array (atau iterable lain) di mana diharapkan 0 atau lebih argumen.

Contohnya

Coretan di bawah mengandungi fungsi yang disebut jumlah yang mengharapkan 3 argumen x, y, dan z. Kami mempunyai susunan dengan 3 elemen, dan kami ingin meneruskan elemen dalam larik sebagai argumen untuk fungsi tersebut.

Sebelum operator spread diperkenalkan, ini dilakukan melalui fungsi menerapkan.

Selepas pengenalan operator penyebaran, ini dapat dilakukan dengan sangat sederhana:

Seperti yang dapat dilihat dari coretan di atas dengan operator spread, kita tidak perlu menggunakan fungsi menerapkan. Ini menyelamatkan kita daripada menulis lebih banyak kod.

Contoh di atas memberikan idea yang sangat kasar dan ringkas mengenai pengendali spread. Pertama, mari kita perhatikan lebih banyak perincian yang sama, dan kemudian kita akan melihat lebih banyak contoh.

Sintaks

Operator penyebaran boleh digunakan dalam pelbagai cara dan senario seperti

  • Panggilan fungsi dalam

Apabila digunakan dalam senario di atas disebut parameter selebihnya. Kita akan melihat contoh yang berkaitan dengan ini di bahagian contoh.

  • Membuat / Memperluas array / berulang:

Contoh

  • Sebagai rehat

… Digunakan sebagai argumen untuk fungsi variadik. Fungsi variadik adalah fungsi yang dapat memiliki sejumlah parameter yang berubah-ubah.

Di sini apabila kita mengembalikan argumen, kita melihat bahawa kita mendapatkan kembali susunan yang kita lalui sebagai nilai berasingan dalam panggilan. Ini menunjukkan bahawa pengendali selebihnya sebenarnya bertentangan dengan sintaks spread. Satu mengembang dan satu mengembun nilai.

Satu perkara lagi yang perlu diperhatikan ialah tidak ada jumlah parameter tertentu yang disebutkan dalam definisi fungsi. Ini bermaksud menggunakan… fungsi boleh mempunyai sejumlah argumen. Kami tidak perlu menentukan parameter terlebih dahulu.

Ini adalah cara yang sangat fleksibel untuk menerima argumen untuk fungsi yang jumlah argumennya tidak ditentukan seperti fungsi Math.max dan Math.min. Mereka adalah fungsi yang bervariasi kerana jumlah inputnya tidak terbatas bagi mereka.

Kembali ke contoh, untuk mendapatkan jumlah semua hujah

Kita harus mengulangi susunan dan menambahkan semua elemen individu untuk menghasilkan hasilnya.

  • Tolak elemen dalam tatasusunan

fungsi push () digunakan untuk mendorong elemen ke dalam larik. Batasan dengan tolak adalah bahawa kita harus mendorong elemen satu persatu (tolak (1,2,3)). Sekiranya terdapat array yang elemennya akan dimasukkan ke dalam array menggunakan push, kita akan mendapat array multidimensi, yang kita tidak minta

Sekali lagi berlaku untuk menyelamatkan

Seperti yang kita lihat bahawa penggunaan berlaku tidak kelihatan sangat elegan dan kita memerlukan sintaks sederhana dan kecil untuk melakukannya. Mari kita gunakan spread ...

Anggun!

  • Menyalin tatasusunan

Ringkas!

Hasil yang sama dapat dihasilkan dengan menggunakan objek

  • Bersambung 2 tatasusunan

Gabungan dilakukan menggunakan fungsi concat

Perkara yang sama dapat dicapai dengan menggunakan… operator

  • Menukar rentetan kepada tatasusunan

Ini dapat dilakukan dengan menggunakan fungsi split dan… operator

  • Gunakan dalam fungsi maks dan min

Coretan di bawah cenderung untuk mencari elemen maksimum dalam array, jadi kita meneruskan keseluruhan array dalam fungsi tetapi kita mendapat hasilnya sebagai NaN

Kita boleh menggunakan berlaku, tetapi seperti yang dilihat dari contoh sebelumnya saya tidak suka menggunakannya

Sama dengan min

Kesimpulannya

Kami melihat banyak situasi di mana pengendali penyebaran berguna dan mengurangkan kod kami dan juga menjadikannya sangat mudah difahami.

Sekiranya anda suka Tepuk tangan? dan Ikut? untuk lebih.