JS数组对象中强大的map方法和reduce方法

在JavaScript中，map 和 reduce 是数组对象中两个非常强大且常用的高阶函数。它们提供了一种简洁且声明式的方式来处理数组数据，使代码更加简洁和易读。下面是对这两个方法的详细解释。

一、map方法

map 方法用于创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。map 不会改变原始数组。

语法如下所示：

array.map(callback(currentValue, index, array), thisArg)

callback：回调函数，用于执行数组中每个元素的函数，该函数可以接受三个参数

        currentValue：当前值，即数组中当前正在处理的元素。

        index（可选）：当前元素的索引。

        array（可选）：原生数组，即调用 map 方法的数组。

thisArg（可选）：执行回调函数时 this 关键字的值。

基础用法示例：

const numbers = [1, 2, 3, 4, 5, 6];
const eachMultiplyTwo = numbers.map(number => number * 2); // 结果: [2, 4, 6, 8, 10, 12]

上述代码中，定义了一个数组numbers，存储1，2，3，4，5，6六个数组，随后调用map方法，遍历numbers中的每一个元素number，并执行乘以2的操作，返回一个全新的数组，在赋值给eachMultiplyTwo 。

在JS中模拟map的操作，加深对map的理解：

Array.prototype.myMap = function(fu){
  let res = [];
  for(let i=0; i<this.length; i++){
    res.push(fu(this[i], i, this)); //这里的this就是调用的数组
  };
  return res;
}

上述代码在数组对象的原型中加入添加了myMap方法，与原生方法map操作类似，但省略了thisArg参数。

二、reduce方法

reduce 方法对数组中的每个元素执行一个提供的函数（升序执行），将其结果汇总为单个值。

语法如下所示：

array.reduce(callback(accumulator, currentValue, index, array), initialValue)

callback：回调函数，用于执行数组中每个元素的函数，该函数可以接受四个参数

        accumulator：累计器累计回调的返回值。它是上一次调用回调时返回的值

        currentValue：数组中当前正在处理的元素

        index（可选）：当前元素的索引

        array（可选）：原生数组，即调用 reduce 方法的数组

initialValue（可选）：用作第一个调用 callback 函数的第一个参数的值。如果没有提供 initialValue，将在数组的第一个元素上跳过 callback 的第一次调用，且 accumulator 使用数组的第一个元素

基础用法示例：

const numbers = [1, 2, 3, 4, 5, 6];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出: 21

在上述例子中，reduce 方法遍历 numbers 数组，将每个元素累加到 accumulator 中，最终返回总和 21。

在JS中模拟reduce的操作，加深对reduce的理解：

Array.prototype.myReduce = function(fu, f){
  //fu 对应reduce中的回调函数
  //f对应初始值
  let r = f;
  for(let i=0; i<this.length; i++){
    r = fu(r, this[i], i, this); //这里的this就是调用的数组
  };
  return r;
}

上述代码在数组对象的原型中加入添加了myReduce 方法，与原生方法reduce 操作类似

三、进阶示例

使用map转换对象数组

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const names = users.map(user => user.name); //结果: ['Alice', 'Bob', 'Charlie']

上述示例中，通过map方法取出users数组中每个对象的name属性，并返回新数组

使用reduce方法操作二维数组

let arrs = [
  ["name", "class", "grades"],
  ["Bob", "class 1", 705],
  ["Frad", "class 1", 655],
  ["Charli", "class 2", 723],
  ["Jack", "class 2", 603]
]

//计算class 1的总分
const totalPriceClass1 = arrs.slice(1).reduce((acc, item)=>{
  if(item[1] === "class 1") acc += item[2];  //判断班级将class 1的得分累加到acc中
  return acc;
}, 0); //结果是1360