JavaScript中利用各种循环进行遍历的方式总结


Posted in Javascript onNovember 10, 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 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 相关文章推荐
javascript iframe内的函数调用实现方法
Jul 19 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
vue实现跨域的方法分析
May 21 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 #Javascript
js密码强度校验
Nov 10 #Javascript
详解javascript函数的参数
Nov 10 #Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 #Javascript
javascript实现五星评分功能
Nov 10 #Javascript
javascript实现密码验证
Nov 10 #Javascript
JavaScript编程的单例设计模讲解
Nov 10 #Javascript
You might like
PHP调用三种数据库的方法(3)
2006/10/09 PHP
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
详解Python中with语句的用法
2015/04/15 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
公司考勤管理制度
2015/08/04 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
MySQL创建管理RANGE分区
2022/04/13 MySQL
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL