js array遍历、js中如何遍历数组 收藏 0

数组遍历归纳

数组遍历

随着 JS 的不断发展，截至 ES7 规范已经有十多种遍历方法。下面按照功能类似的方法为一组，来介绍数组的常用遍历方法。

for、forEach、for …of

小结

• 三者都是基本的由左到右遍历数组
• forEach 无法跳出循环；for 和 for ..of 可以使用 break 或者 continue 跳过或中断。
• for …of 直接访问的是实际元素。for 遍历数组索引，forEach 回调函数参数更丰富，元素、索引、原数组都可以获取。
• for …of 与 for 如果数组中存在空元素，同样会执行。

some、every

小结

• 二者都是用来做数组条件判断的，都是返回一个布尔值
• 二者都可以被中断
• some 若某一元素满足条件，返回 true，循环中断；所有元素不满足条件，返回 false。
• every 与 some 相反，若有益元素不满足条件，返回 false，循环中断；所有元素满足条件，返回 true。

filter、map

小结

• 二者都是生成一个新数组，都不会改变原数组（不包括遍历对象数组是，在回调函数中操作元素对象）
• 二者都会跳过空元素。有兴趣的同学可以自己打印一下
• map 会将回调函数的返回值组成一个新数组，数组长度与原数组一致。
• filter 会将符合回调函数条件的元素组成一个新数组，数组长度与原数组不同。
• map 生成的新数组元素是可自定义。
• filter 生成的新数组元素不可自定义，与对应原数组元素一致。

find、findIndex

小结

• 二者都是用来查找数组元素。
• find 方法返回数组中满足 callback 函数的第一个元素的值。如果不存在返回 undefined。
• findIndex 它返回数组中找到的元素的索引，而不是其值，如果不存在返回 -1。

reduce、reduceRight

reduce 方法接收两个参数，第一个参数是回调函数（callback） ，第二个参数是初始值（initialValue）。

reduceRight 方法除了与reduce执行方向相反外(从右往左)，其他完全与其一致。

回调函数接收四个参数：

• accumulator：MDN 上解释为累计器，但我觉得不恰当，按我的理解它应该是截至当前元素，之前所有的数组元素被回调函数处理累计的结果。
• current：当前被执行的数组元素。
• currentIndex: 当前被执行的数组元素索引。
• sourceArray：原数组，也就是调用 reduce 方法的数组。

如果不传入初始值，reduce 方法会从索引 1 开始执行回调函数，如果传入初始值，将从索引 0 开始、并从初始值的基础上累计执行回调。

计算对象数组某一属性的总和

对象数组的去重，并统计每一项重复次数

对象数组最大/最小值获取

reduce 很强大，更多奇技淫巧推荐查看这篇《25个你不得不知道的数组reduce高级用法》

性能对比

说了这么多，那这些遍历方法， 在性能上有什么差异呢？我们在 Chrome 浏览器中尝试。我采用每个循环执行10次，去除最大、最小值 取平均数，降低误差。

从打印结果可以看出，for 循环的速度最快，for of 循环最慢

常用遍历的终止、性能表格对比

最后，不同浏览器内核 也会有些差异,有兴趣的同学也可以尝试一下。

JavaScript遍历对象方法总结，原来有这么多，你掌握了几种？

本篇内容将按照下图展开：

Object最常见的遍历方法方法就是使用 for…in… ，但其有一定的局限性，比如只能遍历可枚举属性。虽然Object无法直接使用 for循环 和 forEach ，但是经过 Reflect.ownKeys / Object.getOwnPropertyNames / Object.getOwnPropertySymbols / Object.keys 等方法转换直接得到Object中key值的集合后，是可以通过 for循环 和 forEach 来遍历的。

比如现在有个对象，其中有3个属性，分别是 可枚举属性 、 不可枚举属性 和 Symbol属性

输出结果：

输出结果：

输出结果：

输出结果：

遍历Array可以使用 for循环 ，也可以使用 for…in… 和 for…of… ，并且Array的原型中还有 forEach函数 和 map函数 可用来遍历Array对象。

测试数据：

输出结果：

输出结果：

输出结果：

输出结果：

map方法会根据原数组中的每个元素调用函数后返回的数据创建一个新数组。

输出结果：

遍历Map一般是两种，一是直接使用 for…of… 或者 Map.prototype.forEach ，二是通过 Map.prototype.entries / Map.prototype.keys / Symbol.iterator 获取Map对象的迭代器，再通过 for…of… 来遍历迭代器。

测试数据：

输出结果：

输出结果：

输出结果：

输出结果：

遍历Set和遍历Map差不多，Map有的方法Set都有，但是有一个差别： Map是以键值对的形式去存储数据的，其中键是唯一；而Set存储的只有值，其值是唯一的 。

遍历Set一般也是两种，一是直接使用 for…of… 或者 Set.prototype.forEach ，二是通过 Set.prototype.values / Symbol.iterator 获取Map对象的迭代器，再通 for…of… 来遍历迭代器

像 Set.prototype.entries / Set.prototype.keys 虽然也可以达到遍历Set对象的效果，但是由于其将value当做key，笔者感觉这两个方法与上文中 Map.prototype.entries / Map.prototype.keys 逻辑上差别不大，故而不再赘述。

测试数据：

输出结果：

输出结果：

输出结果：

输出结果：

笔者才疏学浅，慌忙之下难免有遗漏或是疏忽，如有错误之处，还望各位看官不吝赐教，笔者在此感谢。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com