【个人笔记】for...in 和for...of

 共性

• 都可以用于循环

区别

遍历对象

• for...in 可以遍历对象的键（属性名），包括继承的属性。这意味着它不仅遍历对象自身的属性，还会遍历原型链上的属性。

• for...of 不能直接用于遍历普通对象，因为它期望一个可迭代的对象。普通对象不是可迭代的，除非它们实现了迭代器协议（Symbol.iterator）。

const obj = {a:1,b:2,c:3}
for (var element of obj) {
    console.log(element);   // Uncaught TypeError: obj is not iterable
}
for (var element in obj) {
    console.log(element);   // a b c
}

const obj = {a:1,b:2,c:3}
Object.prototype[Symbol.iterator] = function () {
    let keys = Object.keys(this); //获取对象的key，返回值是数组
    let index = 0;
    return {
        next: () => {
            if (index < keys.length) {
                return {
                    done: index > keys.length,
                    value: this[keys[index++]]
                }; //必须写成箭头函数，让this为当前Object的实例
            } else {
                return { done: true };
            }
        },
        return() {
            console.log('遍历被终止了！'); //用于当遍历被break等终止时执行的操作！
            return { done: true };
        }
    };
};
for (var element of obj) {
    console.log(element);   // 1 2 3
}

遍历数组

• for...in 遍历数组时会返回数组的索引，但这些索引是字符串类型（例如 '0', '1', '2'）。
• for...of 直接返回数组的值，而不是索引。

const array = [1, 2, 3, 4, 5]; 
for (const element of array) {
    console.log(element);   // 1 2 3 4 5 
}
for (const element in array) {
    console.log(element);   // 0 1 2 3 4 
}

顺序和一致性

• for...in 的遍历顺序可能不是按照数组的实际顺序，而是按照属性的插入顺序或者其他逻辑顺序。
• for...of 通常按照插入顺序遍历可迭代对象，这对于数组来说意味着顺序是数值升序。

可迭代性

• 要使用 for...of 循环，对象必须实现迭代器协议（通过实现 Symbol.iterator 方法），这样才能定义如何被迭代。

性能和安全性

• for...of 提供了更好的性能和安全性，因为它直接访问可迭代对象的内部迭代器，而不是像 for...in 那样可能访问到不期望的继承属性或原型链上的属性。

总结

        for...of 不会遍历对象的键，只会遍历值，如果只需要值，或者是为了数组或类数组的遍历，for...of是更好的选择

        for...in 循环遍历的是对象的键，不仅仅是数组，如果需要在循环中修改索引或者使用对象属性，for...in会更合适