详解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 相关文章推荐
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
Vue和Flask通信的实现
May 19 Vue.js
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
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
Python实现简单拆分PDF文件的方法
2015/07/30 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
python实现反转部分单向链表
2018/09/27 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
幼儿运动会邀请函
2014/01/17 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
中学教师个人总结
2015/02/10 职场文书
校长一岗双责责任书
2015/05/09 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
mysq启动失败问题及场景分析
2021/07/15 MySQL
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技