在js开发中，经常会用到for...in for...of，如何区分使用？

在js开发中，经常会用到for...in  for...of，如何区分？

for...in循环读取键名，for...of循环读取实体或键值

• 遍历数组

const arr = ['red', 'green', 'blue']

// 读取实体
for (let pair of arr.entries()) {
  console.log(pair)
}
// [0,"red"]
// [1,"green"]
// [2,"blue"]

for (let [index, item] of arr.entries()) {
  console.log(index, item)
}
// 0,red
// 1,green
// 2,blue

// 读取值
for(let v of arr) {
  console.log(v); 
}
// red
// green
// blue

// 读取Key
for(let k in arr) {
  console.log(k); // 0 1 2
}
// 0
// 1
// 2

•  遍历对象

let es6 = {
  edition: 6,
  committee: "TC39",
  standard: "ECMA-262"
}

// 读取实体
for (let entry of Object.entries(es6)) {
  console.log(entry)
}
// ["edition",6]
// ["committee","TC39"]
// ["standard","ECMA-262"]

// 读取key
for (let k in es6) {
  console.log(k);
}
// edition
// committee
// standard

// 不能读取
for (let v of es6) {
  console.log(v)
}
// TypeError: es6[Symbol.iterator] is not a function

// 读取key
for (let key of Object.keys(es6)) {
  console.log(key + ': ' + es6[key])
}
// edition: 6
// committee: TC39
// standard: ECMA-262

// 读取key,value
for (let [key, value] of Object.entries(es6)) {
  console.log(`[${key},${value}]`)
}
// ["edition",6]
// ["committee","TC39"]
// ["standard","ECMA-262"]