javascript for...in 与 for... of 的区别

for…in 与 for… of 的区别

一直没注意 javascript 中 in 与 of 的区别, 实际上, 这二者的区别还是很大的

for … in

for…in 会遍历一个对象的可枚举的属性名(也就是遍历key)

for…in 迭代的顺序不固定，依赖于执行环境。

a = { a: 1, b: 2, c: 3 };
b = [1, 2, 3];
for (let i in a) console.log(i, a[i]);
// a 1
// b 2
// c 3
for (let i in b) console.log(i, b[i]);
// 0 1
// 1 2
// 2 3

此外, for…in 也会遍历原型链上的可枚举属性

s = "123456";
s.__proto__.prototype = {};
for (let i in s) console.log(i, s[i]);
// 0 1
// 1 2
// 2 3
// 3 4
// 4 5
// 5 6
// prototype {}

for … of

for…of 会遍历可迭代对象 (Array, Map, String 等) 的属性的值

迭代顺序依赖于迭代器的定义，一般为原始插入顺序

a = { a: 1, b: 2, c: 3 };
b = [1, 2, 3];
for (let i of a) console.log(i, a[i]); //Error.Object is not iterable
for (let i of b) console.log(i, b[i]);
// 1 2
// 2 3
// 3 undefined

对于 Object, for… of 无法遍历,解决方法可以考虑自定义 iterator 接口或者使用 Object.keys() 将键名生成数组，然后遍历数组。

for (let key of Object.keys(someObject)) {
  console.log(key + ': ' + someObject[key]);
}