详解javascript遍历方式


Posted in Javascript onNovember 11, 2015

为了方便例子讲解,现有数组和json对象如下

var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
var demoObj = {
 aaa: 'Javascript',
 bbb: 'Gulp',
 ccc: 'CSS3',
 ddd: 'Grunt',
 eee: 'jQuery',
 fff: 'angular'
};

for

可以直接看示例,用得太多了,很简单

(function() {
 for(var i=0, len=demoArr.length; i<len; i++) {
 if (i == 2) {
 // return; // 函数执行被终止
 // break; // 循环被终止
 continue; // 循环被跳过
 };
 console.log('demo1Arr['+ i +']:' + demo1Arr[i]);
 }
})();
关于for循环,有一下几

关于for循环,有以下几点需要注意

  • for循环中的i在循环结束之后任然存在与作用域中,为了避免影响作用域中的其他变量,使用函数自执行的方式将其隔离起来()();
  • 避免使用for(var i=0; i<demo1Arr.length; i++){} 的方式,这样的数组长度每次都被计算,效率低于上面的方式。也可以将变量声明放在for的前面来执行,提高阅读性
var i = 0, len = demo1Arr.length;
for(; i<len; i++) {};
  • 跳出循环的方式有如下几种

return 函数执行被终止
break 循环被终止
continue 循环被跳过
完整实例

for in

for(var item in arr|obj){} 可以用于遍历数组和对象

  • 遍历数组时,item表示索引值, arr表示当前索引值对应的元素 arr[item]
  • 遍历对象时,item表示key值,arr表示key值对应的value值 obj[item]
(function() {
 for(var i in demoArr) {
 if (i == 2) {
 return; // 函数执行被终止
 // break; // 循环被终止
 // continue; // 循环被跳过
 };
 console.log('demoArr['+ i +']:' + demoArr[i]);
 }
 console.log('-------------');
})();

关于for in,有以下几点需要注意:

  • 在for循环与for in循环中,i值都会在循环结束之后保留下来。因此使用函数自执行的方式避免。
  • 使用return,break,continue跳出循环都与for循环一致,不过关于return需要注意,在函数体中,return表示函数执行终止,就算是循环外面的代码,也不再继续往下执行。而break仅仅只是终止循环,后面的代码会继续执行。
function res() {
 var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];

 for(var item in demoArr) {
 if (item == 2) {
 return;
 };
 console.log(item, demoArr[item]);
 }
 console.log('desc', 'function res'); //不会执行
}

forEach

demoArr.forEach(function(arg) {})
参数arg表示数组每一项的元素,实例如下

demoArr.forEach(function(e) {
 if (e == 'CSS3') {
 return; // 循环被跳过
 // break; // 报错
 // continue;// 报错
 };
 console.log(e);
})

具体有以下需要注意的地方

forEach无法遍历对象
forEach无法在IE中使用,firefox和chrome实现了该方法
forEach无法使用break,continue跳出循环,使用return时,效果和在for循环中使用continue一致
do/while

函数具体的实现方式如下,不过有一点值得注意的是,当使用continue时,如果你将i++放在了后面,那么i++的值将一直不会改变,最后陷入死循环。因此使用do/while一定要小心谨慎一点。

不建议使用do/while的方式来遍历数组
// 直接使用while

(function() {
 var i = 0,
 len = demoArr.length;
 while(i < len) {
 if (i == 2) {
 // return; // 函数执行被终止
 // break; // 循环被终止
 // continue; // 循环将被跳过,因为后边的代码无法执行,i的值没有改变,因此循环会一直卡在这里,慎用!!
 };
 console.log('demoArr['+ i +']:' + demoArr[i]);
 i ++;
 }
 console.log('------------------------');
})();

// do while
(function() {
 var i = 0,
 len = demo3Arr.length;
 do {
 if (i == 2) {
 break; // 循环被终止
 };
 console.log('demo2Arr['+ i +']:' + demo3Arr[i]);
 i++;
 } while(i<len);
})();

$.each

