Membandingkan 4 Cara untuk Mengulang Tatasusunan dalam JavaScript

Jika anda sudah mengetahui asas tatasusunan JavaScript, sudah tiba masanya untuk membawa kemahiran anda ke peringkat seterusnya dengan topik yang lebih lanjut. Dalam siri tutorial ini, anda akan meneroka topik pengaturcaraan peringkat pertengahan dengan tatasusunan dalam JavaScript.

Dalam hampir setiap projek yang melibatkan tatasusunan, kami perlu melaksanakan operasi seperti lelaran atau gelung pada tatasusunan. Terdapat banyak sebab mengapa anda mungkin perlu mengulangi tatasusunan, seperti memaparkan data tatasusunan sebagai output atau menukarnya.

Anda boleh mengulang tatasusunan dalam JavaScript menggunakan banyak kaedah. Dalam tutorial ini, kami akan melihat kesemuanya sambil membincangkan kebaikan atau keburukan setiap satu secara terperinci.

Kaedah			Kelebihan	Keburukan
untuk gelung			Anda boleh menggunakan break untuk keluar awal, sesuai untuk kod tak segerak, disokong oleh penyemak imbas umumbreak 提前退出，适用于异步代码，通用浏览器支持	冗长且容易出错
forEach()方法			简洁易读	没有异步支持，没有提前退出 break
for...of循环			与其他可迭代类型一起使用，允许提前退出，语法减少错误	旧版浏览器支持较少
for...in循环			在稀疏数组上高效，允许提前退出	可能返回意外的继承元素

Lama dan mudah ralat kaedahforEach()Ringkas dan mudah dibaca

方法	带有中断和继续的流控制？	可以使用异步代码吗？	浏览器支持	注释
for循环	是	是	所有浏览器	更详细的语法，一对一错误
forEach()方法	没有	没有	现代浏览器	简洁并链接在其他函数之后（即map）
for...of循环	是的	是	现代浏览器	简单的语法减少错误
for...in

🎜Tiada sokongan tak segerak, tiada break keluar awal 🎜 🎜 🎜 🎜untuk...dari gelung🎜 🎜 🎜 🎜 🎜 🎜Gunakan dengan jenis lain yang boleh diubah, membenarkan keluar awal, sintaks mengurangkan ralat🎜 🎜Pelayar lama kurang sokongan🎜 🎜 🎜 🎜untuk...dalam gelung🎜 🎜 🎜 🎜 🎜 🎜Cekap pada susunan yang jarang, membolehkan keluar awal🎜 🎜Mungkin mengembalikan unsur warisan yang tidak dijangka🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜Kaedah🎜 🎜Kawalan aliran dengan gangguan dan sambung semula? 🎜 🎜Bolehkah saya menggunakan kod tak segerak? 🎜 🎜Sokongan pelayar🎜 🎜Nota🎜 🎜 🎜 🎜 🎜 🎜untuk gelung🎜 🎜Ya🎜 🎜Ya🎜 🎜Semua pelayar🎜 🎜Sintaks yang lebih terperinci, ralat satu sama satu🎜 🎜 🎜 🎜 kaedahforEach()🎜 🎜 🎜Tidak 🎜 🎜 🎜Tidak 🎜 🎜Pelayar Moden🎜 🎜Ringkas dan dirantai selepas fungsi lain (iaitu peta)🎜 🎜 🎜 🎜untuk...dari gelung🎜 🎜 🎜Ya🎜 🎜 🎜Ya🎜 🎜Pelayar Moden🎜 🎜Sintaks mudah mengurangkan ralat🎜 🎜 🎜 🎜untuk...dalam gelung🎜 🎜Ya🎜 🎜Ya🎜 🎜Semua pelayar🎜 🎜Sah untuk tatasusunan jarang, boleh mengembalikan elemen yang tidak dijangka (diwarisi)🎜 🎜 🎜 🎜

Asas mengakses elemen tatasusunan

