比较for-in和for-of两种遍历方式

摘要：本文主要比较了JS中for-in和for-of两种遍历方式有什么区别，以及使用场景。

1 介绍

1.1 for-in

使用for-in可以遍历对象所有属性，基于原型链，不能保证按顺序遍历，支持遍历对象属性。

示例：

1
2
3
4
5
6
7
8

let arr = [1,2,3];
for (let key in arr) {
  console.log(key + ' > ' + arr[key]);
}
let person = {'name':'张三', 'sex':'男'};
for (let key in person) {
  console.log(key + ' > ' + person[key]);
}

1.2 for-of

使用for-of可以遍历所有可迭代对象，能保证按顺序遍历，不支持遍历对象属性。

示例：

1
2
3
4

let arr = [1,2,3];
for (let value of arr) {
  console.log(value);
}

2 总结

使用for-in可以遍历对象属性，在遍历时可以获取到索引下标，根据索引下标进行遍历，不能保证按照顺序遍历。

如果需要遍历对象属性，或者需要获取索引下标，可以使用for-in的方式。

使用for-of可以遍历可迭代对象，在遍历时直接获取值，能保证按照顺序遍历。

如果需要按顺序遍历，并且不是遍历对象属性，也不需要索引下标，可以使用for-of的方式。