for...of和for..in实现数组、对象的遍历的区别

开发过程中我们经常需要遍历数组和对象。

for...of和for...in都可用于遍历，但是两者略有区别。

for…of

我们来输入一组代码：

const array = ['a', 'b', 'c']
const object = {
  'o1': 'a',
  'o2': 'b',
  'o3': 'c'
}

for(const item of array){
  console.log('array:'  + item)
}

for(const item of object){
  console.log('object:' + item)
}

输出结果如下：

array:a
array:b
array:c

SyntaxError: unexpected token: identifier

由以上结果可知，for...of可用于遍历数组，不可用于遍历对象。
遍历的item是数组的数据值。

for…in

我们依然直接上代码：

const array = ['a', 'b', 'c']
const object = {
  'o1': 'a',
  'o2': 'b',
  'o3': 'c'
}

for(const item in array){
  console.log('array:'  + item)
}

for(const item in object){
  console.log('object:'  + item)
}

输出结果为：

array:0
array:1
array:2

object:o1
object:o2
object:o3

通过结果可见，for...in既可用于遍历数组，也可用于遍历对象。
这里的item是数组的索引值或对象的key值。

总结

	for…of	for…of	for…in	for…in
	可用性	单位参数	可用性	单位参数
数组	✔️	数据值	✔️	索引值
对象	❌		✔️	key值