js种的遍历方法 map、foreach、for of 、for in等

飞熊 • 2024年1月12日下午7:42 • 后端开发 • 阅读 223

在 JavaScript 中，常用的遍历方法包括：

for 循环：使用最广泛的遍历方法，可以按照指定的条件循环遍历数组或对象；
for…in 循环：遍历对象的属性名，但不包括数组的索引；
- 遍历对象的可枚举属性。
- 注意，这种方法不保证遍历顺序，因为对象属性没有顺序的概念。
- 遍历顺序可能会受到 JavaScript 引擎的优化影响，也可能会受到属性定义顺序的影响。
- 适合用于对每个数组元素进行相同的操作，或者遍历某个数组并在控制台打印出其内容。
- 优点：可以用于遍历对象属性和方法。
- 缺点：遍历顺序可能不同，会将数组方法和原型中的属性一起遍历。
forEach 方法：对数组的每一项执行给定的函数，没有返回值；
- 遍历数组或类数组对象的每一个元素，执行回调函数。
- 没有返回值，不能中途跳出循环。
- 可以使用 break 或 return 终止当前的回调函数，但并不会终止整个循环。
- 优点：代码简单易懂，不需要额外的迭代器或计数器，适合对每个数组元素进行相同的操作。
- 缺点：循环中途无法跳出循环。
for…of 循环：用于遍历具有 iterable 接口的数据结构，比如数组、字符串、Set、Map 等，可以获取到数组的元素；
- 遍历可迭代对象的每一个元素。
- 可以遍历数组、字符串、Set、Map 等内置可迭代对象，也可以遍历实现了 Symbol.iterator 接口的自定义对象。
- 遍历顺序和元素在数据结构中的顺序一致。
- 优点：按顺序访问每个元素，可以使用 break 中断循环。
- 缺点：不支持对象，只能用于数组、字符串和 NodeList 等内置迭代器对象。
map 方法：对数组的每一项执行给定的函数，并返回一个新的数组，不会修改原数组；
- 遍历数组，对每个元素执行回调函数，返回处理后的结果组成的新数组。
- 返回新数组，不会改变原数组。
- 可以中途使用 return 跳出循环，跳出后的元素不会被遍历。
- 优点：可以生成一个新数组，对每个元素进行计算并返回新的值。
- 缺点：返回新的数组，内存开销可能比 forEach 大。
filter 方法：对数组的每一项执行给定的函数，并返回一个新的数组，包含符合条件的项；
reduce 方法：对数组的每一项执行给定的函数，返回一个累加器结果，可以用于求和、求平均值等；
find 方法：返回数组中第一个符合条件的元素；
findIndex 方法：返回数组中第一个符合条件的元素的索引。