Javascript中如何循环(常用方法推荐)

 更新时间:2025年04月17日 14:35:02   作者:流泪兔兔头  
在JavaScript中,遍历集合(如数组、对象、Map和Set等)有多种方式,下面给大家分享几种常用的方法来讲解Javascript中如何循环,感兴趣的朋友一起看看吧

在JavaScript中,遍历集合(如数组、对象、Map和Set等)有多种方式。以下是一些常用的方法:

数组(Array)

for 循环

传统循环,适用于所有版本的JavaScript。

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

forEach 方法

ES5 引入,用于遍历数组元素。

array.forEach((element, index) => {
  console.log(element);
});

for…of 循环

ES6 引入,用于遍历可迭代对象(包括数组)。

for (const element of array) {
  console.log(element);
}

map 方法

创建一个新数组,其结果是对调用数组中的每个元素执行提供的函数的结果。

const newArray = array.map(element => /* ... */);

filter 方法

创建一个新数组, 包含通过所提供函数实现的测试的所有元素。

reduce 方法

对数组中的每个元素执行一个由您提供的reducer函数(升序),将其结果汇总为单个返回值。

some 和 every 方法

  • some: 测试数组中的某些元素是否至少有一个满足提供的函数。
  • every: 测试数组中的所有元素是否都满足提供的函数。

对象(Object)

for…in 循环

遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

for (const key in object) {
  if (object.hasOwnProperty(key)) {
    console.log(object[key]);
  }
}

Object.keys(), Object.values(), Object.entries()

这些方法返回一个包含对象键名、键值或键值对的数组,可以结合数组的遍历方法使用。

Map

for…of 循环

可以直接遍历Map的键值对。

for (const [key, value] of map) {
  console.log(key, value);
}

forEach 方法

类似于数组的forEach,但专门针对Map设计。

map.forEach((value, key) => {
  console.log(key, value);
});

Set

for…of 循环

直接遍历Set中的值。

for (const value of set) {
  console.log(value);
}

forEach 方法

与Map类似,Set也有自己的forEach方法。

set.forEach(value => {
  console.log(value);
});

这些是遍历不同类型的集合时最常用的几种方法。选择哪种方法取决于你的具体需求以及你所使用的JavaScript环境。

以下是对各种循环类型的总结 数组(Array)

for 循环

    • 优点: 灵活性高,适用于所有版本的JavaScript;可以方便地控制循环逻辑。
    • 缺点: 代码量相对较多,不如一些更高阶的方法简洁。

forEach 方法

  • 优点: 语法简洁,易于阅读;适合于不需要返回新数组或修改原有数组的情况。
  • 缺点: 不能中途跳出循环(如break),也不能跳过某些迭代(如continue);不支持异步操作。

for…of 循环

  • 优点: 语法简单,可读性强;允许使用breakcontinue
  • 缺点: 相对较新的特性,可能在旧环境中不被支持。

map 方法

  • 优点: 返回一个新的数组,不会改变原数组;非常适合用于转换数组元素。
  • 缺点: 如果你不需要创建新数组,那么使用map可能会浪费内存。

filter 和 reduce 方法

  • 优点filter可以轻松筛选数据,而reduce可以用来累积计算或复杂的数据处理。
  • 缺点: 对于复杂的操作,代码可能会变得难以理解。

some 和 every 方法

  • 优点: 用于检查条件是否满足时非常有用,能立即退出循环。
  • 缺点: 只适用于布尔判断场景。

对象(Object)

for…in 循环

  • 优点: 可以遍历对象的所有枚举属性,包括继承的属性。
  • 缺点: 需要额外检查属性是否属于对象本身(使用hasOwnProperty),并且会遍历原型链上的属性,这可能是不必要的。

Object.keys(), Object.values(), Object.entries()

  • 优点: 提供了更精确的遍历方式,只针对对象自身的属性;返回的数组可以与数组的遍历方法结合使用。
  • 缺点: 创建了新的数组,可能会有性能开销。

 Map 和 Set

对于Map和Set,for...offorEach方法都有它们各自的优点:

  • for…of:提供了一种直接遍历键值对的方式,并且可以使用breakcontinue语句。
  • forEach:语法简洁,但无法中途退出循环。

到此这篇关于Javascript中如何循环的文章就介绍到这了,更多相关js循环内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript每天必学之事件

    JavaScript每天必学之事件

    JavaScript每天必学之事件,聊一聊事件冒泡与捕获、事件冒泡的好处,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • websocket直接绕过JS加密示例及思路原理

    websocket直接绕过JS加密示例及思路原理

    这篇文章主要为大家介绍了websocket直接绕过JS加密的示例及思路原理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • JavaScript实现换肤功能

    JavaScript实现换肤功能

    js换肤功能的实现原理非常简单,就是使用js切换对应的css样式表文件,本文重点给大家介绍JavaScript实现换肤功能,感兴趣的朋友参考下吧
    2017-09-09
  • 详解webpack-dev-server 设置反向代理解决跨域问题

    详解webpack-dev-server 设置反向代理解决跨域问题

    后端只负责接口,前端负责数据展示、逻辑处理。那么如何跨域?这篇文章主要介绍了webpack-dev-server 设置反向代理解决跨域问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • javascript面向对象之访问对象属性的两种方式分析

    javascript面向对象之访问对象属性的两种方式分析

    这篇文章主要介绍了javascript面向对象之访问对象属性的两种方式分析,实例分析了直接访问对象属性的方式与数组访问方式,需要的朋友可以参考下
    2015-01-01
  • 在网页中使用document.write时遭遇的奇怪问题

    在网页中使用document.write时遭遇的奇怪问题

    很多时候我们都会在网页上的JavaScript中使用document.write来写入一些东西,有的时候可能因为我们无法改变某一部分HTML而不得不使用这样的办法,也有的时候是因为在进行跨应用的脚本调用。
    2010-08-08
  • HTML+JS实现猜拳游戏的示例代码

    HTML+JS实现猜拳游戏的示例代码

    这篇文章主要为大家详细介绍了如何利用HTML+CSS+JS编写一个猜拳游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 微信小程序顶部导航栏可滑动并选中放大

    微信小程序顶部导航栏可滑动并选中放大

    这篇文章主要介绍了微信小程序顶部导航栏可滑动并选中放大,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • 仅IE9/10同时支持script元素的onload和onreadystatechange事件分析

    仅IE9/10同时支持script元素的onload和onreadystatechange事件分析

    测试结果可以看出,IE9后已经开始支持script的onload事件了。一直以来我们判断js文件是否已经加载完成就是用以上的两个事件。
    2011-04-04
  • 详解JS函数stack size计算方法

    详解JS函数stack size计算方法

    本篇文章给大家分享了关于JS函数中stack size计算方法的相关知识点,对此有需要的朋友可以跟着学习下。
    2018-06-06

最新评论