Mari kita mulakan dengan asas mengakses elemen tatasusunan menggunakan indeks. Pengindeksan tatasusunan dalam JavaScript bermula dari 0. Ini bermakna elemen pertama boleh diakses dengan menggunakan array_name[0] dalam kod. Begitu juga, untuk tatasusunan yang mengandungi elemen n, anda boleh menggunakan array_name[n - 1] untuk mengakses elemen terakhir. array_name[0] 来访问第一个元素。同样，对于包含 n 元素的数组，可以使用 array_name[n - 1] 访问最后一个元素。

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

let first = animals[0];

let last = animals[4];

console.log(first);
// Outputs: Fox

console.log(last);
// Outputs: Zebra

使用 for 循环进行迭代

循环数组的最常见方法之一是 for 循环。 for 循环将迭代变量初始化为 0，以从第一个元素开始循环。由于我们想要迭代整个数组，因此需要计算数组的长度，这可以使用 length 属性轻松完成。然后可以使用 array_name[length - 1] 访问数组中的最后一个元素。

以下代码片段向我们展示了如何使用 for 循环顺序循环遍历数组：

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

let animal_count = animals.length;

for(let i = 0; i < animal_count; i++) {
  console.log(animals[i]);
}
/* Outputs:
Fox
Dog
Lion
Cat
Zebra
*/

请注意我们如何使用小于运算符 () 而不是小于或等于运算符 (<code>) 作为循环结束条件。

在循环数组时使用 for 循环有两个优点：它得到广泛支持，并且允许您通过 break 和 continue 语句控制循环流程。一旦找到所需内容，您就可以退出循环。当您处理异步代码时，for 循环也能很好地工作。

缺点是它有点冗长，并且您可能偶尔会犯一些小错误。

使用 forEach() 方法进行迭代

您还可以使用内置的 forEach() 方法在 JavaScript 中迭代数组。该方法接受一个回调函数作为其参数，该函数对每个数组元素执行一次。回调函数可以在其他地方定义，它可以是内联函数或箭头函数。

回调函数可以接受三个不同的参数：

1. 当前元素本身
2. 当前元素的索引
3. 我们调用 forEach() 方法的数组

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

animals.forEach(animal => console.log(animal));
/* Outputs:
Fox
Dog
Lion
Cat
Zebra
*/

如您所见，使用 forEach() 方法使我们的代码更加简洁。这是使用回调函数的第二个参数的另一个示例。

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

animals.forEach((animal, idx) => {
  console.log(`Animal ${idx + 1}: ${animal}`);
});
/* Outputs:
Animal 1: Fox
Animal 2: Dog
Animal 3: Lion
Animal 4: Cat
Animal 5: Zebra
*/

使用 forEach() 非常适合对数组进行简单迭代。但是，不能使用 break 和 continue 中途退出循环并更改程序流程。使用 forEach() 的另一个缺点是您无法通过此方法使用异步代码。

使用 for...of 循环进行迭代

ES6标准为JavaScript添加了很多新功能。其中之一是迭代器和可迭代对象的概念。您可以使用 for...of 循环来迭代实现 @@iterator 方法的任何对象中的值。内置类型（例如 Array、String、Set 或 Map）可以使用 for...of 循环来迭代它们的值。

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

for(let animal of animals) {
  console.log(animal);
}
/* Outputs:
Fox
Dog
Lion
Cat
Zebra
*/

使用 for...of 构造进行迭代有很多优点。例如，您也可以使用它来迭代其他内置可迭代类型。除此之外，它允许您使用 break 或 continue 语句跳出循环并控制程序流程。

唯一的潜在缺点是浏览器支持稍少，但这完全取决于您的目标受众。

使用 for...in 循环进行迭代

您还可以使用 for...in 语句循环遍历数组。这将循环遍历对象的所有可枚举字符串属性。这还包括继承的可枚举属性。

我想在这里提一下，不建议使用 for...in 语句迭代循环。这是因为，正如我之前提到的，该语句将迭代所有整数和非整数属性，即使它们是继承的。当我们迭代数组时，我们通常只对整数键感兴趣。

for...in 循环的遍历顺序定义良好，它从非负整数键的遍历开始。非负整数键按值升序遍历。然后按照创建的顺序遍历其他字符串键。

