简介
- for循环是 javascript 早期提供的遍历方式之一，主要遍历
数组、字符串
for(let i=0; i<5; i++) {
console.log('第'+i+'个')
}
- for...of 是 es6 提供的遍历方式，主要遍历
数组、字符串
const arr = ['a','b','c','d','e']
for(let item of arr) {
console.log(item)
}
差异
| for循环 | for...of |
|---|---|
| continue | continue |
| break | break |
| 有下标 | 有下标 |
| 能拿到遍历元素 | 能拿到遍历元素 |
| es5(且支持ie) | es5(且不支持ie) |
| 遍历Map和Set | 遍历Map和Set |
| 类数组对象 | 类数组对象 |
| arguments | arguments |
-
for循环是javascript原生能力，还是很强大的，美中不足的是能不拿到遍历元素且不支持最新的Map和Set遍历
-
for...of循环也
炒鸡强大，但存在兼容问题和不能遍历普通对象的问题。for...of为啥可以遍历Map和Set？真的不能遍历普通对象嘛？
遍历器Iterator
遍历器（Iterator）是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）
Iterator 的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。
可以下结论，for...of能遍历的对象上都存在遍历器
例如： 只要某个数据结构部署了 Iterator 接口，就可以对它使用扩展运算符，将其转为数组。
let arr = [...iterable]; // iterable可以NodeList、arguments等等
例如： 根据遍历器知识，那么以类数组对象为例：
var it = {'0':1, '1':2, length:2};
it[Symbol.iterator] = makeIterator
function makeIterator() {
var nextIndex = 0;
var self = this;
return {
next: function() {
return nextIndex < self.length ?
{ value: self[nextIndex++], done: false } :
{ value: undefined, done: true };
}
};
}
for(let i of it){console.log(i)} //1 //2
总结
回到正题上，面试官到底想问什么，表面问for循环和for...of的差异，实际在问for...of遍历的本质--靠的是es6的迭代器Iterator（遍历器）。
这里简单归纳了一下javascript的可迭代对象，结果如下
可迭代对象（11种？）: Array String Map WeakMap Set WeakSet arguments TypedArray Generator NodeList 和 类数组对象
文中如有错误，欢迎在评论区指正
