在JavaScript中提供了两种方式迭代对象: 
(1)for 循环; 
(2)for..in循环; 
使用for循环进行迭代数组对象,想必大家都已经司空见惯了。但是,使用for.. in循环时,大家可要注意了。
javascript提供了一种特殊的循环(也就是for .. in循环),用来迭代对象的属性或数组的每个元素,for...in循环中的循环计数器是字符串,而不是数字。它包含当前属性的名称或当前数组元素的索引。

案例一:

//使用for..in循环遍历对象属性 
varperson={ 
name: "Admin", 
age: 21, 
address:"shandong" 
}; 
for(var i in person){ 
console.log(i); 

执行结果为: 
name 
age 
address 
当遍历一个对象的时候,变量 i 也就是循环计数器 为 对象的属性名

//使用for..in循环遍历数组 
vararray = ["admin","manager","db"] 
for(var i in array){ 
console.log(i); 

执行结果: 



当遍历一个数组的时候,变量 i 也就是循环计数器 为 当前数组元素的索引

案例二: 
但是,现在看来for .. in循环还挺好用啊,不过,别高兴太早,看看下面的例子:

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

参考:https://www.cnblogs.com/libin-1/p/5771284.html

随机推荐

  1. .Net Web下 Console输出

    .NET winform的时候,一直都是用 Console.Write向控制台输出信息的,但是在Web中是输出不了的. web程序执行时,是被附加到IIS进程的一个单独的AppDomain中的,所以就 ...

  2. jsp下载文件

    download.jsp web工程中下载xls文件 <%@ page language="java" import="java.util.*" page ...

  3. react-native 安卓支持 gif动态图

    需要在android/app/build.gradle文件中添加模块 //这一行没有的话得加上才行 compile "com.facebook.fresco:fresco:1.5.0&quo ...

  4. js 验证码倒计时

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Spring BeanUtils简单使用

    引入包 <dependency> <groupId>commons-beanutils</groupId> <artifactId>commons-be ...

  6. Web.xml 中 metadata-complete 介绍

    Servlet 3.0 的部署描述文件 web.xml 的顶层标签 <web-app> 有一个 metadata-complete 属性, 该属性指定当前的部署描述文件是否是完全的. 如果 ...

  7. elasticsearch-ik

    因lucene默认采用英文且英文通过空格就可以断句.而中文则是词组,如果不加载中文词库或插件则会变为一个一个字而非词组,因此需要加载中文词库. 不加分词库所看到的中文分词效果. post _analy ...

  8. URL中文乱码及特殊字符处理

    一.中文乱码 IE高版本(应该是9以上,不确定),在get方式请求中中文传到后台容易出现乱码问题.解决方法如下: 1.第一种,换成post方式 如果可以得话换成post方式就可以.如果采用表单或者aj ...

  9. image 标签src

    最近对接到前端  src需要填写  src= "data:image/jpg;base64,xxxxxxxooooooo";  记录一下图片转换的问题,需要把图片转换成base64 ...

  10. js 弹窗的实现

    原理: 1. 点击按钮,触发窗口显示,遮罩层显示,并设置窗口的位置 2. 为弹出的窗口绑定鼠标滚动事件和视窗改变事件 3.点击关闭按钮,弹窗消失,遮罩层消失 html 代码: <!DOCTYPE ...