Javascript中的for in循环和hasOwnProperty结合使用

与in操作符相比，for in 在循环对象的属性时也会遍历原型链，for in 不会读取不可枚举属性，如数组的length属性。 小结 当检测某个对象是否拥有某个属性时，hasOwnProperty 是唯一可以完成这一任务的方法，在 for in 循环时，建议增加 hasOwnProperty 进行判断，可以有效避免扩展本地原型而引起的错误。

与in操作符相比，for in 在循环对象的属性时也会遍历原型链，for in 不会读取不可枚举属性，如数组的length属性。

代码如下:

// 扩展 Object.prototype
Object.prototype.bar = 1;
var foo = {moo: 2};
for(var i in foo) {
console.log(i); // 输出 bar 和 moo
}

我们不可能改变 for in 循环的行为，当需要对循环体内某些属性进行过滤时，可以利用Object.prototype的hasOwnProperty方法来完成。

提示：因为 for in 循环总是遍历整个原型链，所以当遍历多继承的对象时效率较低。

使用 hasOwnProperty 进行过滤

代码如下:

// 仍旧针对上例的foo对象
for (var i in foo) {
if (foo.hasOwnProperty(i)) {
console.log(i);
}
}

例子中因为使用了hasOwnProperty，最终输出moo；如果忽略 hasOwnProperty ，代码将会输出非预期结果，因为本地原型（如Object.prototype）已经被扩展了。

Prototype框架就是扩展Javascript原始对象的一个类库，并被广泛使用，其缺点也很明显，当框架引入后，如果不使用 hasOwnProperty 进行过滤判断，输出结果保证不是你想要的。

最佳实践

推荐在 for in 时，总是使用 hasOwnProperty 进行判断，没人可以保证运行的代码环境是否被污染过。

hasOwnProperty
为了检查某个对象是否拥有不在原型链上的自定义属性，就有必要用到 hasOwnProperty 方法，任何一个对象都具有该方法，它继承自 Object.prototype。

提示：我们无法完全检测某个属性是否是undefined，因为属性有可能存在，但其值为undefined。hasOwnProperty 是Javascript中唯一一个可以处理对象属性而不遍历原型链的方法。

代码如下:

// 扩展 Object.prototype
Object.prototype.bar = 1;
var foo = {goo: undefined};

foo.bar; // 1
'bar' in foo; // true

foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true

只有 hasOwnProperty 给出了正确的预期结果，当遍历对象的属性时这是很有必要的，没有其它办法来排除定义在对象原型链上的属性。

hasOwnProperty 作为属性

Javascript 并没有保护 hasOwnProperty 为关键字或保留字，因此，如果某个对象拥有同名的属性，就有必要利用扩展的 hasOwnProperty 来获取正确结果。

代码如下:

var foo = {
hasOwnProperty: function() {
return false;
},
bar: 'Here be dragons'
};
foo.hasOwnProperty('bar'); // 总是返回 false
// 使用另一个 hasOwnProperty 并将 this 设置为 foo 来调用它
{}.hasOwnProperty.call(foo, 'bar'); // true

小结
当检测某个对象是否拥有某个属性时，hasOwnProperty 是唯一可以完成这一任务的方法，在 for in 循环时，建议增加 hasOwnProperty 进行判断，可以有效避免扩展本地原型而引起的错误。

赞 (0)

