JavaScript for-in 遍历与 hasOwnProperty 过滤原型属性详解

作者:函数茶馆

时间:2026-10-27

浏览:383

本文详解JavaScript中for-in循环遍历对象属性时可能误包含原型属性的问题,并通过具体示例演示如何使用hasOwnProperty方法过滤非自有属性,确保只处理对象自身的键值对。

文章目录

for-in 遍历数组的默认行为

例如: 存在如下代码片段:

具体实现如下:

var array = [];
array.push(1);
array.push(2);
array.push(3);
for(var i in array) {
console.log(i+":"+array[i]);
}

运行结果如何?预期输出为 0:1 1:2 2:3


原型属性被意外遍历的问题

若在for in循环前执行 Array.prototype.say = "hello";


重新运行代码,输出结果变为?


具体实现如下:

0:1 1:2 2:3 say:hello

由此可见,此时会输出原型链上的属性


使用 hasOwnProperty 过滤原型属性

多数场景下无需遍历原型属性,此外,当前使用的对象可能因其他开发人员在其原型上添加属性而变得不确定。因此,需过滤对象自身的属性,此时便用到hasOwnProperty方法,示例如下:


具体实现如下:

for(var i in array){
if(array.hasOwnProperty(i)) {
console.log(i+":"+array[i]);
}
}

再次思考输出结果?预期仍为 0:1 1:2 2:3。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章