稀疏数组是一种可以用 for...in 循环比其他方法更好地遍历的数组类型。例如， for...of 循环将迭代稀疏数组中的所有空槽，而 for...in 循环则不会。

这是使用 for...in 循环迭代稀疏数组的示例：

let words = new Array(10000);

words[0] = "pie";
words[548] = "language";
words[3497] = "hungry";

for(let idx in words) {
  if(Object.hasOwn(words, idx)) {
    console.log(`Position ${idx}: ${words[idx]}`);
  }
}
/* Outputs:
Position 0: pie
Position 548: language
Position 3497: hungry
*/

您可能已经注意到，我们使用了一个名为 Object.hasOwn() 的静态方法来检查查询对象的指定属性是否确实是其自己的属性。

最终想法

您始终可以使用常规 for 循环来迭代数组。它允许您借助 break 和 Continue rrreee

Gunakan gelung for untuk mengulang 🎜Salah satu cara yang paling biasa untuk menggelung melalui tatasusunan ialah gelung for. Gelung for memulakan pembolehubah lelaran kepada 0 untuk memulakan gelung daripada elemen pertama. Memandangkan kita ingin mengulangi keseluruhan tatasusunan, kita perlu mengira panjang tatasusunan, yang boleh dilakukan dengan mudah menggunakan atribut length. Elemen terakhir dalam tatasusunan kemudiannya boleh diakses menggunakan array_name[length - 1]. 🎜 🎜Coretan kod berikut menunjukkan kepada kita cara menggunakan gelung for untuk menggelung secara berurutan melalui tatasusunan: 🎜 rrreee 🎜Perhatikan cara kami menggunakan operator kurang daripada () dan bukannya operator kurang daripada atau sama () sebagai keadaan akhir gelung. 🎜 🎜Menggunakan gelung <code>for apabila menggelung ke atas tatasusunan mempunyai dua kelebihan: ia disokong secara meluas dan membolehkan anda mengawal aliran gelung melalui break dan teruskan kenyataan . Sebaik sahaja anda menemui perkara yang anda cari, anda boleh keluar dari gelung. for gelung juga berfungsi dengan baik apabila anda berurusan dengan kod tak segerak. 🎜 🎜Kelemahannya ialah ia agak panjang dan anda mungkin membuat beberapa kesilapan kecil sekali-sekala. 🎜

Gunakan kaedah forEach() untuk mengulang🎜 🎜Anda juga boleh mengulang tatasusunan dalam JavaScript menggunakan kaedah forEach() terbina dalam. Kaedah ini menerima sebagai hujahnya fungsi panggil balik yang dilaksanakan sekali untuk setiap elemen tatasusunan. Fungsi panggil balik boleh ditakrifkan di tempat lain, ia boleh menjadi fungsi sebaris atau fungsi anak panah. 🎜 🎜Fungsi panggil balik boleh menerima tiga parameter berbeza: 🎜

1. Elemen semasa itu sendiri
2. Indeks unsur semasa
3. Tatasusunan yang kami panggil kaedah forEach()

rrreee 🎜Seperti yang anda lihat, menggunakan kaedah forEach() menjadikan kod kami lebih bersih. Berikut ialah satu lagi contoh menggunakan parameter kedua bagi fungsi panggil balik. 🎜 rrreee 🎜Menggunakan forEach() adalah bagus untuk lelaran mudah ke atas tatasusunan. Walau bagaimanapun, anda tidak boleh menggunakan break dan continue untuk keluar dari gelung di tengah jalan dan menukar aliran program. Satu lagi kelemahan menggunakan forEach() ialah anda tidak boleh menggunakan kod tak segerak dengan kaedah ini. 🎜

