跟我学习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 相关文章推荐
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
checkbox 多选框 联动实现代码
Oct 22 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
使用axios实现上传图片进度条功能
Dec 21 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 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
星际RPG字典
2020/03/04 星际争霸
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
js 调整select 位置的函数
2008/02/21 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
北京某公司的.net笔试题
2014/03/20 面试题
培训主管的岗位职责
2013/11/23 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
自荐信的基本格式
2014/02/22 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
实习协议书范本
2014/04/22 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS