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

本文由 伯乐在线 - 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循环。

时间: 2024-07-29 04:41:26

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

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

前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 为了利用多核CPU的计算能力,HTML

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

for...in循环中的循环计数器是字符串,而不是数字它包含当前属性的名称或当前数组元素的索引,下面有个不错的示例大家可以参考下 大家都知道在JavaScript中提供了两种方式迭代对象: (1)for 循环: (2)for..in循环: 使用for循环进行迭代数组对象,想必大家都已经司空见惯了.但是,使用for.. in循环时,大家可要注意了,为什么这么说呢?大家听我娓娓道来.... javascript提供了一种特殊的循环(也就是for .. in循环),用来迭代对象的属性或数组的每个元素,

深入了解 JavaScript 中的 for 循环

学习前端的同学注意了!!! 学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入前端学习交流群,群号码:328058344   在ECMAScript5(简称 ES5)中,有三种 for 循环,分别是: 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6(简称 ES6)中,新增了一种循环,是: for-of 下面我们就来看看这 4 种 for 循环. 简单 for 循环 下面先来看看大家最常见的一种写法: const arr = [1, 2, 3];

JavaScript中十种一步拷贝数组的方法

JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下. 1.扩展运算符(浅拷贝) 自从ES6出现以来,这已经成为最流行的方法.它是一个很简单的语法,但是当你在使用类似于React和Redux这类库时,你会发现它是非常非常有用的. numbers = [1, 2, 3]; numbersCopy = [...numbers]; 这个方法不能有效的拷贝多维数组.数组/对象值的拷贝是通过引用而不是值复制. // ?? numbersCopy.push(4

JavaScript中如何判断变量是数组、函数或是对象类型

数组 ECMAScript5中Array.isArray是原生的判断数组的方法,IE9及以上支持.考虑到兼容性,在没有此方法的浏览器中,可以使用 Object.prototype.toString.call(obj) === '[object Array]'替代. var isArray = Array.isArray || function(obj) {     return Object.prototype.toString.call(obj) === '[object Array]'; }

JavaScript中如何判断变量是数组、函数还是对象类型

数组 ECMAScript5中Array.isArray是原生的判断数组的方法,IE9及以上支持.考虑到兼容性,在没有此方法的浏览器中,可以使用Object.prototype.toString.call(obj) === '[object Array]'替代. var isArray = Array.isArray || function(obj) { return Object.prototype.toString.call(obj) === '[object Array]'; } 函数 最

JavaScript基础 使用for循环遍历数组 并 查询 数组中是否存在指定的值

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

JavaScript中for..in循环陷阱

好久没有blog了,要不是今晚被一个小小的难题困住了,我是要继续懈怠下去的.这个小小的问题就是:从一个数组中的每一个元素都取出同一个属性,然后把这些属性加在一起.数组的每个元素的类型相同,包含多个属性,区别在于属性的取值不同. 一开始,采取for in方法来迭代数组: //假设被迭代的数组为items = [{a:'10',b:'11',c:'12'},{a:'20',b:'21',c:'22'}] var count; for( item in items) { count += item['

Javascript中的For循环

在开发的过程中,遍历是一个经常遇到的.而for循环则是Javascript工具箱里一个好用的,也常用的工具.每个人的习惯不同,for循环的写法也不尽相同. 1.不写声明变量的写法: for(var i = 0;i<arr.length;i++){} 我们很多时候的写法使这种(做小白不堪回首的那些年),但这种写法,每次都会获取一下数组的长度,这会降低代码的效率. 2.写声明变量的写法: for(var i = 0,len = arr.length;i < len;i++){} 这样写只获取一次数