还在混淆数组常用方法?一文搞定

158 阅读4分钟

对数组的方法every,some,filter,map,forEach,reduce,find,findIndex,indexOf,lastIndexOf,includes,valueOf依次进行了举例说明

由于数组方法多而实用,容易混淆,所以简单写了一遍,加深记忆,顺便记录下来,方便查阅

总结下:

  • 返回boolean值:every,some,includes
  • 筛选返回新数组:filter,map
  • 累加:reduce
  • 单纯对元素执行一次函数:forEach
  • 条件查找:find,findIndex
  • 指定查找:indexOf,lastIndexOf
  • 输出原数组:valueOf

以下是对每个方法的简单举例说明

// 以arr数组为例子
      let arr = [1, 4, 5, 45, 2, 1, 43];
      /**
       * every: 判断元素是否符合条件,返回一个boolean。只要有一个元素不符合条件就返回false
       * 不会改变原来的数组
       * 如果最后没有return,那么只会执行一次,返回false
       */
      let data1 = arr.every((item) => {
        return item > 10;
      });
      console.log(data1); //false
      let data2 = arr.every((item) => {
        console.log(item); //只打印了1,执行了一次
      });
      console.log(data2); //false
      /**
       * some:判断元素是否符合条件,返回一个boolean。只要有一个符合条件就返回true
       * 不会改变原来的数组
       * 如果没有return,会对数组挨个进行遍历,最后返回return
       */
      let data3 = arr.some((item) => {
        return item > 10;
      });
      console.log(data3); //true
      let data4 = arr.some((item) => {
        console.log(item); //打印了1,4,5,45,2,1,43
      });
      console.log(data4); //false
      /***
       * filter:创建一个空数组,盛放符合条件的元素
       * 不会改变原来的数组
       */
      let data5 = arr.filter((item) => {
        return item > 10;
      });
      console.log(data5); //[45, 43]
      /***
       * map:返回一个新的数组,新数组元素是对原数组元素处理过的
       * 不会改变原来的数组
       */
      let data6 = arr.map((item) => {
        return item - 10;
      });
      console.log(data6); //[-9, -6, -5, 35, -8, -9, 33]
      /***
       * forEach:没有返回值,对数组的每个元素执行一次提供的函数。
       * 不会改变原数组
       */
      let data7 = arr.forEach((item) => {
        item + 3;
      });
      console.log(data7); //undefined
      console.log("原数组", arr); //[1, 4, 5, 45, 2, 1, 43]
      /***
       * reduce:作为一个累加器,可以用于数组求和
       * 有两个参数,一个回调函数,一个初始值(可选)
       * 不会改变原数组
       */
      let data8 = arr.reduce((sum, item) => {
        return sum + item;
      }, 10);
      console.log("初始值为10的求和结果::", data8); //初始值为10的求和结果:: 111
      let data9 = arr.reduce((sum, item) => sum + item, 0);
      console.log("初始值为0的求和结果::", data9); //初始值为0的求和结果:: 101
      console.log("原的数组:", arr); //[1, 4, 5, 45, 2, 1, 43]
      /***
       * find: find返回符合条件的第一个元素的值
       * 不会改变原函数
       * 找到符合条件的元素后将不再执行这个函数
       * 没有找到就返回undefined
       */
      let data10 = arr.find((item) => {
        return item > 10;
      });
      console.log("大于10的第一个元素:", data10); //大于10的第一个元素: 45
      /***
       * findIndex:返回符合条件的第一个元素的下标,和find异曲同工
       * 不会改变原函数
       * 找到符合条件的元素后将不再执行这个函数
       * 没有找到就返回undefined
       */
      let data11 = arr.findIndex((item) => {
        return item > 10;
      });
      console.log("大于10的第一个元素的下标:", data11); //大于10的第一个元素的下标: 3
      /***
       * indexOf:返回数组中某个指定元素的下标
       * 不会改变原数组
       * 如果存在指定元素返回改元素第一次出现的下标
       * 不存在指定元素返回-1
       */
      let data12 = arr.indexOf(1);
      console.log("数组中1第一次出现的下标", data12); //数组中1第一次出现的下标 0
      /***
       * lastIndexOf:返回数组中某个指定元素的下标
       * 不会改变原数组
       * 如果存在指定元素返回改元素最后一次出现的下标
       * 不存在指定元素返回-1
       */
      let data13 = arr.lastIndexOf(1);
      console.log("数组中1最后一次出现的下标", data13); //数组中1最后一次出现的下标 5
      /***
       * includes:判断数组是否包含指定元素。返回一个boolean值。存在为true,否则为false
       * 不会改变愿数组
       */
      let data14 = arr.includes(3);
      console.log("数组中是否存在3", data14); //数组中是否存在3 false
      /***
       * valueOf:返回数组的原始值
       * 原数组改变后,再次使用返回改变后的数组
       * 不会改变原数组
       */
      let data15 = arr.valueOf();
      console.log("原数组", data15);//原数组 [1, 4, 5, 45, 2, 1, 43]
      arr.unshift(3);
      console.log("为数组添加数字3后的数组", arr);//为数组添加数字3后的数组 [3, 1, 4, 5, 45, 2, 1, 43]
      let data16 = arr.valueOf();
      console.log("数组", data16);//数组 [3, 1, 4, 5, 45, 2, 1, 43]

后期需要会继续补充。。。未完待续