详解JS前端使用迭代器和生成器原理及示例

　　生成器和迭代器这两个东西平时作为一个切图仔，一直都没有使用到。感觉是只有在面试之前才会的东西。面试过不了几天，再次看这两个词一阵恍惚。

　　记忆力退化成这样了么？最大的原因一定是用得少了。然后呢？就是没有真正的理解它们。我对于它们的认知常常有下面这些：

　　想来要真正的记住它，增加自己的武器库，必须要弄明白这些东西才行。

　　业务代码确实使用不上，但是如果不理解的话，等真到了可以使用的场景的时候，又是否真的能够运用起来，甚至记起来呢？

for of 是干什么用的

　　所有人都知道一些概念for、forEach、map、reduce这些是可以遍历数组的，for of是用于遍历迭代对象的。如下:

const arr = [1, 2, 3]

arr.forEach((item, index) => {

console.log(item) // 1, 2, 3

console.log(index) // 0, 1, 2

})

　　而巧合的是for of也可以遍历数组

for(let key of arr) {

console.log(key) // 1 2 3

}

　　将arr改变为const obj = { a: 1, b: 2, c: 3 }的时候，两者都没有遍历出结果。

　　前者是没有反应，后者会直接报错：TypeError: obj is not iterable。翻译一下，类型错误:obj 不是一个可迭代对象。

　　那么什么是可迭代对象呢？

可迭代对象是什么？

　　我们先来看看下面这个例子：

const itemLi1 = document.getElementByTagName(li)

const itemLi2 = document.querySelectorAll(li)

for(let key of itemLi1) {

console.log(item)

}

for(let key of itemLi2) {

console.log(item)

}

　　也就是说HTMLCollection和NodeList是可以迭代对象。其他的可迭代对象有Array、map、set、string等等。如果说类数组的话，是不是迭代对象呢？

for of 是干什么用的

负载均衡

云数据库

域名注册

常见问题

云计算