javaScript中的for in 与for of 区别与适用环境

javaScript中的for in 与for of 的主要区别：

1. 推荐在循环对象属性的时候使用for...in，在遍历数组的时候的时候使用for...of。

2. for...in会遍历数组所有的可枚举属性，包括原型。

3. for...in循环的是key（键），for...of循环的是value（值）

4. for...of是ES6新引入的特性，for...of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合，但是不能遍历对象，因为没有迭代器对象。因为 for...of 循环首先调用集合的Symbol.iterator方法，紧接着返回一个新的迭代器对象。迭代器对象可以是任意具有.next()方法的对象；for...of循环将重复调用这个方法，每次循环调用一次。

5. for...of不能循环普通的对象，需要通过和Object.keys()搭配使用

注意：for...in循环的是key（键）返回的也是key，for...of循环的是value（值）返回的也是value；

看下面代码：看遍历结果的不同

// 使用 for of 打印出 arr[i]，及将 i 视为索引
var arr = [1,3,2,9,5];
for (let i of arr){
    console.log(arr[i])
}
//输出结果
// 3 --- arr[1]
// 9 --- arr[3]
// 2 --- arr[2]
// undefined --- arr[9]
// undefined --- arr[5]

// 使用 for of 打印出 i
var arr = [1,3,2,9,5];
for (let i of arr){
    console.log(i)
}
//输出结果
// 1
// 3
// 2
// 9
// 5

// 使用 for in 打印出 arr[i]
var arr = [1,3,2,9,5];
for (let i in arr){
    console.log(arr[i])
}
//输出结果
// 1
// 3
// 2
// 9
// 5