浅谈 for in 与 for of 的区别

最近做项目，项目中有些地方使用到 for in 循环，遇到一个头痛的问题，遍历的时候总会多出一个方法，找了很久（头痛），最后发现我在 Array 原型上添加了方法，自己测试了几遍，终于找出问题的关键点：

// 原型添加方法contains 和属性 subTitle
Array.prototype.contains = function() { return null } 
Array.prototype.subTitle= 'Flutter'

let arr = ['Vue', 'React', 'Angular', 'Node']
for (let i in arr) {
	console.log(arr[i])
}

打印结果，发现遍历了原型的方法和属性

解决方法：

①：利用JS方法 hasOwnProperty()，过滤对象的属性

for (let i in arr) {
	if (arr.hasOwnProperty(i)){
	  console.log(arr[i])
	}
}

虽然解决了问题，但是 for in 遍历数组会遍历原型的方法属性，推荐使用 for in 遍历对象，同 Object.keys()

let obj = {name:'小明', age:20}
for (let i in obj) {
  console.log(obj[i])
}

let result = Object.keys(obj) // ['name','age']
console.log(result.map(item => obj[item]))

②：第二个方法，那就是利用我们的 for of

for of 与 for in 不同 他不会遍历原型的方法和属性

Array.prototype.contains = function() { return null }
Array.prototype.subTitle= 'Flutter'

let arr = ['Vue', 'React', 'Angular', 'Node']
for (let i of arr) {
 console.log(i)
}

for of 会遍历拥有迭代器对象的集合，调用 Symbol.iterator 生成一个迭代器对象。它不能遍历对象，因为没有迭代器对象，会报以下错误

正确姿势，借助 Object.keys() 枚举对象key：

let obj = {name:'小明', age:20}
for (let i of Object.keys(obj)) {
  console.log(obj[i]) // 小明 20
}