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

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

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

思考下面一段代码:

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

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

// for-in 循环
for (var i in man) {
if (man.hasOwnProperty(i)) { // 过滤
console.log(i, ":", man[i]);
}
}
/* 控制台显示结果
hands : 2
legs : 2
heads : 1
*/ // 反面例子:
// for-in loop without checking hasOwnProperty()
for (var i in man) {
console.log(i, ":", man[i]);
}
/*
控制台显示结果
hands : 2
legs : 2
heads : 1
clone: function()
*/

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

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

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

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

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

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

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

总结一下下:

1、顺序不确定。

2、enumerable为false时不会出现。

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

												

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. ylbtech-Unitity-CS:Generics

    ylbtech-Unitity-CS:Generics 1.A,效果图返回顶部 Unsorted List: Raul:35 Alessandro:30 Maria:72 Hiroyuki:108 A ...

  2. HTTP Get请求URL最大长度

    各浏览器HTTP Get请求URL最大长度并不相同,几类常用浏览器最大长度及超过最大长度后提交情况如下: IE6.0                :url最大长度2083个字符,超过最大长度后无法提 ...

  3. jquery点击改变class并toggle;jquery点击改变图片src源码并toggle;jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

  4. Python开发专业工具推荐

    PyCharm,jetbrains公司出品,必是精品!! 版本:2016.3.1 下载:https://www.jetbrains.com/pycharm/download/#section=wind ...

  5. UTF-8 GB2321

    已知:汉字“你”UTF8编码是 0xe4bda0,GBK编码是 0xc4e3,求证. 0xe4bda0 → 2进制11100100 10111101 10100000 → UTF8 3字节111001 ...

  6. 新浪SAE使用Thinkphp框架,禁用memcache节省豆子的方法

    请在入口文件定义常量,SAE_RUNTIME为true请在本地打开命令行, cd 到项目所在文件夹,执行命令: php index.php 此时会在./App/Sae_Runtime目录下批量生成缓存 ...

  7. asp.net子窗体与父窗体交互

    今天在项目上遇到了这个问题,其实只是window.returnValue的简单应用,不是asp.net的专属内容.作为积累,记录一个简单的实现模型. 图1  用到的文件 从图1中我们可以看到,只用到了 ...

  8. reverse list

    public void reverse (){ Node end =null,p,q; p=head; //p代表当前节点,end代表翻转后p后面的,q代表翻转前p后面的 while(p!=null) ...

  9. relatedTarget、fromElement、toElement之间的关系

    在发生mouseover和mouseout事件时会把鼠标指针从一个元素的边界之内移到另一个元素边界之内.对 mouseover事件而言,事件的target是获得光标的元素,而relatedTarget ...

  10. 06-CABasicAnimation基础核心动画

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...