美文网首页
《Js》Array数组中遍历 的方法和使用场景

《Js》Array数组中遍历 的方法和使用场景

作者: BA_凌晨四点 | 来源:发表于2021-04-28 15:39 被阅读0次

    在ES5之后,数组的增加了很多方法,一些方法中带有 “遍历” 的旗号

    forEach

    它的功能是把数组的每一项都罗列出来,仅此而已!它是不能返回东西的。

    比如你想这样:

    var arr = [ 1, 2, 3, 4 ];
    var res = arr.forEach (function (item) {
      if (item == 1) {
        return item;
      }
    });
    console.log(res); // 空的
    

    当然,如果你实在想用forEach来收集东西,可以在外部定义一个变量去接。。
    既然这样,那为什么不用接下来说的 map 呢?

    map

    它的功能是:映射!无论发生什么事情,原来的数组有多长,返回的新数组就有多长

    var arr = [ 1, 2, 3, 4 ]; // 长度为4
    var res = arr.forEach (function (item) {
      if (item == 1) {
        return item;
      }
    });
    console.log(res); // 长度依然是4,其他3项是 undefined
    

    如果你想筛选出只有一项,可以借助 filter 进一步筛选,你还可以用一下的 reduce 一步到位

    reduce

    具体参考 mdn...
    我一般使用它来一步映射+筛选

    var arr = [ 1, 2, 3, 4 ];
    var res = arr.reduce (function (acc, item) {
      if (item == 1) {
        acc.push(item)  // 收集
      }
      return acc;
    }, []); // 初始化是一个数组
    console.log(res); // [1]
    

    问题来了,有了数组的这些方法,普通的 for 循环就废了吗?

    答案:绝对不是!

    普通的 for 循环更加的灵活,
    以上数组新增的方法,本质都是迭代器iterable,它死都要把每一下遍历到。。是不能中断的:
    假设我想遍历到第一项之后的时候就中断:

    var arr = [ 1, 2, 3, 4 ];
    arr.forEach(item => {
      console.log('hello')
      if (item === 1) {
        // break 是直接报错的...
        return
      }
    });
    

    会发现,结果还是打印了4次 hello。
    只有普通的 for循环才能中断,不再执行下去!这一点 在一些嵌套循环中尤为重要!

    相关文章

      网友评论

          本文标题:《Js》Array数组中遍历 的方法和使用场景

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