快速了解 JavaScript 中 for in 和 for of 的区别

for in 与for of 的区别

1. for-in 适合遍历对象属性，for-of 适合遍历数组

2. for-in 循环出的是key值，for-of 循环出的是value

3. for-in 可以遍历可枚举的属性，for-of 遍历的是可迭代的

4. for-of 不能直接遍历普通的对象，需要通过 Object.keys(obj) 搭配使用

for in obj | arr

for key in obj 遍历对象时，取key值

let obj = { name: 'nn', age: 18 }
for (let key in obj) {
    // key 属性名
    console.log(key) // Output: name【第一次循环】、age【第二次循环】...
    // obj[key] 属性值
    console.log(obj[key]) // Output: 'nn'、18...
  }

for key in arr 遍历数组时，取索引值index值

let arr = ['zs', 'ls', 'ww']
for (let key in arr) {
    // key 索引值
    console.log(key) // Output: 0,1,2
    // arr[key] 数组中元素-value
    console.log(arr[key]) // Output:'zs', 'ls', 'ww'
    }

for of arr

for of 循环是ES6的新的语法，用来遍历集合，返回的集合本身的元素，如:数组返回元素。

for value of arr 遍历数组时，取value值，不能取obj会报错

let arr = ['zs', 'ls', 'ww']
for (let value of arr) {
    // value 数组中元素
    console.log(value) // Output:'zs', 'ls', 'ww'
    }

for of Map 遍历Map键值对时，value为数组[索引值，元素]

let map = new Map() // 此为伪数组，存储内容为键值对
map.set(1,'a')
map.set(2,'b')
console.log(map) // 下图：Map(2) {1 => 'a', 2 => 'b'}

for (let value of map) {
    console.log(value) // 遍历第一次 Output：[ 1,"a"]
  }