zoukankan      html  css  js  c++  java
  • JavaScript 各种遍历方式详解

       在$.each中想要终止循环,但是它没有continue或者break这样的终止方式,所以尝试使用return来进行终止,但是发现并没有跳出循环。为了搞清楚js中关于各种遍历方式的不同,通过查询进行了一下总结:

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

    1 var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
    2 var demoObj = {
    3     aaa: 'Javascript',
    4     bbb: 'Gulp',
    5     ccc: 'CSS3',
    6     ddd: 'Grunt',
    7     eee: 'jQuery',
    8     fff: 'angular'
    9 };

    for

    平时使用最多的,直接看事例

     1 (function() {
     2     for(var i=0, len=demoArr.length; i<len; i++) {
     3         if (i == 2) {
     4             // return;   // 函数执行被终止
     5             // break;    // 循环被终止
     6             continue; // 循环被跳过
     7         };
     8         console.log('demo1Arr['+ i +']:' + demo1Arr[i]);
     9     }
    10 })();

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

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

    跳出循环的方式有如下几种

    • return 函数执行被终止
    • break 循环被终止
    • continue 循环被跳过

      

    for in

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

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

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

    • 在for循环与for in循环中,i值都会在循环结束之后保留下来。因此使用函数自执行的方式避免。
    • 使用return,break,continue跳出循环都与for循环一致,不过关于return需要注意,在函数体中,return表示函数执行终止,就算是循环外面的代码,也不再继续往下执行。而break仅仅只是终止循环,后面的代码会继续执行。

    forEach

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

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

    • 回调函数中有2个参数,分别表示值和索引,这一点与jQuery中的$.each相反
    • forEach无法遍历对象
    • forEach无法在IE中使用,firefox和chrome实现了该方法
    • forEach无法使用break,continue跳出循环,使用return时,效果和在for循环中使用continue一致
    • 最重要的一点,可以添加第二参数,为一个数组,而且回调函数中的this会指向这个数组。而如果没有第二参数,则this会指向window。
    1 var newArr = [];
    2 demoArr.forEach(function(val, index) {
    3     this.push(val); // 这里的this指向newArr
    4 }, newArr)

    虽然在原生中forEach循环的局限性很多,但是了解他的必要性在于,很多第三方库会扩展他的方法,使其能够应用在很多地方,比如angular的工具方法中,也有forEach方法,其使用与原生的基本没有差别,只是没有了局限性,可以在IE下使用,也可以遍历对象

    do/while

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

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

    $.each

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

    输出为

    这里有很多需要注意的地方

    • 使用return 或者return true为跳过一次循环,继续执行后面的循环
    • 使用return false为终止循环的执行,但是并不终止函数执行
    • 无法使用break与continue来跳过循环

    $(selecter).each

    专门用来遍历DOMList

    • i: 序列值 ele: 只当前被遍历的DOM元素
    • this 当前被遍历的DOM元素,不能调用jQuery方法
    • $(this) == $(ele) 当前被遍历元素的jquery对象,可以调用jquery的方法进行dom操作

    使用for in 遍历DOMList

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

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

      

      有三种能提升逼格的函数自执行的方式:()()!function() {}() +function() {}()

  • 相关阅读:
    hdu 1455 N个短木棒 拼成长度相等的几根长木棒 (DFS)
    hdu 1181 以b开头m结尾的咒语 (DFS)
    hdu 1258 从n个数中找和为t的组合 (DFS)
    hdu 4707 仓鼠 记录深度 (BFS)
    LightOJ 1140 How Many Zeroes? (数位DP)
    HDU 3709 Balanced Number (数位DP)
    HDU 3652 B-number (数位DP)
    HDU 5900 QSC and Master (区间DP)
    HDU 5901 Count primes (模板题)
    CodeForces 712C Memory and De-Evolution (贪心+暴力)
  • 原文地址:https://www.cnblogs.com/hbujt/p/5559482.html
Copyright © 2011-2022 走看看