12-04 01:17 阅读 213

关注

Javascript数组 API重学习 （持续更新ing）

Array API学习记录 - reduce()

Array API - reduce()语法参数说明返回值说明应用 （完善ing）

        const array1 = [1, 2, 3, 4];
        const reducer = (previousValue, currentValue) => previousValue + currentValue;

        // 1 + 2 + 3 + 4
        console.log(array1.reduce(reducer));
        // expected output: 10

        // 5 + 1 + 2 + 3 + 4
        console.log(array1.reduce(reducer, 5));
        // expected output: 15复制代码

语法

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])复制代码

参数说明

• callback() 回调函数，

• accumulator : 累积回调函数的返回值 / initialValue值 （已指定情况）

• currentValue: 正在操作的元素

• index

• array

• 作用：执行数组中每一项元素

• 参数

• initialValue

• 空数组调用callback()

  let arr = []
  //预期 返回initialValue值
  console.log(arr.reduce((acc,current)=>{
    console.log('执行了 callback()')
  },2))复制代码

• 数组元素 > 1

• 空数组 调用 callback()

  

• 数组仅有一个元素

• 默认使用数组中第一个元素

• let arr = ["1"]
  //预期 返回数组唯一元素：字符串 '1'
  console.log(arr.reduce((acc,current)=>{
    console.log('执行了 callback()')
  }))复制代码

• 直接返回此元素 不执行callback()

• 初始值数据类型: 根据具体需求 （参考应用-案例三）

• Number

• Object

• …数据类型

• 作用：callback（）首次调用时作为累计器的初始值 ( 指定初始值时 accumulator = initialValue )

• 未指定initialValue

• 指定 initialValue

返回值说明

• 函数累计处理结果

• 最后一次执行 callback() 的返回值

应用 （完善ing）

• 案例一：求和

  // 数组求和
  let sumArray = [1,2,3,4,5]
  let sum = sumArray.reduce((acc,eachItem) => {
    //预期 
    console.log('acc的值：' + acc); //总共 输出5次
    return acc + eachItem
  },0)复制代码

• 案例二：统计某一元素出现次数

  let amountArray = ["狗曦曦", "狗曦曦", "玉玉", "喵喵"]
  let dogAmount = amountArray.reduce((acc, item) => {
    if (item === "狗曦曦") {
      console.log("找到狗曦曦了");
      acc++;
    }
    return acc;
  },0)复制代码

• 案例三：统计所有元素出现次数

  //统计所有元素出现个数
  let allArray = ["狗曦曦", "狗曦曦", "玉玉", "喵喵"]
  let allAmount = amountArray.reduce((acc, item) => {
    if (item in acc) {
      acc[item]++;
    } else {
      acc[item] = 1
    }
    return acc
  }, {})
  /*
      预期结果
      {
          "狗曦曦": 2,
          "玉玉": 1,
          "喵喵": 1
      }
  */
  console.log(allAmount);复制代码

  \

作者：进击的一二
链接：https://juejin.cn/post/7037492098781675551

伪原创工具 SEO网站优化  https://www.237it.com/