跟我学习javascript的for循环和for...in循环

大家都知道在JavaScript中提供了两种方式迭代对象:

  • for 循环;
  • for..in循环;

一、for循环

不足:

在于每次循环的时候数组的长度都要去获取;
终止条件要明确;
在for循环中,你可以循环取得数组或是数组类似对象的值,譬如arguments和HTMLCollection对象。通常的循环形式如下:

// 次佳的循环
for (var i = 0; i < myarray.length; i++) {
 // 使用myarray[i]做点什么
}

这种形式的循环的不足在于每次循环的时候数组的长度都要去获取下。这回降低你的代码性能,尤其当myarray不是数组,而是一个HTMLCollection对象的时候。

HTMLCollections指的是DOM方法返回的对象,例如:

document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName()

还有其他一些HTMLCollections,这些是在DOM标准之前引进并且现在还在使用的。有:

document.images: 页面上所有的图片元素
document.links : 所有a标签元素
document.forms : 所有表单
document.forms[0].elements : 页面上第一个表单中的所有域

集合的麻烦在于它们实时查询基本文档(HTML页面)。这意味着每次你访问任何集合的长度,你要实时查询DOM,而DOM操作一般都是比较昂贵的。

这就是为什么当你循环获取值时,缓存数组(或集合)的长度是比较好的形式,正如下面代码显示的:

for (var i = 0, max = myarray.length; i < max; i++) {
 // 使用myarray[i]做点什么
}

这样,在这个循环过程中,你只检索了一次长度值。

在所有浏览器下,循环获取内容时缓存HTMLCollections的长度是更快的,2倍(Safari3)到190倍(IE7)之间。//此数据貌似很老

注意到,当你明确想要修改循环中的集合的时候(例如,添加更多的DOM元素),你可能更喜欢长度更新而不是常量。

伴随着单var形式,你可以把变量从循环中提出来,就像下面这样:

function looper() {
 var i = 0,
  max,
  myarray = [];
 // ...
 for (i = 0, max = myarray.length; i < max; i++) {
  // 使用myarray[i]做点什么
 }
}

这种形式具有一致性的好处,因为你坚持了单一var形式。不足在于当重构代码的时候,复制和粘贴整个循环有点困难。例如,你从一个函数复制了一个循环到另一个函数,你不得不去确定你能够把i和max引入新的函数(如果在这里没有用的话,很有可能你要从原函数中把它们删掉)。

最后一个需要对循环进行调整的是使用下面表达式之一来替换i++。

i = i + 1
i += 1

JSLint提示您这样做,原因是++和–-促进了“过分棘手(excessive trickiness)”。如果你直接无视它,JSLint的plusplus选项会是false(默认是default)。

两种变化的形式:

  • 少了一个变量(无max)
  • 向下数到0,通常更快,因为和0做比较要比和数组长度或是其他不是0的东西作比较更有效率01
//第一种变化的形式:

var i, myarray = [];
for (i = myarray.length; i–-;) {
 // 使用myarray[i]做点什么
}

//第二种使用while循环:

var myarray = [],
 i = myarray.length;
while (i–-) {
 // 使用myarray[i]做点什么
}

这些小的改进只体现在性能上,此外JSLint会对使用i–-加以抱怨。

二、for …in 循环—也被称为“枚举”

for …in 循环经常用来迭代对象的属性或数组的每个元素,for…in循环中的循环计数器是字符串,而不是数字。它包含当前属性的名称或当前数组元素的索引。 下面直接上几个例子:

当遍历一个对象的时候,变量 i 也就是循环计数器 为 对象的属性名 :

//使用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(vari in array){
 console.log(i);
}

执行结果:

0

1

2

但是,现在看来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(var i in array){
//如果不是该对象自身直接创建的属性(也就是该属//性是原型中的属性),则跳过显示
 if(array.hasOwnProperty(i)){
  alert(array[i]);
  }
}

运行结果:

admin

manager

db
另外一种使用hasOwnProperty()的形式是取消Object.prototype上的方法。像这样:

// 对象
var man = {
 hands: 2,
 legs: 2,
 heads: 1
};
for (var i in man) {
 if (Object.prototype.hasOwnProperty.call(man, i)) { // 过滤
  console.log(i, ":", man[i]);
 }
}

其好处在于在man对象重新定义hasOwnProperty情况下避免命名冲突。也避免了长属性查找对象的所有方法,你可以使用局部变量“缓存”它。

var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
 if (hasOwn.call(man, i)) { // 过滤
  console.log(i, ":", man[i]);
 }
}

