Mengapakah terdapat tatasusunan kosong dalam fungsi [].forEach.call() JavaScript?

Memahami Fungsi [].forEach.call() dalam JavaScript

Adakah anda ingin tahu tentang penggunaan [].forEach yang menarik. call() dalam JavaScript? Mari kita mendalami tujuan dan fungsinya.

Dalam JavaScript, tatasusunan mempunyai kaedah berkuasa yang dipanggil forEach, yang membolehkan anda melakukan operasi pada setiap elemen tatasusunan. Walau bagaimanapun, dalam beberapa keadaan, anda mungkin menghadapi kod yang mana tatasusunan kosong digunakan sebelum memohon untukSetiap pada senarai nod.

Memecahkan Kod

Pertimbangkan perkara berikut coretan kod:

[].forEach.call(document.querySelectorAll('a'), function(el) {
  // Perform some operation on the current node
});

Apa yang berlaku di sini? Mari kita pecahkan:

• []: Ini ialah tatasusunan kosong. Ia tidak mempunyai tujuan sebenar dalam kod. Kehadirannya adalah semata-mata untuk menyediakan akses kepada kaedah forEach, yang merupakan prototaip tatasusunan.
• forEach: Kaedah forEach berulang pada setiap elemen dalam tatasusunan (atau objek seperti tatasusunan) dan memanggil fungsi yang ditentukan dengan tiga argumen: elemen, indeksnya dan tatasusunan itu sendiri.
• .call: Kaedah .call digunakan untuk memanggil fungsi dengan nilai yang ditentukan untuk kata kunci "ini". Dalam kes ini, ia menukar nilai "ini" bagi kaedah forEach daripada tatasusunan kosong kepada senarai tag . Ini membenarkan fungsi mengakses setiap elemen mengikut indeks.

Contoh Penggunaan

Mari kita lihat contoh untuk lebih memahami cara kod ini berfungsi:

const myNodeList = document.querySelectorAll('a');
[].forEach.call(myNodeList, function(el) {
  el.style.color = 'blue';
});

Dalam kod ini:

• Kami memperoleh senarai nod semua tag pada halaman.
• The [].forEach.call () kaedah menukar nilai "ini" kepada myNodeList, dan menggunakan kaedah forEach ke atas elemen .
• Dalam fungsi panggil balik, kita boleh mengakses setiap elemen menggunakan el dan mengubah suai gayanya ( dalam kes ini, menukar warnanya kepada biru).

Sintaks Alternatif untuk ES6

Dalam ES6 (ECMAScript 2015) dan seterusnya, yang lebih moden dan ringkas sintaks wujud untuk mencapai hasil yang sama:

[...document.querySelectorAll('a')].forEach(el => {
  el.style.color = 'blue';
});

Dalam sintaks yang dikemas kini ini, kami menggunakan operator hamparan (...) untuk menukar senarai nod kepada tatasusunan, yang kemudiannya boleh diulang menggunakan forEach.

Kesimpulan

Teknik [].forEach.call() menyediakan cara yang ringkas dan berkesan untuk menggunakan kaedah forEach pada objek seperti tatasusunan seperti senarai nod. Dengan menggunakan teknik ini, anda boleh melakukan operasi dengan mudah pada setiap elemen dalam senarai. Walau bagaimanapun, ingat bahawa dalam JavaScript moden, sintaks alternatif seperti operator spread mungkin menawarkan penyelesaian yang lebih elegan.

Atas ialah kandungan terperinci Mengapakah terdapat tatasusunan kosong dalam fungsi [].forEach.call() JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!