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 遍历对象是不可取的，会报错Xfor (let val of obj) {console.log(val);   }

报错：obj不是可迭代的。

enumerable  可枚举的

iterator          迭代器

iterable          可迭代的