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 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
js+canvas实现五子棋小游戏
Aug 02 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
文件上传类
2006/10/09 PHP
十天学会php之第二天
2006/10/09 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
python实现数据库跨服务器迁移
2018/04/12 Python
django允许外部访问的实例讲解
2018/05/14 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
Python常用断言函数实例汇总
2020/11/30 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
毕业生自荐书
2014/02/02 职场文书
党员批评与自我批评
2014/02/12 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
Golang中channel的原理解读(推荐)
2021/10/16 Golang