前言

今天来了解一下 TypeScript 中 for in 与 for of 的区别。

通过例子来看区别

1
2
3
4
5
6
7
8
9

let letters = ['a', 'b', 'c'];

for (let letter in letters) {
    console.log(letter);
}
console.log('--------------------')
for (let letter of letters) {
    console.log(letter);
}

结果如下

1
2
3
4
5
6
7

0
1
2
--------------------
a
b
c

从上面的例子不难看出来， for in 迭代的是索引， for of 迭代的值。

最开始我有一个对象数组要进行遍历，然后我用的是 for in ，结果代码补全一直没有出来，由于 for in 给我一种太熟悉的感觉，所以我就没有怀疑到这里有区别。

后来查了文档才知道，原来是个陌生人，浪费我半天时间。

也怪我自己没有好好学。

总结

TypeScript 中的 for in 和 for of 迭代的对象不一样，由于有各种语言的经验，想当然的会认为是一样的，没有进行验证，导致花费不少时间排查问题，这样排查问题方向都错了。

经验主义有时候也是会坏事的。

就像《哪吒 2》里的敖光说的： 父辈的经验毕竟是过往

参考

迭代器和生成器 · TypeScript中文网 · TypeScript——JavaScript的超集