循环

作者: Daniel_Y | 来源:发表于2018-01-09 10:12 被阅读0次

    for

    forEach

    $.each

    • for - 循环代码块一定的次数
    • forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环;
      Array在ES5新增的方法中,参数都是function类型,默认有传参,forEach方法中的function回调支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身。
    • $.each 和forEach差不多,就是第一个和第二个参数换个位置,第1个是对应的数组索引;第2个是遍历的数组内容,第3个是数组本身。

    [1, 2 ,3, 4].forEach(alert);
    等同于
    var array = [1, 2, 3, 4]; for (var k = 0, length = array.length; k < length; k++) { alert(array[k]); }

    [].forEach(function(value, index, array) {
    // ...
    });
    对照jquery中的.each()
    $.each([], function(index, value, array) {
    // ...
    });

    $().each $.each

    • 在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点。

    • $().each,对于这个方法,在dom处理上面用的较多
      $(“input[name=’ch’]”).each(function(i){ if($(this).attr(‘checked’)==true) }

    • 对于遍历一个数组,用$.each()来处理,简直爽到了极点。
      var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]] $.each(arr1, function(i, item){ alert(item[0]); });
      //其实arr1为一个二维数组,item相当于取每一个一维数组,
      //item[0]相对于取每一个一维数组里的第一个值
      //所以上面这个each输出分别为:1 4 7

    • $.each也能遍历对象
      var obj = { one:1, two:2, three:3, four:4}; $.each(obj, function(key, val) { alert(obj[key]); });
      //这个each就有更厉害了,能循环每一个属性
      //输出结果为:1 2 3 4

    map

    • 这里的map不是“地图”的意思,而是指“映射”。[].map(); 基本用法跟forEach方法类似:
      array.map(callback,[ thisObject]);
    • map方法的作用不难理解,“映射”嘛,也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方:
      var data=[1,3,4]

    var Squares=data.map(function(val,index,arr){
    console.log(arr[index]==val); // ==> true
    return val*val
    })
    console.log(Squares); // ==> [1, 9, 16]

    由于forEach、map都是ECMA5新增数组的方法,所以ie9以下的浏览器还不支持(万恶的IE啊),不过呢,可以从Array原型扩展可以实现以上全部功能,例如forEach方法:

    if (typeof Array.prototype.forEach != "function") {

    Array.prototype.forEach =function() {

    /* 实现 */
    };
    }

    for/in

    for/of

    for/in - 循环遍历对象的属性(ES5)
    for/of 语法和for/in很像,但跟丰富(ES6)

    1 . 推荐在循环对象属性的时候,使用for...in, 在遍历数组的时候的时候使用for...of。

    2 . for...in循环出的是key,for...of循环出的是value

    3 . 注意,for...of是ES6新引入的特性。修复了ES5引入的for...in的不足

    4 . for...of不能循环普通的对象,需要通过和Object.keys()搭配使用

    假设我们要遍历一个数组的valuelet aArray = ['a',123,{a:'1',b:'2'}]

    使用for...in循环:

    for(let index in aArray){
    console.log(${aArray[index]});
    }

    使用for...of循环:

    for(var value of aArray){
    console.log(value);
    }

    咋一看好像好像只是写法不一样而已,那为什么说for...of修复了for...in的缺陷和不足。
    假设我们往数组添加一个属性name:
    aArray.name = 'demo',再分别查看上面写的两个循环:

    for(let index in aArray){
    console.log(${aArray[index]}); //Notice!!aArray.name也被循环出来了
    }
    for(var value of aArray){
    console.log(value);
    }

    所以说,作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性。

    for...of循环不会循环对象的key,只会循环出数组的value,因此for...of不能循环遍历普通对象,对普通对象的属性遍历推荐使用for...in

    如果实在想用for...of来遍历普通对象的属性的话,可以通过和Object.keys()搭配使用,先获取对象的所有key的数组
    然后遍历:

    var student={
    name:'wujunchuan',
    age:22,
    locate:{
    country:'china',
    city:'xiamen',
    school:'XMUT'
    }
    }
    for(var key of Object.keys(student)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+student[key]);
    }

    相关文章

      网友评论

          本文标题:循环

          本文链接:https://www.haomeiwen.com/subject/ppivnxtx.html