for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为“枚举”。

从技术上将,你可以使用for-in循环数组(因为JavaScript中数组也是对象),但这是不推荐的。因为如果数组对象已被自定义的功能增强,就可能发生逻辑错误。另外,在for-in中,属性列表的顺序(序列)是不能保证的。所以最好数组使用正常的for循环,对象使用for-in循环。

有个很重要的hasOwnProperty()方法,当遍历对象属性的时候可以过滤掉从原型链上下来的属性。

思考下面一段代码:

  1. // 对象
  2. var man = {
  3. hands: 2,
  4. legs: 2,
  5. heads: 1
  6. };
  7.  
  8. // 在代码的某个地方
  9. // 一个方法添加给了所有对象
  10. if (typeof Object.prototype.clone === "undefined") {
  11. Object.prototype.clone = function () {};
  12. }

在这个例子中,我们有一个使用对象字面量定义的名叫man的对象。在man定义完成后的某个地方,在对象原型上增加了一个很有用的名叫 clone()的方法。此原型链是实时的,这就意味着所有的对象自动可以访问新的方法。为了避免枚举man的时候出现clone()方法,你需要应用hasOwnProperty()方法过滤原型属性。如果不做过滤,会导致clone()函数显示出来,在大多数情况下这是不希望出现的。

  1. // for-in 循环
  2. for (var i in man) {
  3. if (man.hasOwnProperty(i)) { // 过滤
  4. console.log(i, ":", man[i]);
  5. }
  6. }
  7. /* 控制台显示结果
  8. hands : 2
  9. legs : 2
  10. heads : 1
  11. */
  12.  
  13. // 反面例子:
  14. // for-in loop without checking hasOwnProperty()
  15. for (var i in man) {
  16. console.log(i, ":", man[i]);
  17. }
  18. /*
  19. 控制台显示结果
  20. hands : 2
  21. legs : 2
  22. heads : 1
  23. clone: function()
  24. */

另外一种使用hasOwnProperty()的形式是取消Object.prototype上的方法。像这样:

  1. for (var i in man) {
  2. if (Object.prototype.hasOwnProperty.call(man, i)) { // 过滤
  3. console.log(i, ":", man[i]);
  4. }
  5. }

其好处在于在man对象重新定义hasOwnProperty情况下避免命名冲突。也避免了长属性查找对象的所有方法,你可以使用局部变量“缓存”它。

  1. var i, hasOwn = Object.prototype.hasOwnProperty;
  2. for (i in man) {
  3. if (hasOwn.call(man, i)) { // 过滤
  4. console.log(i, ":", man[i]);
  5. }
  6. }

严格来说,不使用hasOwnProperty()并不是一个错误。根据任务以及你对代码的自信程度,你可以跳过它以提高些许的循环速度。但是当你对当前对象内容(和其原型链)不确定的时候,添加hasOwnProperty()更加保险些。

格式化的变化(通不过JSLint)会直接忽略掉花括号,把if语句放到同一行上。其优点在于循环语句读起来就像一个完整的想法(每个元素都有一个自己的属性”X”,使用”X”干点什么):

  1. // 警告: 通不过JSLint检测
  2. var i, hasOwn = Object.prototype.hasOwnProperty;
  3. for (i in man) if (hasOwn.call(man, i)) { // 过滤
  4. console.log(i, ":", man[i]);
  5. }

总结一下下:

1、顺序不确定。

2、enumerable为false时不会出现。

3、for in对象属性时受原型链影响。

  1.  

javascript之for-in循环(for-in Loops)的更多相关文章

  1. JavaScript的几种循环方式

    JavaScript提供了许多通过LOOPS迭代的方法.本教程解释了现代JAVASCRIPT中各种各样的循环可能性 目录: for forEach do...while while for...in ...

  2. SharePoint 自定义的列表页面中添加javascript的一个 For循环语句后,该页面就打不开了。

    一个sharepoint 2013的普通的列表的自定义新建页面,我在其中新添加几行javascript代码后页面就打不开了.如图所示: 真是一言不合,友谊的页面说打不开就打不开啊.后来慢慢比对发现是因 ...

  3. JavaScript 中 for in 循环和数组的问题

    本文由 伯乐在线 - ElvisKang 翻译,进林 校稿.未经许可,禁止转载!英文出处:adripofjavascript.com.欢迎加入翻译小组. JavaScript的for…in循环用于迭代 ...

  4. C++ 11 学习2:空指针(nullptr) 和 基于范围的for循环(Range-based for loops)

    3.空指针(nullptr) 早在 1972 年,C语言诞生的初期,常数0带有常数及空指针的双重身分. C 使用 preprocessor macroNULL 表示空指针, 让 NULL 及 0 分别 ...

  5. 深入理解javascript中的事件循环event-loop

    前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...

  6. [译]Javascript中的for循环

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  7. [译]Javascript中的do-while循环

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  8. 特殊例子--JavaScript代码实现图片循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JavaScript中的事件循环机制跟函数柯里化

    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...

  10. Javascript初学篇章_4(循环与函数)

    七.循环语句 1.While 语法: while (exp){ //statements; } 说明: while (变量<=结束值){ 需执行的代码 } 例: var i=0; while(i ...

随机推荐

  1. mapreduce任务中Shuffle和排序的过程

    mapreduce任务中Shuffle和排序的过程 流程分析: Map端: 1.每个输入分片会让一个map任务来处理,默认情况下,以HDFS的一个块的大小(默认为64M)为一个分片,当然我们也可以设置 ...

  2. centos下yum安装wget失败

    执行了yum -y install wget后得到下面的提示 Failed to set locale, defaulting to C Loaded plugins: fastestmirror L ...

  3. java反射生成ORM

    package com.wzh.jdbc; import java.lang.reflect.Field;import java.sql.Connection;import java.sql.Prep ...

  4. Spring读取配置文件

    在spring中可以通过下面的方式将配置文件中的项注入到配置中 <bean class="org.springframework.beans.factory.config.Proper ...

  5. Mongo 备份 还原

    表还原 mongorestore --collection Inquiry0315 -d Estate --drop --dir D:/backup/20150731/Estate/Inquiry.b ...

  6. 算法库:OpenCV3编译配置

    2016-01-20  23:55 更新: 关于Opencv3.1的lib文件 opencv_aruco310d.libopencv_bgsegm310d.libopencv_bioinspired3 ...

  7. 蓝桥杯---汉字取首字母(位运算 & 水题)

    确实题目虽然有点水,但是开始的时候好像还真的没有想到怎么提取出这个编号一不小心感觉可以可以用unsigned char 这种类型,直接转为16进制,但是之后发现虽然第一次在codeblock中还行,但 ...

  8. PetaPoco修改

    else if (type == typeof(decimal)) return (decimal)pk == default(decimal); public override void PreEx ...

  9. UVA 10245 - The Closest Pair Problem

    Problem JThe Closest Pair ProblemInput: standard inputOutput: standard outputTime Limit: 8 secondsMe ...

  10. xUtils框架介绍(三)

    接上回,继续介绍xUtils的最后两个模块:DbUtils和HttpUtils.首先先介绍第一个SQLite数据库操纵的简单ORM框架,只要能理解xUtils为我们提供的api,相信你也能熟练的把Db ...