[JavaScript知识库]JavaScript 数组API重学系列记录

目录

Array API - reduce()

语法

参数说明

返回值说明

应用

Array API - reduce()

 ? ? ? ?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（）首次调用时作为累计器的初始值 ( 指定初始值时 accumulator = initialValue )

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

      • Number

      • Object

      • …数据类型

  • 未指定initialValue

    • 数组元素 > 1

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

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

    • 空数组 调用 callback()

      

    • 数组仅有一个元素

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

  • 指定 initialValue

    • 空数组调用callback()

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

返回值说明

• 函数累计处理结果

• 最后一次执行 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);