for-in 和 for-of 详解

例子：1

let arr = ['a','b','c'];
        for(let i of arr){
            console.log(`{for..of}arr: ${i}`);
            //{for..of}arr: a
            //{for..of}arr: b
            //{for..of}arr: c
        }
        for(let i in arr){
            console.log(`{for...in}arr: ${i}`);
            //{for...in}arr: 0
            //{for...in}arr: 1
            //{for...in}arr: 2
        }

for in

for in 的特点

• for ... in 循环返回的值都是数据结构的 键值名。
• 遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。
• for ... in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。如例子2

例子：2

    const arr = ['a', 'b']
    // 手动给 arr数组添加一个属性
    arr.name = 'qiqingfu'
    // for in 循环可以遍历出 name 这个键名
    for (let i in arr) {
        console.log(i)
        // 0
        // 1
        // name
    }

• 特别情况下, for ... in 循环会以看起来任意的顺序遍历键名。这是因为 ECMAScript规范中定义了 「数字属性应该按照索引值大小升序排列，字符串属性根据创建时的顺序升序排列。」

for in 循环特别适合遍历对象。

for of

for of 循环用来获取一对键值对中的值,而 for in 获取的是 键名。一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环。for of语句在可迭代对象上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

for of遍历对象会报错，因为对象中没有迭代器

可迭代对象

每个可迭代对象都有迭代器iterator。迭代器中必须有next()方法。例子：

let test = {
            from: 1,
            to: 5
        }

这是一个普通对象没有迭代器，接下来添加一个迭代器.

运行for...of时，首先执行的就是Symbol.iterator

        test[Symbol.iterator] = function(){
            return {
                // 返回当前元素和目标元素
                current: this.from,
                // 当last = infinity时，迭代器会一直执行，使用break跳出循环
                last: this.to,
                // 用next方法让迭代器执行下去
                next(){
                    // done 为true时 迭代结束
                    if(this.current <= this.last){
                        return {done: false,value: this.current++}
                    }else return {done: true}
                }
            }
        }

iterator迭代器

js的symbol中有个iterator迭代器，它也是 一个接口，它有三个作用：1.它可以为数据结构提供访问接口 2.可为数据有序排列 3.可用于for of循环和...rest参数，它的工作流程是：1.创建一个指针对象，指向数据结构中的起始位置 2.调用next方法指向下一个数据，直到指向的数据没有时，结束位置。

Js中的可迭代对象

1. Arrays数组
2. 字符串Strings
3. Map
4. Set
5. arguments
6. Generators
7. Nodelist对象, 就是获取的dom列表集合