🧐`for/of`与`for/in`

✍️for/of是 ES6 新增的，for/in是 JS 一开始就有的。

for/of 专门用于可迭代对象。

// 1. 数组
const arr = [1, 2, 3, 4]
for (let num of arr) {
  console.log(num)
}
// 1
// 2
// 3
// 4

// 2. 字符串
const str = 'jiang'
for (let s of str) {
  console.log(s)
}
// j
// i
// a
// n
// g

// 3. 集合——set
const set = new Set([1, 9, 4, 9])
for (let num of set) {
  console.log(num)
}
// 1
// 9
// 4

// 4. 映射——map
const map = new Map([
  ['name', 'jiang'],
  ['age', '24'],
])
for (let [key, value] of map) {
  console.log(key, value)
}
// name jiang
// age 24

总结下：数组、字符串、集合 ( set )、映射 ( map )都是可迭代的。

需要注意的是，对象默认是不可以迭代的：

const obj = {
  name: 'jiang',
  age: 24,
}
for (let o of obj) {
  console.log(o)
}
// Uncaught TypeError: obj is not iterable

但是可以使用一些方法来实现对象的遍历：

const obj = {
  name: 'jiang',
  age: 24,
}

// 1. 使用 `Object.keys()` ——返回一个对象属性名组成的数组
for (let k of Object.keys(obj)) {
  console.log(`key: ${k}, value: ${obj[k]}`)
}
// key: name, value: jiang
// key: age, value: 24

// 2. 使用 `Object.entries()` —— 返回一个`对象的键值对组成的数组`的数组
for (let [k, v] of Object.entries(obj)) {
  console.log(`key: ${k}, value: ${v}`)
}
// key: name, value: jiang
// key: age, value: 24

for/in遍历的是任意指定对象中的属性 语法如下：

for (variable in object) statement

JS 解释器遇到 for/in 的时候，首先会判断 object 是否为 null 或者 undefined ，

如果是，那就跳过循环。

如过不是，那么解释器就会对每一个可枚举的对象属性执行一次循环体的内容。

// for/in 遇到 object 为 null/undefined 会自动跳过，而 for/of 会报错
for (let i in null) {
  console.log(i)
}
console.log('hello') // hello

for (let i of null) {
  console.log(i)
}
console.log('hello') // Uncaught TypeError: null is not iterable

"可枚举"（enumerable）用于描述对象的属性是否可以被某些操作（如 for...in 循环、Object.keys()、JSON.stringify()等）所枚举。

需要注意的是，variable 所在的位置在每一次循环中是会被求值的。

比如：

const obj = { name: 'jiang', age: 24 }
const keys = [] // 用于存放全部的键值
let i = 0
for (keys[i++] in obj) {
  console.log('hello')
}
console.log(keys) // ['name', 'age']

数组 —— 其实是一种特殊的对象，其索引可以看作是一个个的属性。

// 遍历数组
// 数组是一种特殊的对象，
let arr = [1, 2, 3]
for (let i in arr) {
  console.log(i)
}
// 1
// 2
// 3

P.S. 在开发中，其实用到 for/of 遍历数组更多

此外，使用 for/in 的时候，对象继承的可枚举属性也会被枚举。这可能会产生意料之外的结果，所以为了使遍历结果更可控，建议使用 Object.keys() 搭配 for/of 来遍历。