浅谈 for in 与 for of 的区别

最新推荐文章于 2025-02-18 17:07:39 发布

原创最新推荐文章于 2025-02-18 17:07:39 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Javascript

Javascript 专栏收录该内容

52 篇文章

订阅专栏

本文探讨了JavaScript中for...in循环在遍历数组时的常见问题——意外遍历原型链上的属性和方法。通过具体示例展示了如何避免这一问题，包括使用hasOwnProperty()方法和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
}