forEach
以数组为例，JavaScript提供多种遍历语法。最原始的写法就是for循环。
这种写法比较麻烦，因此数组提供内置的forEach方法。
这种写法的问题在于，无法中途跳出forEach循环，break命令或return命令都不能奏效。
for...in
for...in循环可以遍历数组的键名。
for...in循环有几个缺点
- 数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
- for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
- 某些情况下，for...in循环会以任意顺序遍历键名。总之，for...in循环主要是为遍历对象而设计的，不适用于遍历数组。
for...of
for...of内部实现原理
内部实现原理是 iterator 接口
terator]();
console.log(it.next()); // {value: 'a',done: false}
console.log(it.next()); // {value: 'b',done: false}
console.log(it.next()); // {value: 'c',done: false}
console.log(it.next()); // {value: undefined,done: true}在ES6中，数组内置了iterator接口，但是普通的对象不是。也就是说，for...of无法直接用于普通对象的遍历。
其实for...of语句本质上是调用了iterator接口。所以对于任意的数据结构而言，只要部署了interator接口，就可以使用for...of创建迭代器，然后通过迭代器遍历其中的值。
给普通对象部署iterator接口
Object.defineProperty(myObject,Symbol.iterator,{
enumerable: false,writable: false,configurable: true,value: function () {
var o = this;
var idx = 0;
var ks = Object.keys(o);
return {
next: function () {
return {
value: o[ks[idx++]],done: (idx > ks.length)
}
}
}
}
});
for(let v of myObject) {
console.log(v);
}
// 输出：
// 2
// 3
Interator接口本质上是一个生成迭代器的函数，执行它，就可以生成一个迭代器，不断执行迭代器的next方法，就可以遍历该数据结构。
for...of优点
- 有着同for...in一样的简洁语法，但是没有for...in那些缺点。
- 不同于forEach方法，它可以与break、continue和return配合使用。
- 提供了遍历所有数据结构的统一操作接口。
区别
for...of不同于for和for...in的地方还有一处：for...of直接遍历的是数组的值，而非数组的下标，而for和for...in仅仅是遍历数组的下标（当然你可以通过下标进一步获取值。遍历下标还是遍历值，仅仅在于语言层面的区别才有意义）。所以ES6的for...of可以说是实现了直接遍历数组的值的命令语句。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
