美文网首页JavaScript
forEach、map、reduce

forEach、map、reduce

作者: 生爱_存在 | 来源:发表于2021-08-23 17:13 被阅读0次

    arr.reduce(callback, initialValue) 迭代数组的所有项,累加器,数组中的每个值(从左到右)合并,最终计算为一个值

    • 参数:
      1. callback:
        • 回调函数中的第一个参数:
          1. 如果该回调函数式第一次被执行,则第一个参数为数组的第一项,空数组报错,第二个元素为数组的第二项;
          2. 如果该回调函数不是第一次被执行,那么第一个参数为上一次执行此方法时的 return 出去的值
      2. currentValue 必选 --数组中当前被处理的数组项
      3. index 可选 --当前数组项在数组中的索引值
      4. array 可选 --原数组
      5. initialValue: 可选 --初始值
      6. 实行方法:回调函数第一次执行时,preValue 和 curValue 可以是一个值,如果 initialValue 在调用 reduce() 时被提供,那么第一个 preValue 等于 initialValue ,并且curValue 等于数组中的第一个值;如果initialValue 未被提供,那么preValue 等于数组中的第一个值.
          let maxCallback = (acc, cur) => (acc.x || (acc.x == 0 ? 0 : acc)) + cur.x; // 在第一次运行之后,第一个参数是上一次运行后 return 的值,不是对象,所以就直接取值即可
          let maxCallback2 = (max, cur) => Math.max(max, cur);
      
          // reduce() 没有初始值
          let a = [{ x: 0 }, { x: 22 }, { x: 42 }].reduce(maxCallback); // 64
      
          let b = [{ x: 22 }, { x: 42 }].reduce(maxCallback); // 64
      
          let c = [{ x: 2 }].reduce(maxCallback); // { x: 2 }
          // [].reduce(maxCallback); // TypeError
      
          // map/reduce; 这是更好的方案,即使传入空数组或更大数组也可正常执行
          let d = [{ x: 22 }, { x: 42 }].map(el => el.x).reduce(maxCallback2, -Infinity); // 42
      
          let e = [{ x: '123' }, { x: '22' }, { x: '42' }].reduce(maxCallback); // "1232242"
      
          console.log(a, b, c, d, e);
      

    arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组

    • callback的参数:
      1. value --当前索引的值
      1. index --索引
      1. array --原数组,同上
            let arr1 = [1, 2, 3, 4, 5]
            let arr2 = arr1.map((item, index, array) => {
                array[index] = item + 10; // 原数组每一项 + 10,会改变原数组;
                item += 20;
                return item;
            })
            console.log(arr1); // [11, 12, 13, 14, 15]
            console.log(arr2); // [21, 22, 23, 24, 25]
    
    • ps: arr.forEach()和arr.map()的区别
      1. arr.forEach()是和for循环一样,是代替for。arr.map()是修改数组其中的数据,并返回新的数据。
      2. arr.forEach() 没有return arr.map() 有return

    arr.forEach(callback) 遍历数组,无return

    • callback的参数:
      1. value --当前索引的值
      2. index --索引
      3. array --原数组
        • 此参数为原数组索引,改变其中的每一项,会改变原数组数据
        • ${array}:模板字符串会把 数据 toString 掉
            let arr = [1, 2, 3, 4, 5]
            arr.forEach((item, index, array) => {
                array[index] = item + 10; // 原数组每一项 + 10,会改变原数组;
                item += 10;
                console.log(`value:${item}    index:${index}     array:${array}`)
            })
    

    两个数组中相同元素、大数组中不包含小数组部分、一行代码数组去重
    数组方法

    相关文章

      网友评论

        本文标题:forEach、map、reduce

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