详解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限制textarea每行输入字符串长度的代码
Oct 31 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
vuex存取值和映射函数使用说明
Jul 24 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
CodeIgniter基本配置详细介绍
2013/11/12 PHP
php-fpm配置详解
2014/02/12 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
鼠标事件延时切换插件
2011/03/12 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
js对象基础实例分析
2015/01/13 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
详解javascript函数的参数
2015/11/10 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
python实现贪吃蛇游戏
2020/03/21 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
iPython pylab模式启动方式
2020/04/24 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
《开国大典》教学反思
2014/04/19 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
单位实习鉴定评语
2015/01/04 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
Redis批量生成数据的实现
2022/06/05 Redis