Gunakan for...of gelung untuk lelaran🎜 🎜Standard ES6 menambahkan banyak ciri baharu pada JavaScript. Salah satunya ialah konsep iterator dan objek boleh lelaran. Anda boleh menggunakan gelung for...of untuk mengulang nilai dalam mana-mana objek yang melaksanakan kaedah @@iterator. Jenis terbina dalam (seperti Tatasusunan, Rentetan, Set atau Peta) boleh menggunakan gelung for...of untuk mengulang nilainya. 🎜 rrreee 🎜Terdapat banyak kelebihan untuk mengulang menggunakan binaan for...of. Sebagai contoh, anda juga boleh menggunakannya untuk lelaran ke atas jenis lelaran terbina dalam yang lain. Antara lain, ia membolehkan anda keluar daripada gelung dan mengawal aliran program menggunakan penyataan break atau continue. 🎜 🎜Satu-satunya kelemahan yang berpotensi ialah sokongan penyemak imbas yang kurang sedikit, tetapi itu semua bergantung pada khalayak sasaran anda. 🎜

Gunakan for...in gelung untuk mengulang🎜 🎜Anda juga boleh menggunakan pernyataan for...in untuk menggelungkan tatasusunan. Ini akan mengulangi semua sifat rentetan objek yang boleh dikira. Ini juga termasuk harta terbilang yang diwarisi. 🎜 🎜Saya ingin menyatakan di sini bahawa tidak disyorkan untuk menggunakan pernyataan for...in untuk mengulang gelung. Ini kerana, seperti yang saya nyatakan sebelum ini, pernyataan ini akan berulang ke atas semua sifat integer dan bukan integer, walaupun ia diwarisi. Apabila kita mengulangi tatasusunan, kita biasanya hanya berminat dengan kunci integer. 🎜 🎜untuk...dalam

Susunan traversal gelung ditakrifkan dengan baik, ia bermula dengan traversal kekunci integer bukan negatif. Kekunci integer bukan negatif dilalui dalam susunan nilai menaik. Kemudian ulangi kekunci rentetan yang lain mengikut susunan ia dicipta. 🎜 🎜 Tatasusunan jarang ialah jenis tatasusunan yang boleh dilalui dengan lebih baik dengan gelung untuk...dalam berbanding kaedah lain. Contohnya, gelung for...of akan berulang ke atas semua slot kosong dalam tatasusunan yang jarang, manakala gelung for...in tidak akan. 🎜 🎜Berikut ialah contoh menggunakan gelung for...in untuk mengulangi tatasusunan yang jarang: 🎜 rrreee 🎜Anda mungkin perasan bahawa kami menggunakan kaedah statik yang dipanggil Object.hasOwn() untuk menyemak sama ada sifat yang ditentukan bagi objek pertanyaan sememangnya hartanya sendiri. 🎜

Fikiran Akhir🎜 🎜Anda sentiasa boleh menggunakan gelung for biasa untuk mengulang tatasusunan. Ia membolehkan anda mengawal aliran program dengan bantuan kata kunci break dan Continue, dan juga menyokong kod tak segerak. Sebaliknya, ia memerlukan anda berhati-hati tentang satu kesilapan. 🎜

Kaedah forEach() menyediakan cara yang lebih pendek untuk menggelung melalui tatasusunan, tetapi ia tidak sesuai untuk kod tak segerak. Anda juga tidak boleh menggunakan break dan continue untuk keluar daripada gelung atau mengawal aliran program. forEach() 方法提供了一种更短的循环数组的方法，但它不适用于异步代码。您也无法使用 break 和 continue 跳出循环或控制程序流程。

for...of 循环给了我们两全其美的好处。我们可以完全控制程序流程，并且它也适用于异步代码。也无需担心差一错误。

最后，for...in

for...of Gelung memberikan kita yang terbaik dari kedua-dua dunia. Kami mempunyai kawalan penuh ke atas aliran program, dan ia berfungsi dengan kod tak segerak juga. Tidak perlu risau tentang terlepas satu rentak.

Akhir sekali, gelung for...in bukanlah cara yang disyorkan untuk menggelungkan pada tatasusunan. Walau bagaimanapun, ia boleh berguna jika tatasusunan yang anda gelungkan sangat jarang. #🎜🎜# #🎜🎜#Lakaran kecil untuk artikel ini dijana menggunakan DALL-E 2 OpenAI. #🎜🎜#

Atas ialah kandungan terperinci Membandingkan 4 Cara untuk Mengulang Tatasusunan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!