Membandingkan 4 Cara untuk Mengulang Tatasusunan dalam JavaScript

<p><img src="https://img.php.cn/upload/article/000/465/014/169378710644881.jpg" alt="比较 JavaScript 中迭代数组的 4 种方法"></p> <p>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. </p> <p>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. </p> <p>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. </p> <table> <thead> <tr> <th>Kaedah</th> <th> </th> <th> </th> <th>Kelebihan</th> <th>Keburukan</th> </tr> </thead> <tbody> <tr> <td>untuk gelung</td> <td> </td> <td> </td> <td>Anda boleh menggunakan <code>break</code> untuk keluar awal, sesuai untuk kod tak segerak, disokong oleh penyemak imbas umum<code>break</code> 提前退出，适用于异步代码，通用浏览器支持</td> <td>冗长且容易出错</td> </tr> <tr> <td> <code>forEach()</code>方法</td> <td> </td> <td> </td> <td>简洁易读</td> <td>没有异步支持，没有提前退出 <code>break</code> </td> </tr> <tr> <td> <code>for...of</code>循环</td> <td> </td> <td> </td> <td>与其他可迭代类型一起使用，允许提前退出，语法减少错误</td> <td>旧版浏览器支持较少</td> </tr> <tr> <td> <code>for...in</code>循环</td> <td> </td> <td> </td> <td>在稀疏数组上高效，允许提前退出</td> <td>可能返回意外的继承元素</td> </tr> </tbody> </table> <table> <thead> <tr> <th>方法</th> <th>带有中断和继续的流控制？</th> <th>可以使用异步代码吗？</th> <th>浏览器支持</th> <th>注释</th> </tr> </thead> <tbody> <tr> <td>for循环</td> <td>是</td> <td>是</td> <td>所有浏览器</td> <td>更详细的语法，一对一错误</td> </tr> <tr> <td> <code>forEach()</code>方法</td> <td> <p>没有</p> </td> <td>没有</td> <td>现代浏览器</td> <td>简洁并链接在其他函数之后（即<code>map</code>）</td> </tr> <tr> <td> <code>for...of</code>循环</td> <td> <p>是的</p> </td> <td>是</td> <td>现代浏览器</td> <td>简单的语法减少错误</td> </tr> <tr> <td> <code>for...in</code> </td>Lama dan mudah ralat<td> </td> <td> </td> kaedah<code>forEach()</code><td> </td> <td> </td> </tr> </tbody>Ringkas dan mudah dibaca</table> 🎜Tiada sokongan tak segerak, tiada <code>break</code> keluar awal 🎜 🎜 🎜 🎜<kod>untuk...dari gelung🎜 🎜 🎜 🎜 🎜 🎜Gunakan dengan jenis lain yang boleh diubah, membenarkan keluar awal, sintaks mengurangkan ralat🎜 🎜Pelayar lama kurang sokongan🎜 🎜 🎜 🎜<kod>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🎜 🎜 🎜 🎜 kaedah<code>forEach()</code>🎜 🎜 🎜Tidak 🎜 🎜 🎜Tidak 🎜 🎜Pelayar Moden🎜 🎜Ringkas dan dirantai selepas fungsi lain (iaitu <kod>peta)🎜 🎜 🎜 🎜<kod>untuk...dari gelung🎜 🎜 🎜Ya🎜 🎜 🎜Ya🎜 🎜Pelayar Moden🎜 🎜Sintaks mudah mengurangkan ralat🎜 🎜 🎜 🎜<kod>untuk...dalam gelung🎜 🎜Ya🎜 🎜Ya🎜 🎜Semua pelayar🎜 🎜Sah untuk tatasusunan jarang, boleh mengembalikan elemen yang tidak dijangka (diwarisi)🎜 🎜 🎜 🎜<h2 id="toc-oxn2-basics-for-accessing-array-elements">Asas mengakses elemen tatasusunan</h2> <p>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 <code>array_name[0]</code> dalam kod. Begitu juga, untuk tatasusunan yang mengandungi elemen <code>n</code>, anda boleh menggunakan <code>array_name[n - 1]</code> untuk mengakses elemen terakhir. <code>array_name[0]</code> 来访问第一个元素。同样，对于包含 <code>n</code> 元素的数组，可以使用 <code>array_name[n - 1]</code> 访问最后一个元素。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">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 </pre><div class="contentsignin">Salin selepas log masuk</div></div> <h2 id="toc-a4xj-iteating-using-a-for-loop">使用 <code>for</code> 循环进行迭代</h2> <p>循环数组的最常见方法之一是 <code>for</code> 循环。 <code>for</code> 循环将迭代变量初始化为 0，以从第一个元素开始循环。由于我们想要迭代整个数组，因此需要计算数组的长度，这可以使用 <code>length</code> 属性轻松完成。然后可以使用 <code>array_name[length - 1]</code> 访问数组中的最后一个元素。</p> <p>以下代码片段向我们展示了如何使用 <code>for</code> 循环顺序循环遍历数组：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">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 */ </pre><div class="contentsignin">Salin selepas log masuk</div></div> <p>请注意我们如何使用小于运算符 (<code><</code>) 而不是小于或等于运算符 (<code><=</code>) 作为循环结束条件。</p> <p>在循环数组时使用 <code>for</code> 循环有两个优点：它得到广泛支持，并且允许您通过 <code>break</code> 和 <code>continue</code> 语句控制循环流程。一旦找到所需内容，您就可以退出循环。当您处理异步代码时，<code>for</code> 循环也能很好地工作。</p> <p>缺点是它有点冗长，并且您可能偶尔会犯一些小错误。</p> <h2 id="toc-hpwd-iteating-using-the-foreach-method">使用 <code>forEach()</code> 方法进行迭代</h2> <p>您还可以使用内置的 <code>forEach()</code> 方法在 JavaScript 中迭代数组。该方法接受一个回调函数作为其参数，该函数对每个数组元素执行一次。回调函数可以在其他地方定义，它可以是内联函数或箭头函数。</p> <p>回调函数可以接受三个不同的参数：</p> <ol> <li>当前元素本身</li> <li>当前元素的索引</li> <li>我们调用 <code>forEach()</code> 方法的数组</li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"]; animals.forEach(animal => console.log(animal)); /* Outputs: Fox Dog Lion Cat Zebra */ </pre><div class="contentsignin">Salin selepas log masuk</div></div> <p>如您所见，使用 <code>forEach()</code> 方法使我们的代码更加简洁。这是使用回调函数的第二个参数的另一个示例。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">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 */ </pre><div class="contentsignin">Salin selepas log masuk</div></div> <p>使用 <code>forEach()</code> 非常适合对数组进行简单迭代。但是，不能使用 <code>break</code> 和 <code>continue</code> 中途退出循环并更改程序流程。使用 <code>forEach()</code> 的另一个缺点是您无法通过此方法使用异步代码。</p> <h2 id="toc-486q-iteating-using-the-forof-loop">使用 <code>for...of</code> 循环进行迭代</h2> <p>ES6标准为JavaScript添加了很多新功能。其中之一是迭代器和可迭代对象的概念。您可以使用 <code>for...of</code> 循环来迭代实现 <code>@@iterator</code> 方法的任何对象中的值。内置类型（例如 Array、String、Set 或 Map）可以使用 <code>for...of</code> 循环来迭代它们的值。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"]; for(let animal of animals) { console.log(animal); } /* Outputs: Fox Dog Lion Cat Zebra */ </pre><div class="contentsignin">Salin selepas log masuk</div></div> <p>使用 <code>for...of</code> 构造进行迭代有很多优点。例如，您也可以使用它来迭代其他内置可迭代类型。除此之外，它允许您使用 <code>break</code> 或 <code>continue</code> 语句跳出循环并控制程序流程。</p> <p>唯一的潜在缺点是浏览器支持稍少，但这完全取决于您的目标受众。</p> <h2 id="toc-ti5o-iteating-using-the-forin-loop">使用 <code>for...in</code> 循环进行迭代</h2> <p>您还可以使用 <code>for...in</code> 语句循环遍历数组。这将循环遍历对象的所有可枚举字符串属性。这还包括继承的可枚举属性。</p> <p>我想在这里提一下，不建议使用 <code>for...in</code> 语句迭代循环。这是因为，正如我之前提到的，该语句将迭代所有整数和非整数属性，即使它们是继承的。当我们迭代数组时，我们通常只对整数键感兴趣。</p> <p><code>for...in</code> 循环的遍历顺序定义良好，它从非负整数键的遍历开始。非负整数键按值升序遍历。然后按照创建的顺序遍历其他字符串键。</p> <p>稀疏数组是一种可以用 <code>for...in</code> 循环比其他方法更好地遍历的数组类型。例如， <code>for...of</code> 循环将迭代稀疏数组中的所有空槽，而 <code>for...in</code> 循环则不会。</p> <p>这是使用 <code>for...in</code> 循环迭代稀疏数组的示例：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">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 */ </pre><div class="contentsignin">Salin selepas log masuk</div></div> <p>您可能已经注意到，我们使用了一个名为 <code>Object.hasOwn()</code> 的静态方法来检查查询对象的指定属性是否确实是其自己的属性。</p> <h2 id="toc-4vpg-final-thoughts">最终想法</h2> <p>您始终可以使用常规 <code>for</code> 循环来迭代数组。它允许您借助 <code>break</code> 和 <code>Continue</code> rrreee </p> <h2 id="toc-a4xj-iteating-using-a-for-loop">Gunakan gelung <code>for</code> untuk mengulang 🎜Salah satu cara yang paling biasa untuk menggelung melalui tatasusunan ialah gelung <code>for</code>. Gelung <code>for</code> 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 <code>length</code>. Elemen terakhir dalam tatasusunan kemudiannya boleh diakses menggunakan <code>array_name[length - 1]</code>. 🎜 🎜Coretan kod berikut menunjukkan kepada kita cara menggunakan gelung <code>for</code> untuk menggelung secara berurutan melalui tatasusunan: 🎜 rrreee 🎜Perhatikan cara kami menggunakan operator kurang daripada (<kod>) dan bukannya operator kurang daripada atau sama (<code>) sebagai keadaan akhir gelung. 🎜 🎜Menggunakan gelung <code>for</code> apabila menggelung ke atas tatasusunan mempunyai dua kelebihan: ia disokong secara meluas dan membolehkan anda mengawal aliran gelung melalui <code>break</code> dan <code> teruskan</code> kenyataan . Sebaik sahaja anda menemui perkara yang anda cari, anda boleh keluar dari gelung. <code>for</code> 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. 🎜 <h2 id="toc-hpwd-iteating-using-the-foreach-method">Gunakan kaedah <code>forEach()</code> untuk mengulang🎜 🎜Anda juga boleh mengulang tatasusunan dalam JavaScript menggunakan kaedah <code>forEach()</code> 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: 🎜 <ol> <li>Elemen semasa itu sendiri</li> <li>Indeks unsur semasa</li> <li> Tatasusunan yang kami panggil kaedah <code>forEach()</code> </li> </ol> rrreee 🎜Seperti yang anda lihat, menggunakan kaedah <code>forEach()</code> menjadikan kod kami lebih bersih. Berikut ialah satu lagi contoh menggunakan parameter kedua bagi fungsi panggil balik. 🎜 rrreee 🎜Menggunakan <code>forEach()</code> adalah bagus untuk lelaran mudah ke atas tatasusunan. Walau bagaimanapun, anda tidak boleh menggunakan <code>break</code> dan <code>continue</code> untuk keluar dari gelung di tengah jalan dan menukar aliran program. Satu lagi kelemahan menggunakan <code>forEach()</code> ialah anda tidak boleh menggunakan kod tak segerak dengan kaedah ini. 🎜 <h2 id="toc-486q-iteating-using-the-forof-loop">Gunakan <code>for...of</code> gelung untuk lelaran🎜 🎜Standard ES6 menambahkan banyak ciri baharu pada JavaScript. Salah satunya ialah konsep iterator dan objek boleh lelaran. Anda boleh menggunakan gelung <code>for...of</code> untuk mengulang nilai dalam mana-mana objek yang melaksanakan kaedah <code>@@iterator</code>. Jenis terbina dalam (seperti Tatasusunan, Rentetan, Set atau Peta) boleh menggunakan gelung <code>for...of</code> untuk mengulang nilainya. 🎜 rrreee 🎜Terdapat banyak kelebihan untuk mengulang menggunakan binaan <code>for...of</code>. 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 <code>break</code> atau <code>continue</code>. 🎜 🎜Satu-satunya kelemahan yang berpotensi ialah sokongan penyemak imbas yang kurang sedikit, tetapi itu semua bergantung pada khalayak sasaran anda. 🎜 <h2 id="toc-ti5o-iteating-using-the-forin-loop">Gunakan <code>for...in</code> gelung untuk mengulang🎜 🎜Anda juga boleh menggunakan pernyataan <code>for...in</code> 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 <code>for...in</code> 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. 🎜 🎜<kod>untuk...dalam</kod> </h2> </h2> </h2></code> 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 <code>untuk...dalam</code> berbanding kaedah lain. Contohnya, gelung <code>for...of</code> akan berulang ke atas semua slot kosong dalam tatasusunan yang jarang, manakala gelung <code>for...in</code> tidak akan. 🎜 🎜Berikut ialah contoh menggunakan gelung <code>for...in</code> untuk mengulangi tatasusunan yang jarang: 🎜 rrreee 🎜Anda mungkin perasan bahawa kami menggunakan kaedah statik yang dipanggil <code>Object.hasOwn()</code> untuk menyemak sama ada sifat yang ditentukan bagi objek pertanyaan sememangnya hartanya sendiri. 🎜 <h2 id="toc-4vpg-final-thoughts">Fikiran Akhir🎜 🎜Anda sentiasa boleh menggunakan gelung <code>for</code> biasa untuk mengulang tatasusunan. Ia membolehkan anda mengawal aliran program dengan bantuan kata kunci <code>break</code> dan <code>Continue</code>, dan juga menyokong kod tak segerak. Sebaliknya, ia memerlukan anda berhati-hati tentang satu kesilapan. 🎜</h2> <p>Kaedah <code>forEach()</code> menyediakan cara yang lebih pendek untuk menggelung melalui tatasusunan, tetapi ia tidak sesuai untuk kod tak segerak. Anda juga tidak boleh menggunakan <code>break</code> dan <code>continue</code> untuk keluar daripada gelung atau mengawal aliran program. <code>forEach()</code> 方法提供了一种更短的循环数组的方法，但它不适用于异步代码。您也无法使用 <code>break</code> 和 <code>continue</code> 跳出循环或控制程序流程。</p> <p><code>for...of</code> 循环给了我们两全其美的好处。我们可以完全控制程序流程，并且它也适用于异步代码。也无需担心差一错误。</p> <p>最后，<code>for...in</code> </p> <code>for...of</code> 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. <p> </p>Akhir sekali, gelung <code>for...in</code> 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. #🎜🎜#</kod> </h2></kod></kod></kod></kod></kod>

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!