Array Ekstra di JavaScript

Array JavaScript adalah struktur data asas dalam banyak bahasa pengaturcaraan, dan JavaScript tidak terkecuali. Untuk memudahkan banyak butiran bekerja dengan Arrays, JavaScript menyediakan satu set ciri yang dipanggil Fungsi Pelanjutan Array. Artikel ini memperkenalkan pelbagai fungsi lanjutan array dan kegunaan mereka.

mata utama

Fungsi lanjutan array dalam JavaScript adalah fungsi yang memudahkan banyak butiran bekerja dengan tatasusunan, meningkatkan kebolehbacaan kod dengan menggantikan gelung kompleks dengan panggilan fungsi. Mereka termasuk kaedah seperti
• , forEach(), map(), filter(), every(), some(), reduce(), reduceRight(), indexOf(), lastIndexOf() dan
.
• Kaedah forEach()
menghapuskan keperluan untuk gelung dan notasi subskrip array dengan memanggil fungsi panggil balik pada setiap elemen dalam array. Walau bagaimanapun, ia boleh menyebabkan kemerosotan prestasi kerana memanggil fungsi untuk setiap elemen.
• Fungsi map() forEach() adalah serupa dengan filter(), tetapi ia mengembalikan array yang mengandungi nilai -nilai yang dikembalikan oleh fungsi panggil balik. Kaedah
juga mengembalikan pelbagai nilai, tetapi ia berdasarkan nilai pulangan fungsi panggil balik yang harus mengembalikan nilai boolean.
• Kaedah reduce() reduceRight() memproses setiap elemen dalam array, mengira nilai tunggal, manakala indexOf() berfungsi dengan cara yang sama, tetapi bermula pada akhir array. Kaedah lastIndexOf() mencari unsur -unsur tertentu dalam array, dan
juga melakukan perkara yang sama, tetapi memulakan pencarian dari akhir array.

latar belakang

for Hampir semua operasi array dilakukan dengan melintasi setiap elemen array satu demi satu. Sebagai contoh, kod berikut menggunakan gelung

untuk merakam semua elemen array ke konsol debug.

<code class="language-javascript">var foo = ["a", "b", "c", "d"];

for (var i = 0, len = foo.length; i < len; i++) {
  console.log(foo[i]);
}</code>

Pertama dan yang paling penting, anda harus memahami bahawa contoh sebelumnya adalah kod JavaScript yang sah. Walau bagaimanapun, jika anda mempunyai beberapa gelung kompleks, pembolehubah penjejakan boleh menjadi membosankan. Fungsi pelanjutan array membolehkan kami menggantikan keseluruhan gelung dengan panggilan fungsi, yang biasanya dapat meningkatkan kebolehbacaan kod. Sekarang, mari kita lihat pelbagai fungsi lanjutan array.

foreach ()

forEach() Seperti banyak fungsi lanjutan array, kaedah adalah fungsi yang lebih tinggi fungsi-fungsi yang menerima fungsi lain sebagai parameter. forEach() Daripada melintasi elemen array, fungsi panggil balik dipanggil pada setiap elemen dalam urutan. Fungsi panggil balik menerima tiga parameter -elemen array semasa, indeks array, dan array itu sendiri. Dalam kod berikut, contoh asal telah ditulis semula untuk menggunakan kaedah forEach().

<code class="language-javascript">var foo = ["a", "b", "c", "d"];

for (var i = 0, len = foo.length; i < len; i++) {
  console.log(foo[i]);
}</code>

Perhatikan bahawa menggunakan forEach() menghapuskan keperluan untuk notasi Loop dan Array Subscript. Di samping itu, sejak JavaScript menggunakan skop peringkat fungsi, fungsi panggilan balik forEach() menyediakan skop baru yang membolehkan penggunaan semula nama berubah. Satu -satunya kelemahan adalah kehilangan prestasi yang ditanggung dengan memanggil fungsi untuk setiap elemen dalam array. Nasib baik, kerugian ini sering diabaikan. Juga ambil perhatian bahawa anda boleh lulus parameter pilihan ke forEach() selepas fungsi panggil balik. Jika ada, parameter kedua mentakrifkan nilai this yang digunakan dalam fungsi panggil balik.

peta ()

Fungsi

map() hampir sama dengan forEach(). Satu -satunya perbezaan ialah map() mengembalikan array yang mengandungi nilai yang dikembalikan oleh fungsi panggil balik. Sebagai contoh, kod berikut menggunakan map() untuk mengira akar kuadrat setiap item dalam array input. Kemudian kembalikan hasilnya sebagai array dan paparkannya. Juga ambil perhatian bahawa fungsi lanjutan array bersesuaian dengan fungsi JavaScript terbina dalam seperti Math.sqrt().

