jsでのreduceの使用シナリオ:

reduce は主に、配列またはオブジェクト内の複数の値を 1 つの値に結合するために使用され、各要素に対して指定された操作を実行できます。一般的な使用シナリオには次のようなものがあります。

  1. 配列の合計、平均値、最大値、最小値などの演算。

  2. 多次元配列を平坦化します。

  3. アレイ上で重複排除や並べ替えなどの操作を実行します。

  4. 配列の要素を属性ごとにグループ化します。

  5. オブジェクトの属性値を組み合わせて計算します。

  6. 関数のカリー化を実装します。

  7. チェーンコールを実装します。

"1" 配列の合計、平均値、最大値、最小値、その他の演算。

// 求和
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((prev, cur) => prev + cur, 0);
console.log(sum); // 15

// 求平均值
const arr = [1, 2, 3, 4, 5];
const avg = arr.reduce((prev, cur, index, arr) => {
  prev += cur;
  if (index === arr.length - 1) {
    return prev / arr.length;
  } else {
    return prev;
  }
}, 0);
console.log(avg); // 3

// 求最大值
const arr = [1, 2, 3, 4, 5];
const max = arr.reduce((prev, cur) => prev > cur ? prev : cur, arr[0]);
console.log(max); // 5

// 求最小值
const arr = [1, 2, 3, 4, 5];
const min = arr.reduce((prev, cur) => prev < cur ? prev : cur, arr[0]);
console.log(min); // 1


"2" 多次元配列を平坦化します。

reduce メソッドのコールバック関数では、現在の要素が配列であるかどうかを判定し、配列である場合は flatten 関数を再帰的に呼び出して平坦化処理を実行し、そうでない場合は現在の要素を結果の配列に追加します。最後に結果の配列を返します

const arr = [1, [2, [3, 4], 5], 6];

function flatten(arr) {
  return arr.reduce((prev, cur) => {
    if (Array.isArray(cur)) {
      return prev.concat(flatten(cur));
    } else {
      return prev.concat(cur);
    }
  }, []);
}

const flatArr = flatten(arr);
console.log(flatArr); // [1, 2, 3, 4, 5, 6]

 "3" アレイ上で重複排除や並べ替えなどの操作を実行します。

// 排序
const arr = [3, 1, 4, 2, 5];

const sortedArr = arr.reduce((prev, cur) => {
  const index = prev.findIndex(item => item > cur);
  if (index === -1) {
    prev.push(cur);
  } else {
    prev.splice(index, 0, cur);
  }
  return prev;
}, []);

console.log(sortedArr); // [1, 2, 3, 4, 5]

// 去重
const arr = [1, 2, 3, 2, 4, 1, 5];

const uniqueArr = arr.reduce((prev, cur) => {
  if (prev.indexOf(cur) === -1) {
    prev.push(cur);
  }
  return prev;
}, []);

console.log(uniqueArr); // [1, 2, 3, 4, 5]

"4" 配列内の要素を特定の属性に従ってグループ化します。

// 将数组中的元素按照某个属性进行分组
const arr = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
  {id: 3, name: 'Charlie'},
  {id: 4, name: 'David'},
  {id: 5, name: 'Alice'}
];

const groupObj = arr.reduce((prev, cur) => {
  if (!prev[cur.name]) {
    prev[cur.name] = [];
  }
  prev[cur.name].push(cur);
  return prev;
}, {});

console.log(groupObj);
/*
{
  Alice: [
    {id: 1, name: 'Alice'},
    {id: 5, name: 'Alice'}
  ],
  Bob: [
    {id: 2, name: 'Bob'}
  ],
  Charlie: [
    {id: 3, name: 'Charlie'}
  ],
  David: [
    {id: 4, name: 'David'}
  ]
}

在reduce方法的回调函数中,使用一个空对象作为初始值,遍历数组中的每个元素,如果当前元素的name属性不存在于结果对象中,则在结果对象中新增一个空数组;然后将当前元素加入到对应的数组中。最终返回结果对象,其中的属性名就是按照name属性分组的标准。
*/

「5」オブジェクトの属性値を結合して計算する

// 对象属性值合并
const objArr = [
  {name: 'Alice', age: 20},
  {name: 'Bob', age: 22},
  {name: 'Charlie', age: 25},
  {name: 'David', age: 21},
  {name: 'Alice', age: 23}
];

const groupObj = objArr.reduce((prev, cur) => {
  if (!prev[cur.name]) {
    prev[cur.name] = {name: cur.name, age: 0};
  }
  prev[cur.name].age += cur.age;
  return prev;
}, {});

console.log(groupObj);
/*
{
  Alice: {name: 'Alice', age: 43},
  Bob: {name: 'Bob', age: 22},
  Charlie: {name: 'Charlie', age: 25},
  David: {name: 'David', age: 21}
}
*/

// 对象属性值计算
const objArr = [
  {name: 'Alice', score: 80},
  {name: 'Bob', score: 90},
  {name: 'Charlie', score: 70},
  {name: 'David', score: 85},
  {name: 'Alice', score: 95}
];

const sum = objArr.reduce((prev, cur) => prev + cur.score, 0);

console.log(sum); // 420

「6」では関数のカリー化を実現します。

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      }
    }
  }
}

function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = curry(add);

console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 6
console.log(curriedAdd(1)(2, 3)); // 6
console.log(curriedAdd(1, 2, 3)); // 6

在curry函数中,使用reduce方法对参数列表进行累加,如果参数列表长度大于等于函数的形参个数,则直接调用原函数;
否则返回一个新的包装函数,将新的参数列表和原有的参数列表合并后再次调用curried函数。最终返回原函数的计算结果。
通过这种方式,就可以实现函数的柯里化

「7」 チェーンチューニングを実現

class Calc {
  constructor(initValue = 0) {
    this.value = initValue;
  }
  add(num) {
    this.value += num;
    return this;
  }
  sub(num) {
    this.value -= num;
    return this;
  }
  mul(num) {
    this.value *= num;
    return this;
  }
  div(num) {
    this.value /= num;
    return this;
  }
}

const calc = new Calc(10);

const result = calc.add(5).sub(3).mul(2).div(4).value;

console.log(result); // 3

在Calc类中,每个方法都返回this对象,这样就可以实现链式调用。
在链式调用的最后,通过访问value属性获取最终的计算结果。
在这个过程中,可以使用reduce方法对方法列表进行累加,从而实现链式调用

おすすめ

転載: blog.csdn.net/congxue666/article/details/130562099