严格来说,不使用hasOwnProperty()并不是一个错误。根据任务以及你对代码的自信程度,你可以跳过它以提高些许的循环速度。但是当你对当前对象内容(和其原型链)不确定的时候,添加hasOwnProperty()更加保险些。

格式化的变化(通不过JSLint)会直接忽略掉花括号,把if语句放到同一行上。其优点在于循环语句读起来就像一个完整的想法(每个元素都有一个自己的属性”X”,使用”X”干点什么):

// 警告: 通不过JSLint检测
var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) if (hasOwn.call(man, i)) { // 过滤
 console.log(i, ":", man[i]);
}

以上就是介绍了JavaScript提供的两种方式迭代对象:for循环和for...in循环,希望这篇文章对大家的学习有所帮助。

(0)

相关推荐

  • JavaScript For...In 使用方法

    For...In 声明用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作). JavaScript For...In 声明 For...In 声明用于对数组或者对象的属性进行循环操作. for ... in循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作. 语法: for (变量 in 对象) {     在此执行代码 }variable用来指定变量,指定的变量可以是数组元素,也可以是对象的属性. 实例: 使用for ... in循环遍历数组. var x var m

  • jquery遍历筛选数组的几种方法和遍历解析json对象

    jquery grep()筛选遍历数组 复制代码 代码如下: $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); for(var i=0;i<filterarray.length;i++){ alert(filterarray[i]); } for (key in filtera

  • JS for...in 遍历语句用法实例分析

    本文实例讲述了JS for...in 遍历语句用法.分享给大家供大家参考,具体如下: for...in 语句用于对数组或者对象的属性进行循环操作. for (变量 in 对象) {     在此执行代码 } 这里的"变量"用来指定变量,指定的变量可以是数组元素,也可以是对象的属性. 举个例子: <!DOCTYPE html> <meta charset="UTF-8"> <script> var x; var zoon = new

  • 讲解JavaScript中for...in语句的使用方法

    这里是JavaScript支持的另外一个循环.它被称为for...in循环.这个循环是用于循环一个对象的属性. 因为我们还没有讨论的对象,所以使用这一循环可能会感觉不太明白.但是,一旦你会对JavaScript对象了解后,那么会发现这个循环非常有用. 语法 for (variablename in object){ statement or block to execute } 从对象每次迭代一个属性分配给变量名(variablename),这个循环持续到该对象的所有属性都用尽. 例子: 下面是

  • jQuery 遍历json数组的实现代码

    复制代码 代码如下: <script type="text/javascript"> var d1 =[{"text":"王家湾","value":"9"},{"text":"李家湾","value":"10"},{"text":"邵家湾","value":

  • javascript数组遍历for与for in区别详解

    js中遍历数组的有两种方式 复制代码 代码如下: var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){     alert(array[i]) } //foreach循环 for(var i in array){     alert(array[i]) } 正常情况下上面两种遍历数组的方式结果一样.首先说两者的第一个区别 标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key

  • JQuery遍历json数组的3种方法

    一.使用each遍历 复制代码 代码如下: $(function () { var tbody = "";            //------------遍历对象 .each的使用-------------            //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式,必须保证JSON的格式要求,回调的对象必须使用eval函数进行转化(否则将得不到Object).本文不作详细介绍服务器端回调的数据问题,我们将直接自定义对象)        

  • Javascript技巧之不要用for in语句对数组进行遍历

    一,为什么不要用for in语句 jqModal这个jquery插件估计很多人都使用过,在jqModal源码内部,有一个函数为hs,其中有个嵌套循环如下, 复制代码 代码如下: for(var i in {jqmShow:1,jqmHide:1}) for(var s in this[i]) if(H[this[i][s]]) H[this[i][s]].w[i](this); return F; } 第一个for in遍历的目标是个匿名对象,没有问题. 第二个for in遍历,根据上下文确认t

  • JS数组的遍历方式for循环与for...in

    JS数组的遍历方法有两种: 第一种:一般的for循环,例如: var a = new Array("first", "second", "third") for(var i = 0;i < a.length; i++) { document.write(a[i]+","); } 输出的结果:fitst,second,third 第一种:用for...in 这种遍历的方式,例如: var arr = new Array(&

  • js数组循环遍历数组内所有元素的方法

    例,for(){}遍历数组 复制代码 代码如下: <script type="text/javascript"> <!--var arr = new Array(13.5,3,4,5,6);for(var i=0;i<arr.length;i++){ arr[i] = arr[i]/2.0;}alert(arr); //--> </script> 例,for in循环遍历数组 复制代码 代码如下: <html><body>

随机推荐

其他