<p><img src="https://img.php.cn/upload/article/000/465/014/169378710644881.jpg" alt="比较 JavaScript 中迭代数组的 4 种方法"></p>
<p>如果您已经了解 JavaScript 数组的基础知识，那么是时候通过更高级的主题将您的技能提升到新的水平了。在本系列教程中，您将探索在 JavaScript 中使用数组进行编程的中级主题。</p>
<p>几乎在每个涉及数组的项目中，我们都必须执行迭代或循环数组的操作。您可能需要循环数组的原因有很多，例如将数组数据显示为输出或对其进行转换。</p>
<p>您可以使用许多方法在 JavaScript 中迭代数组。在本教程中，我们将了解所有这些，同时详细讨论每个的优点或缺点。</p>
<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>可以使用 <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>
<td>是</td>
<td>是</td>
<td>所有浏览器</td>
<td>对于稀疏数组有效，可以返回意外的（继承的）元素</td>
</tr>
</tbody>
</table>
<h2 id="toc-oxn2-basics-for-accessing-array-elements">访问数组元素的基础知识</h2>
<p>让我们从使用索引访问数组元素的基础知识开始。 JavaScript 中的数组索引从 0 开始。这意味着可以通过在代码中使用 <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">登录后复制</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> 循环将迭代变量初始化为 0，以从第一个元素开始循环。由于我们想要迭代整个数组，因此需要计算数组的长度，这可以使用 <code>length</code> 属性轻松完成。然后可以使用 <code>array_name[length - 1]</code> 访问数组中的最后一个元素。<p>
<code>for</code>以下代码片段向我们展示了如何使用 </p> 循环顺序循环遍历数组：<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">登录后复制</div></div>
<code><</code>) 而不是小于或等于运算符 (<code><=</code>请注意我们如何使用小于运算符 (</p>) 作为循环结束条件。<p>
<code>for</code> 循环有两个优点：它得到广泛支持，并且允许您通过 <code>break</code> 和 <code>continue</code> 语句控制循环流程。一旦找到所需内容，您就可以退出循环。当您处理异步代码时，<code>for</code>在循环数组时使用 </p> 循环有两个优点：它得到广泛支持，并且允许您通过 <code>break</code> 和 <code>continue</code> 语句控制循环流程。一旦找到所需内容，您就可以退出循环。当您处理异步代码时，<p> 循环也能很好地工作。</p>
<h2 id="toc-hpwd-iteating-using-the-foreach-method">缺点是它有点冗长，并且您可能偶尔会犯一些小错误。<code>forEach()</code>
</h2>使用 <p> 方法进行迭代<code>forEach()</code>
</p>您还可以使用内置的 <p> 方法在 JavaScript 中迭代数组。该方法接受一个回调函数作为其参数，该函数对每个数组元素执行一次。回调函数可以在其他地方定义，它可以是内联函数或箭头函数。</p>
<ol>回调函数可以接受三个不同的参数：<li>
</li>
<li>当前元素本身</li>
<li>当前元素的索引<code>forEach()</code>
</li>我们调用 </ol> 方法的数组<p>
<code>forEach()</code>
<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">登录后复制</div></div>
</p>如您所见，使用 <p> 方法使我们的代码更加简洁。这是使用回调函数的第二个参数的另一个示例。<code>forEach()</code> 非常适合对数组进行简单迭代。但是，不能使用 <code>break</code> 和 <code>continue</code> 中途退出循环并更改程序流程。使用 <code>forEach()</code>
<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">登录后复制</div></div>
</p>使用 <h2 id="toc-486q-iteating-using-the-forof-loop"> 非常适合对数组进行简单迭代。但是，不能使用 <code>break</code> 和 <code>continue</code> 中途退出循环并更改程序流程。使用 <code>for...of</code> 的另一个缺点是您无法通过此方法使用异步代码。</h2>
<p>使用 <code>for...of</code> 循环来迭代实现 <code>@@iterator</code> 方法的任何对象中的值。内置类型（例如 Array、String、Set 或 Map）可以使用 <code>for...of</code> 循环进行迭代</p>
<p>ES6标准为JavaScript添加了很多新功能。其中之一是迭代器和可迭代对象的概念。您可以使用 <code>for...of</code> 构造进行迭代有很多优点。例如，您也可以使用它来迭代其他内置可迭代类型。除此之外，它允许您使用 <code>break</code> 或 <code>continue</code> 循环来迭代实现 <code>@@iterator</code> 方法的任何对象中的值。内置类型（例如 Array、String、Set 或 Map）可以使用 </p> 循环来迭代它们的值。<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">登录后复制</div></div>
</p>使用 <h2 id="toc-ti5o-iteating-using-the-forin-loop"> 构造进行迭代有很多优点。例如，您也可以使用它来迭代其他内置可迭代类型。除此之外，它允许您使用 <code>break</code> 或 <code>continue</code> 语句跳出循环并控制程序流程。<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> 循环比其他方法更好地遍历的数组类型。例如， <p> 循环将迭代稀疏数组中的所有空槽，而 <code>Object.hasOwn()</code> 循环则不会。</p>
<h2 id="toc-4vpg-final-thoughts">这是使用 </h2> 循环迭代稀疏数组的示例：<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">登录后复制</div></div>
<code>for</code> 循环来迭代数组。它允许您借助 <code>break</code> 和 <code>Continue</code>您可能已经注意到，我们使用了一个名为 的静态方法来检查查询对象的指定属性是否确实是其自己的属性。🎜
🎜最终想法🎜
🎜您始终可以使用常规 🎜 循环来迭代数组。它允许您借助 <code>break</code> 和 <code>Continue</code> 关键字来控制程序流程，同时还支持异步代码。另一方面，它确实要求您小心差一错误。🎜<p><code>forEach()</code> 方法提供了一种更短的循环数组的方法，但它不适用于异步代码。您也无法使用 <code>break</code> 和 <code>continue</code> 跳出循环或控制程序流程。</p>
<p><code>for...of</code> 循环给了我们两全其美的好处。我们可以完全控制程序流程，并且它也适用于异步代码。也无需担心差一错误。</p>
<p>最后，<code>for...in</code> 循环不是循环数组的推荐方法。但是，如果您正在遍历的数组非常稀疏，那么它可能会很有用。</p>
<p>本文的缩略图是使用 OpenAI 的 DALL-E 2 生成的。</p>
以上是比较 JavaScript 中迭代数组的 4 种方法的详细内容。更多信息请关注PHP中文网其他相关文章！
