javascript中的for in循环和for in循环的使用陷阱

简介: javascript中的for循环和for...in循环还是有些区别的,比如定义一个数组,然后用for..in循环输出var array=[1,2,3,4,5,6];for(var s in array){  console.log(s+' ');} 输出的结果是0 1 2 3 4 5 竟然不是输出1-6。

javascript中的for循环和for...in循环还是有些区别的,比如定义一个数组,然后用for..in循环输出

var array=[1,2,3,4,5,6];

for(var s in array)

{

  console.log(s+' ');

}

 输出的结果是0 1 2 3 4 5 竟然不是输出1-6。然后又定义了个比较有区分的(姑且这么叫吧)数组

var array=['jack','marry','jackson'];

for(var s in array)

{

  console.log(s+' ');

}

 输出0 1 2 这样看起来for..in输出的是数组的索引,而不是数组内容,以前在学习C#的时候for..in输出的是数组中的原始值,而不是索引 。

 但是如果是定义一个对象,对象中有属性,并且给属性赋初始值,那么用for..in输出的是属性名,且看下面:

 

var obj = new Object();

obj.name = '大象';

obj.value1 = '12';

obj.value2 = '334';

for (var items in obj) {

    console.log(items);

}

 输出的是 name、 value1、 value2。这样看来在对象中属性就相当于对象中的索引。

看看下面的例子:

                 var array =["admin","manager","db"];

                 //给Array的原型添加一个name属性

                 Array.prototype.name= "zhangsan";

                 for(var i in array){

                    alert(array[i]);

                 }

运行结果:

admin

manager

db

zhangsan

 

奇观了,怎么平白无故的冒出来一个zhangsan

现在,再看看使用 for循环会怎样?

               vararray = ["admin","manager","db"];

                //给Array的原型添加一个name属性

               Array.prototype.name = "zhangsan";

               for(var i =0 ; i<array.length; i++){

                      alert(array[i]);

               };

运行结果:

admin

manager

db

 

现在明白了,for..in循环会把某个类型的原型(prototype)中方法与属性给遍历出来,所以这可能会导致代码中出现意外的错误。为了避免这个问题,我们可以使用对象的hasOwnProperty()方法来避免这个问题,如果对象的属性或方法是非继承的,那么hasOwnProperty() 方法返回true。即这里的检查不涉及从其他对象继承的属性和方法,只会检查在特定对象自身中直接创建的属性。

 

再看看下面的例子:

               vararray = ["admin","manager","db"];

               Array.prototype.name= "zhangshan";

               for(vari in array){

                      //如果不是该对象自身直接创建的属性(也就是该属//性是原型中的属性),则跳过显示

                       if(!array.hasOwnProperty(i)){

                               continue;

                        }

                        alert(array[i]);

              

运行结果:

admin

manager

db

 

相关文章
|
6天前
|
JavaScript 前端开发 安全
JavaScript中的循环控制:while、do-while与for详解
【4月更文挑战第7天】本文探讨JavaScript的三种主要循环结构:while、do-while和for。while循环在满足条件时执行代码块,注意避免无限循环;do-while循环至少执行一次,适合先执行后判断的场景;for循环结合初始化、条件和迭代,适合遍历。理解每种循环的特点和适用场景,结合编程技巧,如使用break和continue,选择合适的循环方式,能提升代码效率和可读性。记得关注循环性能和避免不必要的计算。
21 0
|
6天前
|
JavaScript
在循环内错误使用函数定义(js的问题)
在循环内错误使用函数定义(js的问题)
13 0
|
6天前
|
JavaScript
JS使用循环求100内奇数之和
JS使用循环求100内奇数之和
18 1
|
6天前
|
JavaScript 前端开发
JS——while 循环和 do while 循环:究竟有什么区别?
JS——while 循环和 do while 循环:究竟有什么区别?
25 1
|
6天前
|
JavaScript 前端开发
【面试题】在JS循环中使用await会怎么样?
【面试题】在JS循环中使用await会怎么样?
|
5天前
|
JavaScript 前端开发
比较JavaScript中的for...in和for...of循环
比较JavaScript中的for...in和for...of循环
|
6天前
|
JavaScript 前端开发
JavaScript 循环方法详解
JavaScript 循环方法详解
22 1
|
6天前
|
JavaScript 前端开发
JavaScript 条件循环语句(for 循环)
JavaScript 条件循环语句(for 循环)
|
6天前
|
前端开发 JavaScript 开发者
遍历指南:JavaScript 中的 for、for-in、for-of 和 forEach 循环详解
遍历指南:JavaScript 中的 for、for-in、for-of 和 forEach 循环详解
22 3
|
6天前
|
JavaScript 索引
JS 几种循环遍历
JS 几种循环遍历
9 0
JS 几种循环遍历