• 循环语句 for , forin , forEach


    前段时间被问到js中for,forin,forEach之间的相同点与不同点,发现并没有认真整理过,只是平时使用,今天进行一下整理,加强记忆,首先相同点是都可对数组进行循环遍历,下面主要简单讲解不同之处。

    for循环是对数组的元素进行循环,不能引用非数组对象

    var newArr = [1,2,3];
    
    for(var i=0, len=newAr.length ; i<len ; i++) { // i为number类型
        console.log( newArr[i] );
    }

    for...in语句用于对数组或者对象的属性进行循环操作

    var newArr = ['jack','marry','yoyo'];
    for(var i in newArr) { // i为string类型
         console.log( i +'.....' + newArr[i] );
    }
    // 0.....jack
    // 1.....marry
    // 2.....yoyo
    
    var newObj = {name : 'lili' , age: 22 , sex:'female'};
    for(var obj in newObj) {
       console.log( obj + '.....'+ newObj[obj] );
    }
    // name.....lili
    // age.....22
    // sex.....female

    for...in 拓展请参考:http://www.jb51.net/article/44028.htm

    Tip:for...in循环不会按照属性的下标来排列输出。执行时按chrome执行,先把当中的非负整数键提出来,排序好输出,然后将剩下的定义时的顺序输出。由于这个设定,让avalon的ms-with对象排序不按预期输出了。只能强制用户不要以纯数字定义键名

    var obj ={"first" : "first",
                "zoo" : "zoo",
                  "2" : "2",
                 "34" : "34",
                  "1" : "1",
             "second" : "second" };
    for (var i in obj) { 
          console.log(i); 
    };
    
    // 1
    // 2
    // 34
    // first
    // zoo
    // second
    
    var newObj ={"banana" : "banana",
                   "pear" : "pear",
                  "apple" : "apple",
                  "peach" : "peach" };
    for (var i in newObj ) { 
          console.log(i); 
    };
    
    // banana
    // pear
    // apple
    // peach

    forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环。

    Tip: ie9以下的浏览器不支持此方法(⊙﹏⊙)

    var newArr = ['A','B','C','D'];
    
    newArr.forEach(function(val, index, arr){
       console.log(val + '---' + index + '--'+arr);
    
    });
    // A---0--A,B,C,D
    // B---1--A,B,C,D
    // C---2--A,B,C,D
    // D---3--A,B,C,D
    
    // 与jquery中$.each对比
    $.each(newArr , function(index, val, arr) {
         console.log(val + '---' + index + '--'+arr);
    });

    备注:自己查找资料整理,仅供参考,谢谢~~

  • 相关阅读:
    第11组 Beta版本演示
    第11组 Beta冲刺(5/5)
    第11组 Beta冲刺(4/5)
    第11组 Beta冲刺(3/5)
    第11组 Beta冲刺(2/5)
    第11组 Beta冲刺(1/5)
    第11组 Alpha冲刺(2/6)
    第11组 Alpha冲刺(1/6)
    第11组 团队Git现场编程实战
    团队项目-需求分析报告
  • 原文地址:https://www.cnblogs.com/hlweng-0207/p/6542137.html
Copyright © 2020-2023  润新知