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

131 阅读1分钟

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"]
  }

image.png

如果觉得这篇文章帮助到了您,麻烦给这个小博主点点赞~😝 若有疑惑或想和小伙伴一起分享,评论区的大门随时为你敞开💕