`

JavaScript Garden - for in 循环

阅读更多

for in 循环

和 in 操作符一样,for in 循环同样在查找对象属性时遍历原型链上的所有属性。

注意: for in 循环不会遍历那些 enumerable 设置为 false 的属性;比如数组的 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。不要对代码运行的环境做任何假设,不要假设原生对象是否已经被扩展了。

分享到:
评论

相关推荐

    PHP, MySQL & JavaScript All-in-One For Dummies epub

    PHP, MySQL & JavaScript All-in-One For Dummies 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书

    vue-for循环嵌套操作示例

    v-for指令的基本语法是v-for="item in items",其中items是你想要迭代的数组,item是当前项在数组中的引用。在文档中的实例代码里,我们看到了如何使用v-for来迭代parentList数组,并在每个父列表项内部再迭代一个...

    JavaScript应用实例-004-循环for.js

    JavaScript应用实例-004-循环for.js

    在vue的v-for中使用索引index值

    当我们需要在`v-for`循环中跟踪每个项目的唯一标识或执行特定操作时,可以利用其提供的索引`index`值。下面我们将详细探讨在Vue的`v-for`中如何使用索引`index`值。 首先,`v-for`语法的基本形式是: ```html ...

    基于vue v-for 多层循环嵌套获取行数的方法

    本文将详细探讨在Vue中通过v-for实现多层循环嵌套时如何获取行数的方法。 ### 知识点一:v-for指令基础 v-for指令是Vue模板语法中用于渲染列表数据的一个重要工具。它可以通过一个数组或对象来遍历出多个节点。...

    JavaScript之for循环语句(源代码)

    JavaScript之for循环语句(源代码)JavaScript之for循环语句(源代码)JavaScript之for循环语句(源代码)JavaScript之for循环语句(源代码)JavaScript之for循环语句(源代码)JavaScript之for循环语句(源代码)JavaScript之...

    06-for-in和for-of的区别.md

    ## for-in循环 `for-in`循环用于遍历对象的可枚举属性。通常用于对象和数组,但是在数组上的使用受到限制和争议。当使用`for-in`循环遍历数组时,它实际上返回的是数组元素的键(索引),而不是它们的值。 ```js ...

    Vue中控制v-for循环次数的实现方法

    但是,在某些情况下,我们可能需要限制v-for循环的次数,而不是遍历整个数组。这篇文章将详细探讨如何在Vue中控制v-for循环的次数。 首先,我们可以通过数组的slice方法来截取数组的一部分,从而控制循环的次数。...

    全面解析JavaScript里的循环方法之forEach,for-in,for-of

    在JavaScript中,有三种主要的循环方法:`forEach`、`for-in`和`for-of`,每种都有其特定的用途和特点。 `forEach`方法是ES5引入的一个数组方法,简化了对数组元素的遍历。例如: ```javascript myArray.forEach...

    JavaScript中的for/in循环的例子

    可以很容易理解javascript的for in循环的使用

    ArcGis-for-javaScript最全中文API.pdf

    ArcGIS JavaScript API 介绍与示例 ArcGIS JavaScript API 是 ESRI 提供的一种基于 JavaScript 的开发工具,允许开发者创建交互式的 Web 地图应用程序。本文将对 ArcGIS JavaScript API 进行详细的介绍,并提供多个...

    javascript经典特效---循环的警告框.rar

    2. **循环逻辑**:然后,定义一个函数来执行弹出警告框的动作,并在函数内部使用`while`或`for`循环来控制弹出次数。循环条件可能是计数器未达到预设值,或者用户没有关闭警告框。 3. **暂停与恢复**:为了防止过度...

    Vue用v-for给循环标签自身属性添加属性值的方法

    本文将详细介绍三种在Vue中使用`v-for`给循环标签自身属性添加属性值的方法。 ### 方法一:动态绑定属性 在第一个示例中,我们看到尝试在`<Radio>`标签上设置`label`属性时遇到了问题。原始代码如下: ```html ...

    详解在Vue.js编写更好的v-for循环的6种技巧

    在Vue.js中,v-for循环是模板编程中的关键特性,用于动态渲染列表或者遍历数据。以下六个技巧可以帮助你写出更高效、可维护的v-for循环: 1. **始终在v-for循环中使用`:key`** 在使用v-for时,应该给每个迭代元素...

    vue v-for直接循环数字实例

    在这个实例中,我们将详细探讨如何使用 `v-for` 直接循环数字。 在Vue中,`v-for` 的基本语法是这样的: ```html <element v-for="(item, index) in array" :key="index"> ``` 通常,`v-for` 与数组配合使用,但...

    cookie-garden-helper:在游戏中使您的花园自动化Cookie Clicker

    mod会循环遍历每个未锁定的图块,然后尝试根据激活的内容进行自动收获或自动种植。 自动收获 首先,它将检查图块是否为空。 如果不是,它将检查植物是否不朽。 如果是,并且“避免不朽”选项为ON ,

    javascript garden

    ### JavaScript Garden:深入探讨JavaScript中的陷阱与注意事项 #### 引言 《JavaScript Garden》是一份不断更新、详尽记录了JavaScript编程语言中最易犯错误、陷阱及细微问题的指南。该文档不仅帮助开发者规避常见...

    javascript中for/in循环及使用技巧

    其中,“for/in循环”是JavaScript中一个非常有用的循环结构,主要用于遍历对象的可枚举属性,也可以用于数组。然而,在使用for/in循环时,有一些细节和技巧需要了解和掌握,以确保代码的正确性和效率。本篇文章将...

    vue2.0使用v-for循环制作多级嵌套菜单栏

    首先,我们需要理解`v-for`循环在Vue中的工作原理。`v-for`是用来遍历数组或对象的指令,其基本语法如下: ```html <element v-for="item in items" :key="item.id"> <!-- 内容 --> ``` 这里的`items`是你要遍历...

    解决vue的 v-for 循环中图片加载路径问题

    在Vue.js应用中,`v-for`循环常用于渲染列表数据。然而,在处理图片加载时,尤其是在图片路径与数据动态绑定的情况下,可能会遇到一些问题。本文将深入探讨如何解决Vue的`v-for`循环中图片加载路径的问题。 首先,...

Global site tag (gtag.js) - Google Analytics