js中for in和for of的区别

1、直接遍历对象

for in 拿到的是对象的属性名，for of 直接报错

2、遍历数组：

for in 拿到的是数组对象的下标，for of 拿到的是数组对象的值

3、forEach

**forEach 循环无法中途跳出，break 命令或 return 命令都不能奏效

for…of 循环可以与break、continue 和 return 配合使用，跳出循环**

4、无论是 for…in 还是 for…of 都不能遍历出 Symbol 类型的值，

遍历 Symbol 类型的值需要用 Object.getOwnPropertySymbols() 方法

{
          
   
  let a = Symbol(a)
  let b = Symbol(b)

  let obj = {
          
   
    [a]: hello,
    [b]: world,
    c: es6,
    d: dom
  }

  for(let key in obj) {
          
   
    console.info(key +  -->  + obj[key])
  }

  /*
    c --> es6
    d --> dom
  */

  let objSymbols = Object.getOwnPropertySymbols(obj)
  console.info(objSymbols)    //  [Symbol(a), Symbol(b)]
  objSymbols.forEach(item => {
          
   
    console.info(item.toString() +  -->  + obj[item])
  })

  /*
    Symbol(a) --> hello
    Symbol(b) --> world
  */

  // Reflect.ownKeys 方法可以返回所有类型的键名，包括常规键名和Symbol键名
  let keyArray = Reflect.ownKeys(obj)
  console.log(keyArray)      //  ["c", "d", Symbol(a), Symbol(b)]
}

总之，for…in 循环主要是为了遍历对象而生（直接拿到对象的属性名，再根据属性名获取属性值），不适用于遍历数组 for…of 循环可以用来遍历数组（直接获取数组的值）、类数组对象，字符串、Set、Map 以及 Generator 对象