zoukankan      html  css  js  c++  java
  • JavaScript 中 for-in和 for-of 的区别

    在JavaScript中遍历数组通常是使用fori循环,自ES5发布后也可以使用forEach,另外在ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等,只不过他们的返回结果不一样。但是使用forEach遍历数组的话,使用break不能中断循环,使用return也不能返回到外层函数。

    myArray.forEach(function (currentValue, index, arr) {
        console.log(currentValue);
    });
    

    for-in

    var arr = [1, 2, 4, 5, 7];
    for (var index in arr) {
      console.log(myArray[index]);
    }
    

    使用for-in可以遍历数组,但是会存在以下问题:
    1.index索引为字符串型数字(注意,非数字),不能直接进行几何运算。
    2.遍历顺序有可能不是按照实际数组的内部顺序(可能按照随机顺序)。
    3.使用for-in会遍历数组所有的可枚举属性,包括原型。例如上例的原型方法method和name属性都会被遍历出来,通常需要配合hasOwnProperty()方法判断某个属性是否该对象的实例属性,来将原型对象从循环中剔除。

    for (var key in myObject) {
      if(myObject.hasOwnProperty(key)){
        console.log(key);
      }
    }
    

    所以for-in更适合遍历对象,通常是建议不要使用for-in遍历数组。

    for-of
    for-of可以简单、正确地遍历数组(不遍历原型method和name)。

    var myArray = [1, 2, 4, 5, 6, 7];
    myArray.name = "数组";
    myArray.getName = function() { return this.name; }
    for (var value of myArray) {
        console.log(value);
    }
    

    1.这是最简洁、最直接的遍历数组元素的语法。
    2.这个方法避开了for-in循环的所有缺陷。
    3.与forEach()不同的是,它可以正确响应break、continue和return语句。
    因此建议是使用for-of遍历数组,因为for-of遍历的只是数组内的元素,而不包括数组的原型属性method和索引name。
    区别总结
    简单总结就是,for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。
    for-in总是得到对象的key或数组、字符串的下标。
    for-of总是得到对象的value或数组、字符串的值,另外还可以用于遍历Map和Set。

    var set = new Set();
    set.add("a").add("b").add("d").add("c");
    
    // 遍历Set
    for (let s of set) {
        console.log(s);
    }
    
    var map = new Map();
    map.set("a", 1).set("b", 2).set(999, 3);
    
    // 遍历Map
    for(let [k, v] of map) {
        console.log(k, v);
    }
    

    基本就这么多了。

  • 相关阅读:
    GRUB引导——menu.lst的写法
    条形码类型及常见条形码介绍
    Tmux:终端复用器
    find+*的问题
    find命令之exec
    Linux core 文件介绍
    C语言中返回字符串函数的四种实现方法
    C语言中的volatile
    Stars
    Game with Pearls
  • 原文地址:https://www.cnblogs.com/Lay0us/p/12047868.html
Copyright © 2011-2022 走看看