欢迎!从2017年开始,将慢慢的不在xmind上写总结了,全部转到博客中!这里将不再随便写写,将继承在xmind的精神,继续前行!!!

★ for 循环总结

简说:es5有三种for循环:

  • 简单for循环
  • for-in
  • forEach
    es6新增 第四种:
  • for-of

    1、简单的for循环
  • 最常用的写法,

    需要知道:当数组长度在循环过程中不会改变时(简单理解为长度不变),将数组长度用变量存储起来,这样会获得更好的效率
    const arr = [1, 2, 3];
    for(let i = 0, len = arr.length; i < len; i++) {
        console.log(arr[i]);
    }

    2、for-in

    我们可以用 for-in 来遍历一遍数组的内容

    const arr = [1, 2, 3];
    let index;
    for(index in arr) {
        console.log("arr[" + index + "] = " + arr[index]);
    }
    输出
    arr[0] = 1
    arr[1] = 2
    arr[2] = 3

    还可以遍历对象

    const person = {
        fname: "san",
        lname: "zhang",
        age: 99
    };
    let info;
    for(info in person) {
        console.log("person[" + info + "] = " + person[info]);
    }
    输出
    person[fname] = san
    person[lname] = zhang
    person[age] = 99

    for-in的深入 ----javascript中 数组 的真想

    Array.prototype.fatherName = "Father";
    const arr = [1, 2, 3];
    arr.name = "Hello world";
    let index;
    for(index in arr) {
        console.log("arr[" + index + "] = " + arr[index]);
    }
    
    输出
    arr[0] = 1
    arr[1] = 2
    arr[2] = 3
    arr[name] = Hello world
    arr[fatherName] = Father
    
    //因为 for-in 不仅仅遍历 array 自身的属性,其还遍历 array 原型链上的所有可枚举的属性。

     

    例子可以看出:for-in 遍历了对象的所有属性,而不仅仅是“索引”。同时需要注意的是,此处输出的索引值,即 “0″、 “1″、 “2″不是 Number 类型的,而是 String 类型的

     



  • Javascript 中的 Array 并不像其他语言的数组。首先, Javascript 中的 Array 在内存上并不连续,其次, Array 的索引并不是指偏移量。

  • 实际上, Array 的索引也不是 Number 类型,而是 String 类型的。

  • 我们使用如 arr[0] 的写法,是因为语言可以自动将 Number 类型的 0 转换成 String 类型的 “0″ 。    所以,在 Javascript 中从来就没有 Array 的索引,而只有类似 “0″ 、 “1″ 等等的属性

  • 每个 Array 对象都有一个 length 的属性,导致其表现地更像其他语言的数组。但为什么在遍历 Array 对象的时候没有输出 length 这一条属性呢?那是因为 for-in 只能遍历“可枚举的属性”, length 属于不可枚举属性,实际上, Array 对象还有许多其他不可枚举的属性。

  • 还遍历 array 原型链上的所有可枚举的属性
  • for-in 性能:每次迭代操作会同时搜索实例或者原型属性, for-in 循环的每次迭代都会产生更多开销,因此要比其他循环类型慢,如果需要遍历一个数量有限的已知属性列表,使用其他循环会更快

    forEach  在 ES5 中,引入

  • 在不同浏览器下测试的结果都是 forEach 的速度不如 for  就不做说明了.....

    for-of

    为什么要引进 for-of?

    • forEach 不能 break 和 return;
    • for-in 缺点更加明显,它不仅遍历数组中的元素,还会遍历自定义的属性,甚至原型链上的属性都被访问到。而且,遍历数组元素的顺序可能是随机的。
    • 我们需要改进原先的 for 循环,在不破坏之前js的情况下-新增了for-of

      那 for-of 到底可以干什么呢?

      • 跟 forEach 相比,可以正确响应 break, continue, return。
      • for-of 循环不仅支持数组,还支持大多数类数组对象,例如 DOM nodelist 对象。
      • for-of 循环也支持字符串遍历,它将字符串视为一系列 Unicode 字符来进行遍历。
      • for-of 也支持 Map 和 Set (两者均为 ES6 中新增的类型)对象遍历。

      总结一下,for-of 循环有以下几个特征:

      • 这是最简洁、最直接的遍历数组元素的语法。
      • 这个方法避开了 for-in 循环的所有缺陷。
      • 与 forEach 不同的是,它可以正确响应 break、continue 和 return 语句。
      • 其不仅可以遍历数组,还可以遍历类数组对象和其他可迭代对象。

      但需要注意的是,for-of循环不支持普通对象,但如果你想迭代一个对象的属性,你可以用
      for-in 循环(这也是它的本职工作)。

      const arr = ['a', 'b', 'c'];
      for(let data of arr) {
          console.log(data);
      }
      //输出
      a
      b
      c

       

posted @ 2016-12-21 14:30  拐进web的奋斗者  阅读(248)  评论(0编辑  收藏  举报