# for-of与for-in的区别

# for-of

遍历可迭代的对象(部署了Symbol.iterator),包括 ArrayMapSetStringarguments等等

遍历的是每个数组的值

for (variable of iterable) {
    //statements
}
1
2
3

示例

const data = ['a', 'b', 3]
for (const v of data) {
    console.log(v); // a b 3
}
1
2
3
4

# for-in

for (variable in obj) {
    //statements
}
1
2
3

遍历一个对象的可枚举属性

  • 不可遍历Symbol属性
  • 可以遍历到原型上的属性
  • 顺序是任意的,不固定的
    • 最新的 ECMA-262(ECMAScript)第五版规范中,对 for-in 语句的遍历机制又做了调整,属性遍历的顺序是没有被规定的,导致不同浏览器遍历结果不一致

const data = {
    [Symbol.for('a')]: 'a',
    name: 'name',
    '2': '2',
    '1': '1',
    b: 'b',
    a: 'a'
}
data.__proto__.sex = 'sex'
for (const k in data) {
    console.log(k) // 1 2 name b a sex
}
1
2
3
4
5
6
7
8
9
10
11
12

# 总结

# for-of

  • 通常用于遍历数组对象,不可遍历普通对象
  • 只能遍历可迭代的对象(部署了Symbol.iterator

# for-in

  • 不可遍历Symbol属性
  • 为普通对象设计的,遍历顺序是任意的,数组索引顺序很重要,不适用于数组遍历
  • 遍历出来的key是string类型
  • 可以遍历到原型上的属性