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高级程序设计 阅读笔记(十八) js跨平台的事件

    JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件

    js跨平台的事件经验分享,需要的朋友可以参考下
    2012-08-08
  • Javascript获取某个月的天数

    Javascript获取某个月的天数

    本文给大家分享使用getDaysInOneMonth(year, month)方法获取某个月的天数,方法超简单,感兴趣的朋友一起看看吧
    2018-05-05
  • 微信小程序 冒泡事件原理解析

    微信小程序 冒泡事件原理解析

    这篇文章主要介绍了微信小程序 冒泡事件原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JS try catch用法举例之异常处理

    JS try catch用法举例之异常处理

    JavaScript try…catch是我们使用的功能之一,作为Web前端工程师,JavaScript try…catch是我们使用的功能之一,这篇文章主要给大家介绍了关于JS try catch用法举例之异常处理的相关资料,需要的朋友可以参考下
    2024-06-06
  • 详解Typescript中奇怪的赋值操作

    详解Typescript中奇怪的赋值操作

    这篇文章主要来和大家讨论一下typescript中一些奇怪的赋值语句,探索其背后原因,更深入的了解typescript作为一个结构化系统的特性,感兴趣的可以了解下
    2024-02-02
  • SVG快速构建马赛克效果

    SVG快速构建马赛克效果

    这篇文章主要为大家介绍了SVG快速构建马赛克效果示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • JavaScript中的排序算法代码

    JavaScript中的排序算法代码

    排序算法的理解算是程序员的基本功之一了,其功能是对一个数据元素集合或序列重新排列成一个按数据元素某个项值有序的序列。
    2011-02-02
  • 微信小程序骨架屏的实现示例

    微信小程序骨架屏的实现示例

    本文主要介绍了微信小程序骨架屏的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JS中使用 after 伪类清除浮动实例

    JS中使用 after 伪类清除浮动实例

    这篇文章主要介绍了使用 after 伪类清除浮动实例,非常不错,具有参考借鉴价值,需要的的朋友参考下
    2017-03-03
  • Bootstrap table学习笔记(2) 前后端分页模糊查询

    Bootstrap table学习笔记(2) 前后端分页模糊查询

    这篇文章主要为大家分享了Bootstrap table学习笔记,前后端分页模糊查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论