JavaScript中的for in和for of的区别（js的for循环）

简述：js中的for循环大家都知道，今天来分享下for in和for of在使用时区别和注意事项，顺便做个笔记；

测试数据

    //数组
    const arr = [1, 2, 3, 4, 5]

    //对象
    const obj = {
      name: "小李",
      color: ["plum", "pink", "purple"],
      status: {
        hobby: "study",
      }
    }
    
    //字符串
    const str = "emumerable"

for  in    

1、用来遍历键名，循环得到key，只能遍历可枚举的数据，

2、例如：数组、对象、字符串、set、map等，

3、使用Object.getOwnPropertyDescriptors()方法，判断该方法下的enumerable属性是否为true，来决定该数据是否可枚举；

⭐判断数据是否可枚举

Object.getOwnPropertyDescriptors(obj);
//打印
console.log(Object.getOwnPropertyDescriptors(obj));

输出

 使用

//循环对象
for (let key in obj) {
   console.log(key);        控制台输出name color status ，为该对象的属性名
}

//循环数组
for (let key in arr) {
    console.log(key);       控制台输出0 1 2 3 4 ，为该数组下标
}

//循环字符串
for (let key in str) {
    console.log(key);       控制台输出0 1 2 3 4 5 6 7 8 9 ， 为该字符下标
}

for of

1、用来遍历键值，循环得到value，只能用来遍历可迭代的数据，

2、例如：数组、字符串、set、map等，

3、使用arr[Symbol.iterator]()方法，判断该方法中是否有next()函数，来决定该数据是否可迭代；

⭐判断数据是否可迭代

arr[Symbol.iterator]()
//打印
console.log(arr[Symbol.iterator]());

输出

 使用

//循环数组
for (let val of arr) {
   console.log(val);            控制台输出1 2 3 4 5 ，为该数组的每一项
}

其它遍历类似

当然，如果使用for of来遍历对象（对象是不可迭代的），就会报如下错误，

    for of 遍历对象是不可取的，会报错X
    for (let val of obj) {
      console.log(val);   
    }

报错：obj不是可迭代的。

enumerable  可枚举的

iterator          迭代器

iterable          可迭代的