美文网首页
javascript中for..in、for..of和forEa

javascript中for..in、for..of和forEa

作者: 菇凉别走 | 来源:发表于2019-08-24 17:01 被阅读0次

    1、for..in

    for..in可以将JavaScript中的对象的属性依次循环出来,当for..in作用于数组时得到的是该元素的下标,且该下标是一个String对象而不是一个Number对象。(注意:for..in实际上是历史遗留问题,其遍历的实际上是对象的属性,之所以能够遍历数组,是因为数组实际上是一个对象,而其属性就是下标,所以使用for..in遍历数组得到的下标是String类型)
    for..in的问题在于,当我们为一个数组添加了一个不是数字下标的属性时,遍历数组时会将这个属性当做是下标遍历出来:

    let a = ['A', 'B', 'C'];
    a.name = 'Hello';
    for (let x in a) {
        console.log(x); // '0', '1', '2', 'name'
    }
    

    2、for..of

    for..of就是为了遍历集合而专门设计的,它只遍历数组的元素:

    let a = ['A', 'B', 'C'];
    a.name = 'Hello';
    for (let x of a) {
        console.log(x); // 'A', 'B', 'C'
    }
    

    并且当for..of直接遍历对象时会报错:

     let obj = {
               name:'123123',
               age:15
           }
    for (let cc of obj) {//Uncaught TypeError: obj is not iterable
           console.log(cc)
     }
    

    for..of用于遍历对象需要使用Object.keys()才能正确遍历其属性(而Object.keys()方法实际上是将对象的属性键值以数组的对象返回了回来,实际上也是遍历数组。所以说for..of不能遍历对象其实也没有错):

     let obj = {
               name:'123123',
               age:15
           }
    for (let cc of Object.keys(obj)) {
          console.log(cc)//name,age
    }
    

    3、forEach

    forEach是Iterable的内置方法,是一个高阶函数,其接受一个函数作为参数,每次迭代就回调该函数。是遍历Iterable(Array,Map,Set)最好的方式(但是相对于for..of有一个坏处就是不能通过break退出循环):

    let arr = ['A', 'B', 'C'];
    arr.forEach(function (element, index, array) {
        // element: 指向当前元素的值
        // index: 指向当前索引
        // array: 指向Array对象本身
        console.log(element + ', index = ' + index);
    });
    let set = new Set(['A', 'B', 'C']);
    set.forEach(function (element, sameElement, set) {
        //Set没有索引,因此回调函数的前两个参数都是元素本身
        console.log(element);
    });
    let map = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
    map.forEach(function (value, key, map) {
        //map接受的参数为值,键和其自身
        console.log(value);
    });
    

    相关文章

      网友评论

          本文标题:javascript中for..in、for..of和forEa

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