2023.28 forEach 、for ... in 、for ... of有什么区别？

大家好，我是wo不是黄蓉，今年学习目标从源码共读开始，希望能跟着若川大佬学习源码的思路学到更多的东西。

forEach 、for ... in 、for ... of有什么区别

forEach 数组提供的方法，只能遍历数组

遍历数组：for...in key返回数组下标；for...of key返回值；

遍历对象：for...in key返回对象的键；for...of 遍历对象报错，提示没有实现person对象不可迭代；

iterable什么是可迭代对象？

简单来说就是可以使用for...of遍历的对象，也就是实现了[Symbol.iterator]

迭代和循环有什么区别？

遍历强调把整个数据依次全部取出来，是访问数据结构的所有元素；

迭代虽然也是一次取出数据，但是并不保证取多少，需要调用next方法才能获取数据，不保证把所有的数据取完，是遍历的一种形式。

有哪些对象是可迭代对象呢？

原生的可迭代对象 set map nodelist arguments 数组 string

迭代器是针对某个对象的，有些对象是自己继承了Symbol.Iterator，也可以实现自己的迭代器，必须要实现一个next方法，返回内容

{value:any,done:boolean}

实现对象的迭代器

如果要实现迭代器，需要实现[Symbol.Iterator]是一个函数，这个函数返回一个迭代器

// let arr = ['a', 'b', 'c']
let person = {
    name: 'a',
    age: 18,
    myIterator: function () {
        var nextIndex = 0
        return {
            next: () => {
                const array = Object.values(this)
                return nextIndex < array.length
                    ? { value: array[nextIndex++], done: false }
                    : { value: undefined, done: true }
            }
        }
    }
}
​
let myIterator = person.myIterator()
console.log(person.myIterator())//{ next: [Function: next] }
console.log(myIterator.next())//{ value: 'a', done: false }
console.log(myIterator.next())//{ value: 18, done: false }
console.log(myIterator.next())//{ value: [Function: myIterator], done: false }
console.log(myIterator.next())//{ value: undefined, done: true }
{ value: undefined, done: true }

按道理实现了迭代器该对象就会变为可迭代对象了，可以使用for..of遍历

但是执行后发现还是会提示Person不是可迭代的，是因为for..of只能遍历实现了[Symbol.iterator]接口的的对象，因此我们写的方法名要使用[Symbol.iterator]

修改后：

let person = {
    name: 'a',
    age: 18,
    [Symbol.iterator]: function () {
        var nextIndex = 0
        return {
            next: () => {
                const array = Object.values(this)
                return nextIndex < array.length
                    ? { value: array[nextIndex++], done: false }
                    : { value: undefined, done: true }
            }
        }
    }
}
​
//for..in
for (let key in person) {
    console.log(key, person[key])
}
​
//for...of
for (let key of person) {
    console.log(key)
}
​
//打印结果
name a
age 18
a
18

什么时候会用迭代器？

应用场景：可以参考阮一峰老师列举的例子

js语法：for ... of 展开运算符 yield 解构赋值

创建对象时：new map new set new weakmap new weakset

一些方法的调用：promise.all promise.race array.from

for in 和for of 迭代器、生成器（generator）

迭代器中断：

迭代器中定义return方法在迭代器提前关闭时执行，必须返回一个对象

break return throw 在迭代器的return 方法中可以捕获到

let person = {
    name: 'a',
    age: 18,
    [Symbol.iterator]: function () {
        var nextIndex = 0
        return {
            next: () => {
                const array = Object.values(this)
                return nextIndex < array.length
                    ? { value: array[nextIndex++], done: false }
                    : { value: undefined, done: true }
            },
            return: () => {
                console.log('结束迭代')
                return { done: true }
            }
        }
    }
}
​
//for...of
for (let key of person) {
    console.log(key)
    if (key === 'a') break
}
​
//打印结果
a
结束迭代

---

结束：下节讲生成器