<code class="language-javascript">["a", "b", "c", "d"].forEach(function(element, index, array) {
  console.log(element);
});</code>

penapis ()

seperti forEach() dan map(), kaedah filter() menerima fungsi panggilan balik dan pilihan this pilihan. Dan, seperti map(), filter() mengembalikan pelbagai nilai berdasarkan nilai pulangan fungsi panggil balik. Perbezaannya ialah fungsi panggil balik filter() harus mengembalikan nilai boolean. Jika nilai pulangan adalah benar, tambahkan elemen array ke array hasil. Sebagai contoh, kod berikut membuang sebarang elemen dalam array asal yang tidak bermula dengan huruf x. Dalam contoh ini, ungkapan biasa (diluluskan sebagai nilai this) akan diuji untuk setiap elemen array.

<code class="language-javascript">var sqrts = [1, 4, 9, 16, 25].map(Math.sqrt);

console.log(sqrts);
// 显示 "[1, 2, 3, 4, 5]"</code>

setiap () dan beberapa ()

Fungsi

every() dan some() juga menjalankan fungsi panggil balik pada setiap elemen array. Jika setiap fungsi panggil balik kembali benar, every() mengembalikan benar, jika tidak palsu. Begitu juga, jika sekurang -kurangnya satu fungsi panggil balik kembali benar, some() kembali benar. Dalam contoh berikut, every() dan some() digunakan untuk menguji sama ada elemen array kurang daripada lima. Dalam kes ini, every() mengembalikan palsu kerana elemen terakhir adalah sama dengan lima. Walau bagaimanapun, some() kembali benar kerana sekurang -kurangnya satu elemen kurang daripada lima. Perhatikan bahawa parameter indeks dan array wujud, tetapi telah ditinggalkan dari fungsi panggil balik, kerana ia tidak diperlukan dalam contoh ini.

<code class="language-javascript">["x", "abc", "x1", "xyz"].filter(RegExp.prototype.test, /^x/);</code>

Kurangkan () dan reduceright ()

Kaedah

reduce() memproses setiap elemen dalam array (bermula dari awal) dan mengira satu nilai. reduce() lebih suka fungsi panggil balik dan nilai permulaan pilihan sebagai parameter. Jika tiada nilai awal wujud, elemen array pertama digunakan. reduce() Fungsi panggil balik adalah berbeza dari fungsi panggilan balik lain yang telah kita lihat setakat ini kerana ia menerima empat parameter -nilai sebelumnya, nilai semasa, indeks, dan array. Contoh umum operasi reduce adalah untuk menambah semua nilai array. Contoh berikut betul -betul ini. Apabila fungsi panggil balik dipanggil untuk kali pertama, previous sama dengan 1 dan current sama dengan 2. Dalam panggilan berikutnya, jumlah itu berkumpul ke nilai akhir 15.

<code class="language-javascript">var foo = ["a", "b", "c", "d"];

for (var i = 0, len = foo.length; i < len; i++) {
  console.log(foo[i]);
}</code>

Kaedah

reduceRight() berfungsi dengan cara yang sama seperti reduce(), kecuali bahawa proses bermula dari akhir array dan bergerak ke arah permulaan.

indexOf () dan lastIndexof ()

Kaedah

indexOf() mencari elemen tertentu dalam array dan mengembalikan indeks perlawanan pertama. Jika tiada perlawanan dijumpai, indexOf() pulangan -1. indexOf() sila elemen yang akan dicari sebagai parameter pertama. Parameter pilihan kedua menentukan indeks permulaan carian. Sebagai contoh, kod berikut mencari dua kejadian pertama huruf Z dalam array. Untuk mencari penampilan kedua, kita hanya perlu mencari penampilan pertama dan mula mencari semula selepas itu.

<code class="language-javascript">["a", "b", "c", "d"].forEach(function(element, index, array) {
  console.log(element);
});</code>

Kaedah

lastIndexOf() berfungsi dengan cara yang sama, kecuali ia mula mencari dari akhir array.

Kesimpulan

Gunakan fungsi lanjutan array untuk menulis kod ringkas dan jelas. Malangnya, beberapa pelayar yang lebih tua tidak menyokong kaedah ini. Walau bagaimanapun, anda boleh mengesan kaedah ini dengan memeriksa objek Array.prototype (iaitu Array.prototype.forEach). Jika kaedah hilang, anda boleh dengan mudah memberikan pelaksanaan anda sendiri.

(bahagian Soalan Lazim harus ditambah di sini, kandungannya sama dengan bahagian FAQ dalam teks input, tetapi pengubahsuaian pseudo-asal yang sepadan, seperti menyesuaikan perintah pernyataan, menggantikan sinonim, dan sebagainya)

Atas ialah kandungan terperinci Array Ekstra di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!