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


Posted in Javascript onNovember 18, 2015

大家都知道在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循环,希望这篇文章对大家的学习有所帮助。

Javascript 相关文章推荐
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
vue实现搜索功能
May 28 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 #Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 #Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 #Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 #Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 #Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 #Javascript
jquery可定制的在线UEditor编辑器
Nov 17 #Javascript
You might like
PHP安全配置
2006/12/06 PHP
php 表单验证实现代码
2009/03/10 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
php生成图片验证码的方法
2016/04/15 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python 使用多属性来进行排序
2019/09/01 Python
解决python 上传图片限制格式问题
2019/10/30 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
网络事业创业计划书范文
2014/01/09 职场文书
销售助理岗位职责
2014/02/21 职场文书
文艺晚会策划方案
2014/06/11 职场文书
党建目标管理责任书
2014/07/25 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
python调试工具Birdseye的使用教程
2021/05/25 Python
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
Go语言入门exec的基本使用
2022/05/20 Golang
Promise静态四兄弟实现示例详解
2022/07/07 Javascript