相关推荐

  • JavaScript中in和hasOwnProperty区别详解

    每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性.搜索首先从对象实例本身开始.如果在实例中找到了具有给定名字的属性,则返回该属性的值:如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性.如果在原型对象中找到了这个属性,则返回该属性的值. 虽然可以通过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值.如果在实例中添加一个与原型中属性同名的属性,则该属性会屏蔽原型中的那个属性.添加的同名属性只会阻止我们访问原型中的那个属性,但不

  • 详谈js使用in和hasOwnProperty获取对象属性的区别

    in判断的是对象的所有属性,包括对象实例及其原型的属性: 而hasOwnProperty则是判断对象实例的是否具有某个属性. 示例代码: <script type="text/javascript"> function Person(){ } Person.prototype.name = "allen"; var person = new Person(); console.log(person.hasOwnProperty("name&qu

  • 浅谈js使用in和hasOwnProperty获取对象属性的区别

    in判断的是对象的所有属性,包括对象实例及其原型的属性: 而hasOwnProperty则是判断对象实例的是否具有某个属性. 示例代码: <script type="text/javascript"> function Person(){ } Person.prototype.name = "allen"; var person = new Person(); console.log(person.hasOwnProperty("name&qu

  • Javascript hasOwnProperty 方法 & in 关键字

    此方法无法检查该对象的原型链中是否具有该属性:该属性必须是对象本身的一个成员. in 操作检查对象中是否有名为 property 的属性.也可以检查对象的原型,判断该属性是否为原型链的一部分. 复制代码 代码如下: function Test(){ this. a= 'abc'; } Test.prototype.b='efg'; var test=new Test; alert(test.hasOwnProperty('a'));//输出 true alert(test.hasOwnPrope

  • Javascript中的for in循环和hasOwnProperty结合使用

    与in操作符相比,for in 在循环对象的属性时也会遍历原型链,for in 不会读取不可枚举属性,如数组的length属性. 小结 当检测某个对象是否拥有某个属性时,hasOwnProperty 是唯一可以完成这一任务的方法,在 for in 循环时,建议增加 hasOwnProperty 进行判断,可以有效避免扩展本地原型而引起的错误. 与in操作符相比,for in 在循环对象的属性时也会遍历原型链,for in 不会读取不可枚举属性,如数组的length属性. 复制代码 代码如下: /

  • JavaScript中三种for循环语句的使用总结（for、for...in、for...of）

    前言 每个接触JS的开发人员都不可避免的与for循环打交道,毕竟这是遍历必不可少的工具之一.JavaScript 中的 for 循环语句相信大家都已经快用厌了,现在有好多文章都在讲怎么减少代码中的 for 循环语句,但是,你又不得不承认它们真的很有用.今天,我来总结一下前端 JavaScript 中三种 for 循环语句. for 这大概是应用最广的循环语句了吧,简单实用,且大多数时候性能还是在线的,唯一的缺点大概就是太普通,没有特色,导致很多人现在不愿用它. const array = [4,

  • 详解JavaScript中哪一种循环最快呢

    了解哪一种 for 循环或迭代器适合我们的需求,防止我们犯下一些影响应用性能的低级错误. JavaScript 是 Web 开发领域的"常青树".无论是 JavaScript 框架(如 Node.js.React.Angular.Vue 等),还是原生 JavaScript,都拥有非常庞大的粉丝基础.我们来谈谈现代 JavaScript 吧.循环一直是大多数编程语言的重要组成部分,而现代 JavaScript 为我们提供了许多迭代或循环值的方法. 但问题在于,我们是否真的知道哪种循环或

  • 简单学习JavaScript中的for语句循环结构

    可以直接看示例,用得太多了,很简单 (function() { for(var i=0, len=demoArr.length; i<len; i++) { if (i == 2) { // return; // 函数执行被终止 // break; // 循环被终止 continue; // 循环被跳过 }; console.log('demo1Arr['+ i +']:' + demo1Arr[i]); } })(); 关于for循环,有一下几点需要注意 for循环中的i在循环结束之后任然存在

  • JavaScript 中的12种循环遍历方法【总结】

    1.for 循环 let arr = [1,2,3]; for (let i=0; i<arr.length; i++){ console.log(i,arr[i]) } // 0 1 // 1 2 // 2 3 for 循环是 Js 中最常用的一个循环工具,经常用于数组的循环遍历. 2.for in 循环 let obj = {name:'zhou',age:'**'} for(let i in obj){ console.log(i,obj[i]) } // name zhou // age

  • 如何在JavaScript中优雅的提取循环内数据详解

    前言 在本文中,我们将介绍两种提取循环内数据的方法:内部迭代和外部迭代.分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 循环 举个例子,假设有一个函数 logFiles(): const fs = require('fs'); const path = require('path'); function logFiles(dir) { for (const fileName of fs.readdirSync(dir)) { // (A) const filePath = pat

  • javascript每日必学之循环

    javascript每日必学之循环

    朋友们大家好,今天,我们继续接着前面的内容讲,前们我们已经讲了条件分支,今天我们就讲循环,顾名思义就是,重复执行相同的操作,正常循环是受程序控制的,不正常的情况,就会出现死循环,那就是我们的代码中出现bug,那样,我们还要学会调式bug,等我们先把基础知识讲完了之后,我还会专门用篇幅来讲解浏览器里面的调试,那种程序就会在我们掌控之中,这才是我们想要结果. 循环包括的结构体有 for , while , do--while,for循环有两种形式的存在,一种是数字变量变化所引起的循环,另一种就是fo

  • JavaScript中for..in循环陷阱介绍

    大家都知道在JavaScript中提供了两种方式迭代对象: (1)for 循环: (2)for..in循环: 使用for循环进行迭代数组对象,想必大家都已经司空见惯了.但是,使用for.. in循环时,大家可要注意了,为什么这么说呢?大家听我娓娓道来.... javascript提供了一种特殊的循环(也就是for .. in循环),用来迭代对象的属性或数组的每个元素,for...in循环中的循环计数器是字符串,而不是数字.它包含当前属性的名称或当前数组元素的索引. 案例一: 复制代码 代码如下:

  • 深入理解JavaScript中的for循环

    本文对一个循环分享的这么详细,相信看完你会有所收获.下面话不多说,来看看详细的介绍吧. 在ECMAScript5(简称 ES5)中,有三种 for 循环,分别是: 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6(简称 ES6)中,新增了一种循环,是: for-of 下面我们就来看看这 4 种 for 循环. 简单 for 循环 下面先来看看大家最常见的一种写法: const arr = [1, 2, 3]; for(let i = 0; i < ar

  • JavaScript中对循环语句的优化技巧深入探讨

    JavaScript中对循环语句的优化技巧深入探讨

    循环是所有编程语言中最为重要的机制之一,几乎任何拥有实际意义的计算机程序(排序.查询等)都里不开循环. 而循环也正是程序优化中非常让人头疼的一环,我们往往需要不断去优化程序的复杂度,却因循环而纠结在时间复杂度和空间复杂度之间的抉择. 在 javascript 中,有3种原生循环,for () {}, while () {}和do {} while (),其中最为常用的要数for () {}. 然而for正是 javascript 工程师们在优化程序时最容易忽略的一种循环. 我们先来回顾一下for

随机推荐