Skip to content

四火的唠叨

一个纯正程序员的啰嗦

Menu
  • 所有文章
  • About Me
  • 关于四火
  • 旅行映像
  • 独立游戏
  • 资源链接
Menu

JavaScript 使用 for 循环时出现的问题

Posted on 05/25/201306/23/2019 by 四火

javascript 这个问题的讨论最初来自公司内部邮件,我只是把这个问题的讨论内容记录下来。

有一些项目组在定位问题的时候发现,在使用 “for(x in array)” 这样的写法的时候,在 IE 浏览器下,x 出现了非预期的值。

具体说,如果自定义了 Array.prototype.indexOf 方法(譬如源于某 prototype 污染),也许是因为老版本 IE 浏览器并不支持 array.indexOf 方法,而开发者又很想用,那么这样的浏览器可能会出现这样的问题:

Array.prototype.indexOf = function(){...};
var arr = [1, 2];
for (x in arr) console.log(x);

//会输出

1
2
function(){…}

换句话说,把 indexOf 这个方法给输出出来了。

解决方法很简单,要么别添加这个方法,要么用 “for (i=0; i < array.length; i++)” 这样的循环等等。

但是问题的本质呢?有人猜测,可能是因为 for(x in obj) 这种用法其实是去遍历一个对象,而 array 的实现其实也和普通的 object 一致,只不过 key 是既定的数值而已:

{0:"something", 1:"something else"}

在一则 stackoverflow 的问答里面也提到了,遍历数组的时候用 for…in 和 for(;;) 的区别,前者的含义是枚举对象的属性,存在这样两个问题:

  • 枚举的顺序无法被保证;
  • 继承属性也被枚举出来;

在对 Array.prototype.forEach 的支持上,从这张表中也可以明确看到,IE8 及以下版本是无法准确支持的:

image

这里还有对 forEach 方法兼容性的详细阐述。事实上,主要的 JavaScript 框架(比如 jQuery、Underscore 和 Prototype 等等)都有安全和通用的 for-each 功能实现。

在 JSLint 的 for in 章节里面也提到,for in 语句允许循环遍历对象的属性名,但是也会遍历到那些通过原型链继承下来的属性,这在很多情况下都会造成预期以外的错误。有一种粗暴的解决办法:

for (name in object) { if (object.hasOwnProperty(name)) { .... } }

还有人提到了使用 for(var i=0;i<length;i++) 类似这样的循环时的问题,因为 JavaScript 没有代码块级别的变量,所以这里的 i 的访问权限其实是所在的方法。有的书上会建议程序员把这样的变量声明放到一处去,但是从直观性上说,在大部分情况下都不够合理。使用 JavaScript 1.7 中引入的 “let”可以解决这个问题,使 i 成为真正的代码块级别的变量:

for(let i =0; i < a.length; i++)

最后,在 Google 的 JavaScript 风格导引里面,也涉及到了这个约束:

for-in loop:
Only for iterating over keys in an object/map/hash

文章未经特殊标明皆为本人原创,未经许可不得用于任何商业用途,转载请保持完整性并注明来源链接 《四火的唠叨》

×Scan to share with WeChat

你可能也喜欢看:

  1. Javascript Memoizer
  2. JavaScript 3D 图表
  3. JavaScript 实现继承的几种方式
  4. 史上最烂的代码
  5. 从 JavaScript 的单线程执行说起

3 thoughts on “JavaScript 使用 for 循环时出现的问题”

  1. 阿J小虫 says:
    06/20/2013 at 10:26 AM

    你的输出不对吧,我在 chrome 中输出为:
    0
    1
    each
    在 IE8 下识别不了 console 对象,如果 alert 出来,结果是:
    0
    1
    indexOf

    Reply
  2. 预流 says:
    06/03/2013 at 5:13 PM

    呵呵呵,stackoverflow 是个好网站。

    Reply
  3. muzuiget says:
    05/26/2013 at 12:21 PM

    Javascript 这个问题确实很烦人。let 语句那个是 Firefox 的私有实现,Chrome 是不支持的。Firefox 还内建 Iterator 对象来重新包装对象属性,使之像 for in 对数组和当字典用的对象操作起来像其它语言的做法。还有个简写语句 for of。
    当然这些私有 api 只能写 Firefox 扩展用一下,一般页面貌似目前还是得老实用下标法。
     

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

订阅·联系

四火,啰嗦的程序员一枚,现居西雅图

Amazon Google Groovy Hadoop Haskell Java JavaScript LeetCode Oracle Spark 互联网 亚马逊 前端 华为 历史 同步 团队 图解笔记 基础设施 工作 工作流 工具 工程师 应用系统 异步 微博 思考 技术 数据库 曼联 测试 生活 眼界 程序员 管理 系统设计 缓存 编程范型 美股 英语 西雅图 设计 问题 面向对象 面试

分类

  • Algorithm and Data Structure (30)
  • Concurrency and Asynchronization (6)
  • System Architecture and Design (43)
  • Distributed System (18)
  • Tools Frameworks and Libs (13)
  • Storage and Data Access (8)
  • Front-end Development (33)
  • Programming Languages and Paradigms (55)
  • Testing and Quality Assurance (4)
  • Network and Communication (6)
  • Authentication and Authorization (6)
  • Automation and Operation Excellence (13)
  • Machine Learning and Artificial Intelligence (6)
  • Product Design (7)
  • Hiring and Interviews (14)
  • Project and Team Management (14)
  • Engineering Culture (17)
  • Critical Thinking (25)
  • Career Growth (57)
  • Life Experience and Thoughts (45)

推荐文章

  • 聊一聊分布式系统中的时间
  • 谈谈分布式锁
  • 常见分布式系统设计图解(汇总)
  • 系统设计中的快速估算技巧
  • 从链表存在环的问题说起
  • 技术面试中,什么样的问题才是好问题?
  • 从物理时钟到逻辑时钟
  • 近期面试观摩的一些思考
  • RSA 背后的算法
  • 谈谈 Ops(汇总 + 最终篇):工具和实践
  • 不要让业务牵着鼻子走
  • 倔强的程序员
  • 谈谈微信的信息流
  • 评审的艺术——谈谈现实中的代码评审
  • Blog 安全问题小记
  • 求第 K 个数的问题
  • 一些前端框架的比较(下)——Ember.js 和 React
  • 一些前端框架的比较(上)——GWT、AngularJS 和 Backbone.js
  • 工作流系统的设计
  • Spark 的性能调优
  • “残酷” 的事实
  • 七年工作,几个故事
  • 从 Java 和 JavaScript 来学习 Haskell 和 Groovy(汇总)
  • 一道随机数题目的求解
  • 层次
  • Dynamo 的实现技术和去中心化
  • 也谈谈全栈工程师
  • 多重继承的演变
  • 编程范型:工具的选择
  • GWT 初体验
  • java.util.concurrent 并发包诸类概览
  • 从 DCL 的对象安全发布谈起
  • 不同团队的困惑
  • 不适合 Hadoop 解决的问题
  • 留心那些潜在的系统设计问题
  • 再谈大楼扔鸡蛋的问题
  • 几种华丽无比的开发方式
  • 我眼中的工程师文化
  • 观点的碰撞
  • 谈谈盗版软件问题
  • 对几个软件开发传统观点的质疑和反驳
  • MVC 框架的映射和解耦
  • 编程的未来
  • DAO 的演进
  • 致那些自嘲码农的苦逼程序员
  • Java 多线程发展简史
  • 珍爱生命,远离微博
  • 网站性能优化的三重境界
  • OSCache 框架源码解析
  • “ 你不适合做程序员”
  • 画圆画方的故事

近期评论

  • Ticket: TRANSACTION 1.922915 BTC. Go to withdrawal >> https://yandex.com/poll/enter/BXidu5Ewa8hnAFoFznqSi9?hs=20bd550f65c6e03103876b28cabc4da6& on 倔强的程序员
  • panshenlian.com on 初涉 ML Workflow 系统:Kubeflow Pipelines、Flyte 和 Metaflow
  • panzhixiang on 关于近期求职的近况和思考
  • Anonymous on 闲聊投资:亲自体验和护城河
  • 四火 on 关于近期求职的近况和思考
  • YC on 关于近期求职的近况和思考
  • mafulong on 常见分布式基础设施系统设计图解(四):分布式工作流系统
  • 四火 on 常见分布式基础设施系统设计图解(八):分布式键值存储系统
  • Anonymous on 我裸辞了
  • https://umlcn.com on 资源链接
© 2025 四火的唠叨 | Powered by Minimalist Blog WordPress Theme