JavaScript中for-in遍历方式示例介绍

 for-in遍历方式的循环计数器是字符串类型,遍历对象时为对象属性/方法名,遍历数组时为数组元素下标索引,与普通的for循环不同,需要的朋友可以参考下

摘要:for-in遍历方式的循环计数器是字符串类型,遍历对象时为对象属性/方法名,遍历数组时为数组元素下标索引,与普通的for循环不同,for-in会将继承的属性/方法列出,这一点在使用时需要特别关注。 
 
除了传统的for循环,JavaScript为遍历操作定义了for-in方式,根据数据源的不同,在使用时存在差异。 
(1)遍历对象: 
 代码如下:
var fish = { 
head : 1, 
tail : 1, 

for(var prop in fish) { 
console.log(fish[prop]); 

 
调试时观察:prop依次为'head','tail',即遍历对象属性时是以字符串类型存在的,循环计数器为对象的属性名。 
(2)遍历数组 
复制代码 代码如下:
var arr = ['one', 'two', 'three']; 
for(var prop in arr) { 
console.log(prop); 

 
调试时观察:prop依次为'0','1',即遍历数组时仍是以字符串类型存在,不同的是循环计数器为数组元素的下标。(这时可以试试用for循环输出,结果与for-in是一致的) 
如果代码中加入: 
复制代码 代码如下:
if(Object.prototype.clone === 'undefined') 
Object.prototype.clone = function() {}; 
 
则输出结果为:0,1,clone 
如果这时用for循环输出,则仍为0,1;也就是说for-in循环会将当前操作的数据源所属类型具有的属性遍历出来(同样对对象fish用for-in时,也会输出clone),所以就要求在使用for-in遍历时拉着一根弦:如果仅对对象自有属性操作,需要将继承来的属性加以剔除,比如用hasOwnProperty()方法。 
 

时间: 2024-08-08 16:11:23

JavaScript中for-in遍历方式示例介绍的相关文章

JavaScript中for-in遍历方式示例介绍_javascript技巧

摘要:for-in遍历方式的循环计数器是字符串类型,遍历对象时为对象属性/方法名,遍历数组时为数组元素下标索引,与普通的for循环不同,for-in会将继承的属性/方法列出,这一点在使用时需要特别关注. 除了传统的for循环,JavaScript为遍历操作定义了for-in方式,根据数据源的不同,在使用时存在差异. (1)遍历对象: 复制代码 代码如下: var fish = { head : 1, tail : 1, } for(var prop in fish) { console.log(

JavaScript中双叹号!!作用示例介绍

  !!一般用来将后面的表达式强制转换为布尔类型的数据(boolean),也就是只能是true或者false; 经常看到这样的例子: 代码如下: var a; var b=!!a; a默认是undefined.!a是true,!!a则是false,所以b的值是false,而不再是undefined,也非其它值,主要是为后续判断提供便利. !!一般用来将后面的表达式强制转换为布尔类型的数据(boolean),也就是只能是true或者false; 因为javascript是弱类型的语言(变量没有固定

JavaScript中双叹号(!!)作用示例介绍_javascript技巧

经常看到这样的例子: 复制代码 代码如下: var a: var b=!!a; a默认是undefined.!a是true,!!a则是false,所以b的值是false,而不再是undefined,也非其它值,主要是为后续判断提供便利. !!一般用来将后面的表达式强制转换为布尔类型的数据(boolean),也就是只能是true或者false; 因为javascript是弱类型的语言(变量没有固定的数据类型)所以有时需要强制转换为相应的类型,类似的如: 复制代码 代码如下: a=parseIn

JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍_javascript技巧

•原理: •高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: •forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: •数组中有几项,那么传递进去的匿名回调函数就需要执行几次: •每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input: •理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行

JavaScript中错误正确处理方式,你用对了吗?

JavaScript的事件驱动范式增添了丰富的语言,也是让使用JavaScript编程变得更加多样化.如果将浏览器设想为JavaScript的事件驱动工具,那么当错误发生时,某个事件就会被抛出.理论上可以认为这些发生的错误只是JavaScript中的简单事件. 本文将会讨论客户端JavaScript中的错误处理.主要介绍JavaScript中的易犯错误.错误处理.异步代码编写等内容. 下面就让我们一起看看如何正确处理JavaScript中的错误. Demo演示 本文中使用的demo可以在GitH

JavaScript中消除闭包的一般方法介绍

 这篇文章主要介绍了JavaScript中消除闭包的一般方法介绍,本文直接给出了操作示例,需要的朋友可以参考下     JavaScript 的闭包是一个其主动发展的特性, 也是一个被动发展的特性. 也就是说, 一方面, JS 有了闭包能更好解决一些问题. 另一方面, JS 为了解决某些问题, 而不得不使用闭包勉强来解决问题. 前者这里不讨论, 如果 JS 闭包能更好的解决问题, 当然使用闭包更好. 我讨论的是后者, 是因为 JS 本身的限制, 而不得不磕磕绊绊地用闭包来解决的问题, 例如"变量

html 中 #include file 的用法示例介绍

 html 中 #include file 的用法示例介绍 有两个文件a.htm和b.htm,在同一目录下a.htm内容如下 代码如下: <!-- #include file="b.htm" --> b.htm内容如下 今天:雨 31 ℃-26 ℃ <br />明天:雷阵雨 33 ℃-27 ℃ 直接在浏览器中打开a,没有任何显示,后来知道,include是SSI(Server Side Include),在html中不支持include,之后把a.htm改成a.

Javascript中的匿名函数与封装介绍

 这篇文章主要介绍了Javascript中的匿名函数与封装介绍,本文分析了jQuery 封装.Backbone 封装.Underscore 封装等内容,需要的朋友可以参考下     迷惑了一会儿不同JS库的封装后,终于有了点头绪.大致就是: 代码如下: 创建一个自调用匿名函数,设计参数window,并传入window对象. 而这个过程的目的则是, 代码如下: 使得自身的代码不会被其他代码污染,同时也可以不污染其他代码. jQuery 封装   于是找了个早期版本的jQuery,版本号是1.7.1

JavaScript中的立即执行函数表达式介绍

 这篇文章主要介绍了JavaScript中的立即执行函数表达式介绍,本文着重讲解了什么是立即调用函数表达式,需要的朋友可以参考下     我们习惯看到这样的匿名函数 代码如下: (function(){ console.log("test"); })(); 之前一直叫的是自执行的匿名函数(self-executing anonymous function)   发现原来还有一种叫法是: 立即调用函数表达式 (IIFE,Immediately-Invoked Function Expre