如果您已经了解 JavaScript 数组的基础知识,那么是时候通过更高级的主题将您的技能提升到新的水平了。在本系列教程中,您将探索在 JavaScript 中使用数组进行编程的中级主题。
几乎在每个涉及数组的项目中,我们都必须执行迭代或循环数组的操作。您可能需要循环数组的原因有很多,例如将数组数据显示为输出或对其进行转换。
您可以使用许多方法在 JavaScript 中迭代数组。在本教程中,我们将了解所有这些,同时详细讨论每个的优点或缺点。
方法 | 优点 | 缺点 | ||
---|---|---|---|---|
for循环 | 可以使用 break 提前退出,适用于异步代码,通用浏览器支持 |
冗长且容易出错 | ||
forEach() 方法 |
简洁易读 | 没有异步支持,没有提前退出 break
|
||
for...of 循环 |
与其他可迭代类型一起使用,允许提前退出,语法减少错误 | 旧版浏览器支持较少 | ||
for...in 循环 |
在稀疏数组上高效,允许提前退出 | 可能返回意外的继承元素 |
方法 | 带有中断和继续的流控制? | 可以使用异步代码吗? | 浏览器支持 | 注释 |
---|---|---|---|---|
for循环 | 是 | 是 | 所有浏览器 | 更详细的语法,一对一错误 |
forEach() 方法 |
没有 |
没有 | 现代浏览器 | 简洁并链接在其他函数之后(即map ) |
for...of 循环 |
是的 |
是 | 现代浏览器 | 简单的语法减少错误 |
for...in 循环 |
是 | 是 | 所有浏览器 | 对于稀疏数组有效,可以返回意外的(继承的)元素 |
访问数组元素的基础知识
让我们从使用索引访问数组元素的基础知识开始。 JavaScript 中的数组索引从 0 开始。这意味着可以通过在代码中使用 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 */
请注意我们如何使用小于运算符 () 而不是小于或等于运算符 (
) 作为循环结束条件。
在循环数组时使用 for
循环有两个优点:它得到广泛支持,并且允许您通过 break
和 continue
语句控制循环流程。一旦找到所需内容,您就可以退出循环。当您处理异步代码时,for
循环也能很好地工作。
缺点是它有点冗长,并且您可能偶尔会犯一些小错误。
使用 forEach()
方法进行迭代
您还可以使用内置的 forEach()
方法在 JavaScript 中迭代数组。该方法接受一个回调函数作为其参数,该函数对每个数组元素执行一次。回调函数可以在其他地方定义,它可以是内联函数或箭头函数。
回调函数可以接受三个不同的参数:
- 当前元素本身
- 当前元素的索引
- 我们调用
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
关键字来控制程序流程,同时还支持异步代码。另一方面,它确实要求您小心差一错误。
forEach()
方法提供了一种更短的循环数组的方法,但它不适用于异步代码。您也无法使用 break
和 continue
跳出循环或控制程序流程。
for...of
循环给了我们两全其美的好处。我们可以完全控制程序流程,并且它也适用于异步代码。也无需担心差一错误。
最后,for...in
循环不是循环数组的推荐方法。但是,如果您正在遍历的数组非常稀疏,那么它可能会很有用。
本文的缩略图是使用 OpenAI 的 DALL-E 2 生成的。
以上就是比较 JavaScript 中迭代数组的 4 种方法的详细内容,更多请关注编程之家其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。