$.each(demoArr|demoObj, function(e, ele))
可以用来遍历数组和对象,其中e表示索引值或者key值,ele表示value值

$.each(demoArr, function(e, ele) {
 console.log(e, ele);
})

输出为

0 "Javascript"
1 "Gulp"
2 "CSS3"
3 "Grunt"
4 "jQuery"
5 "angular"
这里有很多需要注意的地方

  • 使用return 或者return true为跳过一次循环,继续执行后面的循环
  • 使用return false为终止循环的执行,但是并不终止函数执行
  • 无法使用break与continue来跳过循环
  • 循环中this值输出类似如下
console.log(this);
//String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"}

console.log(this == ele);
// true

关于上面的this值,遍历一下

$.each(this, function(e, ele) {
 console.log(e, ele);
})

// 0 c
// 1 s
// 2 s
// 4 3

为什么length 和 [[PrimitiveValue]]没有遍历出来?突然灵光一动,在《javascript高级编程》中找到了答案,大概意思就是javascript的内部属性中,将对象数据属性中的Enumerable设置为了false

// 查看length的内部属性
console.log(Object.getOwnPropertyDescriptor(this, 'length'));
// Object {value: 4, writable: false, enumerable: false, configurable: false}

$.each 中的 $(this) 与this有所不同,不过遍历结果却是一样,你可以在测试代码中打印出来看看
$(selecter).each

专门用来遍历DOMList

$('.list li').each(function(i, ele) {
 console.log(i, ele);
 // console.log(this == ele); // true
 $(this).html(i);
 if ($(this).attr('data-item') == 'do') {
 $(this).html('data-item: do');
 };
})
  • i: 序列值 ele: 只当前被遍历的DOM元素
  • this 当前被遍历的DOM元素,不能调用jQuery方法
  • $(this) == $(ele) 当前被遍历元素的jquery对象,可以调用jquery的方法进行dom操作

使用for in 遍历DOMList

因为domList并非数组,而是一个对象,只是因为其key值为0,1,2... 而感觉与数组类似,但是直接遍历的结果如下

var domList = document.getElementsByClassName('its');
for(var item in domList) {
 console.log(item, ':' + domList[item]);
}
// 0: <li></li>
// 1: <li></li>
// ...
// length: 5
// item: function item() {}
// namedItem: function namedItem() {}

因此我们在使用for in 遍历domList时,需要将domList转换为数组

var res = [].slice.call(domList);
for(var item in res) {}

类似这样的对象还有函数的属性arguments对象,当然字符串也是可以遍历的,但是因为字符串其他属性的enumerable被设置成了false,因此遍历出来的结果跟数组是一样的,也就不用担心这个问题了.
小补充

如果你发现有些人写函数这样搞,不要惊慌,也不要觉得他高大上。

+function(ROOT, Struct, undefined) {
 ... 
}(window, function() {
 function Person() {}
})

()(), !function() {}() +function() {}() 三种函数自执行的方式。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
深入理解js数组的sort排序
May 28 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
Vue中实现权限控制的方法示例
Jun 07 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 Javascript
js window对象属性和方法相关资料整理
Nov 11 #Javascript
js clearInterval()方法的定义和用法
Nov 11 #Javascript
jquery原理以及学习技巧介绍
Nov 11 #Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 #Javascript
轻松实现javascript数据双向绑定
Nov 11 #Javascript
谈谈对offsetleft兼容性的理解
Nov 11 #Javascript
详解 javascript中offsetleft属性的用法
Nov 11 #Javascript
You might like
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
javascript操作数组详解
2014/12/17 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
python实现简单http服务器功能
2018/09/17 Python
django数据库自动重连的方法实例
2019/07/21 Python
Python坐标线性插值应用实现
2019/11/13 Python
Python日志器使用方法及原理解析
2020/09/27 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
电信专业毕业生推荐信
2013/11/18 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
总经理检讨书范文
2015/02/16 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
详解Python生成器和基于生成器的协程
2021/06/03 Python
Java 关于String字符串原理上的问题
2022/04/07 Java/Android
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技