本文由 伯乐在线 - ElvisKang 翻译，进林 校稿。未经许可，禁止转载！
英文出处：adripofjavascript.com。欢迎加入翻译小组。

JavaScript的for…in循环用于迭代访问对象中的可枚举（enumerable）属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var tMinus = {
    two: "Two",
    one: "One",
    zero: "Blast off!"
};
 
var countdown = "";
 
for (var step in tMinus) {
    countdown += tMinus[step] + "n";
}
 
console.log(countdown);
// => "Two
//    One
//    Blast Off!
//    "

因为for…in循环支持所有的JavaScript对象，所以它同样可用于数组对象之中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var tMinus = [
    "Two",
    "One",
    "Blast off!"
];
 
var countdown = "";
 
for (var step in tMinus) {
    countdown += tMinus[step] + "n";
}
 
console.log(countdown);
// => "Two
//    One
//    Blast Off!
//    "

然而，以这样的方式遍历数组存在三个问题。首先，for…in循环会遍历数组对象的原型链中所有的可枚举属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Array.prototype.voice = "James Earl Jones";
 
var tMinus = [
    "Two",
    "One",
    "Blast off!"
];
 
var countdown = "";
 
for (var step in tMinus) {
    countdown += tMinus[step] + "n";
}
 
console.log(countdown);
// => "Two
//    One
//    Blast Off!
//    James Earl Jones
//    "

不过，我们可以借助hasOwnProperty函数来避免这一问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Array.prototype.voice = "James Earl Jones";
 
var tMinus = [
    "Two",
    "One",
    "Blast off!"
];
 
var countdown = "";
 
for (var step in tMinus) {
    if (tMinus.hasOwnProperty(step)) {
        countdown += tMinus[step] + "n";
    }
}
 
console.log(countdown);
// => "Two
//    One
//    Blast Off!
//    "

此外，在ECMAScript5.1规范中提到，for…in循环可能以任意顺序来遍历对象的属性。

对于无序的普通对象来说，属性的访问顺序无关紧要。但有时候你可能不想Javascript engine以随机顺序处理你的数组元素，因为它会导致不可预知的结果：

1
2
3
4
5
console.log(countdown);
// => "Blast Off!
//    One
//    Two
//    "

最后，for…in循环除了访问数组元素以外，还会访问其它的可遍历属性。正如我们在之前的文章所提到的，我们可以向数组变量添加额外的属性。而这样的操作同样会导致不可预知的后果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var tMinus = [
    "Two",
    "One",
    "Blast off!"
];
 
tMinus.announcer = "Morgan Freeman";
 
var countdown = "";
 
for (var step in tMinus) {
    if (tMinus.hasOwnProperty(step)) {
        countdown += tMinus[step] + "n";
    }
}
 
console.log(countdown);
// => "Two
//    One
//    Blast Off!
//    Morgan Freeman
//    "

由此可见，当你需要遍历数组元素的时候，应使用for循环或者数组对象的内置迭代函数（如forEach、map等），而不是for…in循环。

JavaScript 中 for in 循环和数组的问题的更多相关文章

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

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

  2. [译]Javascript中的for循环

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

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

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

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

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

  5. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  6. 深入了解 JavaScript 中的 for 循环

    在ECMAScript5(简称 ES5)中,有三种 for 循环,分别是: 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6(简称 ES6)中,新增了一种循 ...

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

    for...in循环中的循环计数器是字符串,而不是数字它包含当前属性的名称或当前数组元素的索引,下面有个不错的示例大家可以参考下   大家都知道在JavaScript中提供了两种方式迭代对象: (1) ...

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

    JavaScript 支持不同类型的循环: for - 循环代码块一定的次数 for/in - 循环遍历对象的属性 while - 当指定的条件为 true 时循环指定的代码块 do/while - ...

  9. 深入了解JavaScript中的for循环

    在ECMAScript5中,有三种for循环,分别是: 简单for循环 for-in forEach 在ES6中,新增了一种循环 for-of 简单for循环 const arr = [1, 2, 3 ...

随机推荐

  1. 深入浅出jsonp

    前言 第一次听说jsonp,其实早在2年之前.当时在做一个活动页面的抽奖模块,要从服务端get一个概率,当时什么都不懂,同事说用ajax,我就用ajax,同事说dataType改成jsonp,我就改成 ...

  2. DateTime.Parse

    上月第一天:DateTime.Parse(DateTime.Now.AddMonths(-1).ToString("yyyy-MM-01")) 上周星期天:DateTime.Par ...

  3. [工具类]泛型集合转换为DataTable

    写在前面 在实际项目中,用到了将集合转换为DataTable,就试着封装了一个方法,记录一下. 代码 using System; using System.Collections.Generic; u ...

  4. [c#基础]集合foreach的必要条件和自定义集合

    引言 最近翻看了之前的学习笔记,看到foreach,记得当时老师讲的时候,有点犯浑,不是很明白,这好比,上小学时,你不会乘法口诀,但是随着时间的增长,你不自觉的都会了,也悟出个小道理,有些东西,你当时 ...

  5. xml基本操作

    在实际项目中遇到一些关于xml操作的问题,被逼到无路可退的时候终于决定好好研究xml一番.xml是一种可扩展标记语言,可跨平台进行传输,因此xml被广泛的使用在很多地方. 本文由浅入深,首先就xml的 ...

  6. Javascript基础系列之（七）函数（定义和调运函数）

    函数是一个可以随时运行的语句,简单说,函数是完成某个功能的一组语句,它接受0或者多个参数. 函数的基本语法如下 function functionName([arg0,arg1,......argN] ...

  7. Ibatis对日期的处理

    最近在项目中出现两种情况(因为项目比较早,经历各个版本的改动,所有设计不一致),第一种:数据库中某一字段为Date类型,对应的bean中的类型为java.util.Date,所有在对应的映射中会出现字 ...

  8. 你也可以当面霸-Servlet与JSP的原理及特点

    既然是面试系列,就是面试官和应聘者之间的对话.本文是采用一问一答的形式呈现给读者的,这样能有一个明确的考察点,不像理论知识那么枯燥. 01.什么是Servlet技术 Servlet是和平台无关的服务器 ...

  9. 【前端】less学习

    Less 是什么? Less is more,than CSS. Less就是搞笑高效编写和维护CSS的一种语法. 1.下载Koala考拉,一款国人编写的less开发器. 2.可以用Sublime T ...

  10. 【ZOJ 3870】 Team Formation

    题意 n个数,找出有几对a.b 符合 a ^ b > max(a,b) .^表示异或号 分析 对于数a,如果它的二进制是: 1 0 1  0 0 1,那么和它 ^ 后 能比他大的数就是: 0 1 ...