none

0%

如何让对象支持 for of 遍历

发表于 更新于

for of 是 ES6 出的一个遍历数组元素的方法，和for in 的区别在对于前面遍历数组的值；后者遍历数组(对象)的键（包括从父级继承的键），遍历对象是且会按照添加的顺序遍历。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Object.prototype.name = 'Lili'

const o = {
  __proto__: {
    e: 12,
  },
  b: 12,
  c: 10,
  a: 8,
}
for (const i in o) {
  console.log(i)
  // b c a e name
}
const arr = [1, 2, 3]
for (const i in arr) {
  console.log(i)
  // 0 1 2 3 name
}

当我们尝试用 for of 遍历一个对象时，会报错 TypeError: o is not iterable，这里因为 for of 其实会调用对象的 Symbol.iterator 方法,这个属性是一个迭代器 所以我们可以尝试实现一个对象的 Symbol.iterator 迭代器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Object.prototype.name = 'Lili'
const o = {
  __proto__: {
    e: 12,
  },
  b: 12,
  c: 10,
  a: 8,
}
Object.prototype[Symbol.iterator] = function () {
  const keys = Object.keys(this)
  let i = -1
  return {
    next: () => {
      return {
        value: this[keys[++i]],
        done: i >= keys.length,
      }
    },
  }
}
for (const i of o) {
  console.log(i)
  // 12 10 8
}

并且也只会遍历该对象上自己拥有的属性。