字数
502 字
阅读时间
3 分钟
刨析 JS 中的 forEach、for in、for of 三类循环原理和性能 - 掘金
可枚举属性
属性的 enumerable 设置为 true
Object.keys() 只遍历当前对象的可枚举属性
for...in 遍历当前对象及其原型链上所有的可枚举属性
实现 iterator 规范的对象
JavaScript 的 Iterator 接口与循环 - 掘金
Array，Map，Set，String 等等类可以在被 for...of 中执行，因为它们都实现了 Symbol.iterator 接口
而 Number，Object 就没有实现 [Symbol.iterator]
- 首先会执行
Symbol.iterator属性对应的函数且返回一个对象 - 对象内包含一个方法
next()， 循环一次（还有return()和throw()方法），next 返回另一个对象 - 这个对象内包含
done（标记当前迭代是否完成）和value（每个迭代器元素的值）属性， - done 值为 false 或者 undefined 时，迭代可以继续；值为 true 迭代完成，不能再继续遍历
forEach 和 for of 跳出循环
forEach：return 无法终止循环。不过可以起到 continue 效果（本身是不支持的 continue 与 break 语句
for…of： 是 ES6 新增的方法，但是 for…of 不能去遍历普通的对象，for…of 的好处是可以使用 break 跳出循环（可以正确响应 break、continue 和 return 语句
for of 和 for in 区别
（1）for…in 用于可枚举数据，如对象、数组、字符串
（2）for…of 用于可迭代数据，如数组、字符串、Map、Set
for of 是根据迭代器 (Iterator) 实现的内容返回结果，所以就不会遍历不在范围的东西，而 for...in 会把所有的键遍历出来。
javascript
const arr = ["a", "b", "c"];
arr.testValue = 1;
for (const item of arr) {
console.log(item);
// a
// b
// c
}
for (const item in arr) {
console.log(item);
// 0
// 1
// 2
// testValue
}贡献者
jiechen