JavaScript數(shù)組對(duì)象高階函數(shù)reduce的妙用詳解

更新時(shí)間：2023年04月19日 16:37:43 作者：思學(xué)堂

這篇文章主要為大家介紹了JavaScript數(shù)組對(duì)象高階函數(shù)reduce的妙用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

reduce 是 JavaScript 數(shù)組對(duì)象上的一個(gè)高階函數(shù)
計(jì)算數(shù)組的平均數(shù)
求數(shù)組的最大值
求數(shù)組的最小值
數(shù)組去重
計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的次數(shù)
實(shí)現(xiàn)數(shù)組分組
計(jì)算數(shù)組中連續(xù)遞增數(shù)字的長(zhǎng)度
計(jì)算對(duì)象數(shù)組的屬性總和
將對(duì)象數(shù)組轉(zhuǎn)換為鍵值對(duì)對(duì)象
計(jì)算數(shù)組中出現(xiàn)次數(shù)最多的元素
實(shí)現(xiàn) Promise 串行執(zhí)行
對(duì)象屬性值求和
按屬性對(duì)數(shù)組分組
扁平化數(shù)組
合并對(duì)象

reduce 是 JavaScript 數(shù)組對(duì)象上的一個(gè)高階函數(shù)

它可以用來(lái)迭代數(shù)組中的所有元素，并返回一個(gè)單一的值。

其常用的語(yǔ)法為： array.reduce(callback[, initialValue])

其中，callback 是一個(gè)回調(diào)函數(shù)，它接受四個(gè)參數(shù)：累加器（初始值或上一次回調(diào)函數(shù)的返回值）、當(dāng)前元素、當(dāng)前索引、操作的數(shù)組本身。initialValue 是一個(gè)可選的初始值，如果提供了該值，則作為累加器的初始值，否則累加器的初始值為數(shù)組的第一個(gè)元素。 reduce 函數(shù)會(huì)從數(shù)組的第一個(gè)元素開(kāi)始，依次對(duì)數(shù)組中的每個(gè)元素執(zhí)行回調(diào)函數(shù)?；卣{(diào)函數(shù)的返回值將成為下一次回調(diào)函數(shù)的第一個(gè)參數(shù)（累加器）。最后，reduce 函數(shù)返回最終的累加結(jié)果。以下是一個(gè)簡(jiǎn)單的 reduce 示例，用于計(jì)算數(shù)組中所有元素的和：

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // 15

在上面的代碼中，reduce 函數(shù)從數(shù)組的第一個(gè)元素開(kāi)始，計(jì)算累加值，返回最終的累加結(jié)果 15。除了數(shù)組的求和，reduce 函數(shù)還可以用于其他各種用途，如數(shù)組求平均數(shù)、最大值、最小值等。此外，reduce 函數(shù)還可以與 map、filter、forEach 等函數(shù)組合使用，實(shí)現(xiàn)更加復(fù)雜的數(shù)據(jù)操作。

當(dāng)然，以下是一些 reduce 的實(shí)際應(yīng)用案例，幫助你更好地理解它的用法：

計(jì)算數(shù)組的平均數(shù)

const arr = [1, 2, 3, 4, 5];
const average = arr.reduce((accumulator, currentValue, index, array) => {
  accumulator += currentValue;
  if (index === array.length - 1) {
    return accumulator / array.length;
  } else {
    return accumulator;
  }
});
console.log(average); // 3

求數(shù)組的最大值

const arr = [1, 2, 3, 4, 5];
const max = arr.reduce((accumulator, currentValue) => Math.max(accumulator, currentValue));
console.log(max); // 5

求數(shù)組的最小值

const arr = [1, 2, 3, 4, 5];
const min = arr.reduce((accumulator, currentValue) => Math.min(accumulator, currentValue));
console.log(min); // 1

數(shù)組去重

const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = arr.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的次數(shù)

const arr = [1, 2, 3, 3, 4, 4, 5];
const countMap = arr.reduce((accumulator, currentValue) => {
  if (!accumulator[currentValue]) {
    accumulator[currentValue] = 1;
  } else {
    accumulator[currentValue]++;
  }
  return accumulator;
}, {});
console.log(countMap); // {1: 1, 2: 1, 3: 2, 4: 2, 5: 1}

實(shí)現(xiàn)數(shù)組分組

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((accumulator, currentValue) => {
  if (currentValue % 2 === 0) {
    accumulator.even.push(currentValue);
  } else {
    accumulator.odd.push(currentValue);
  }
  return accumulator;
}, { even: [], odd: [] });
console.log(result); // {even: [2, 4], odd: [1, 3, 5]}

計(jì)算數(shù)組中連續(xù)遞增數(shù)字的長(zhǎng)度

const arr = [1, 2, 3, 5, 6, 7, 8, 9];
const result = arr.reduce((accumulator, currentValue, index, array) => {
  if (index === 0 || currentValue !== array[index - 1] + 1) {
    accumulator.push([currentValue]);
  } else {
    accumulator[accumulator.length - 1].push(currentValue);
  }
  return accumulator;
}, []);
const maxLength = result.reduce((accumulator, currentValue) => Math.max(accumulator, currentValue.length), 0);
console.log(maxLength); // 5

計(jì)算對(duì)象數(shù)組的屬性總和

const arr = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 },
];
const result = arr.reduce((accumulator, currentValue) => accumulator + currentValue.age, 0);
console.log(result); // 90

將對(duì)象數(shù)組轉(zhuǎn)換為鍵值對(duì)對(duì)象

const arr = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 },
];
const result = arr.reduce((accumulator, currentValue) => {
  accumulator[currentValue.name] = currentValue.age;
  return accumulator;
}, {});
console.log(result); // {Alice: 25, Bob: 30, Charlie: 35}

計(jì)算數(shù)組中出現(xiàn)次數(shù)最多的元素

const arr = [1, 2, 3, 4, 4, 4, 5, 5, 6, 6, 6, 6];
const result = arr.reduce((accumulator, currentValue) => {
  accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;
  return accumulator;
}, {});
const maxCount = Math.max(...Object.values(result));
const mostFrequent = Object.keys(result).filter(key => result[key] === maxCount).map(Number);
console.log(mostFrequent); // [6]

實(shí)現(xiàn) Promise 串行執(zhí)行

const promise1 = () => Promise.resolve('one');
const promise2 = (input) => Promise.resolve(input + ' two');
const promise3 = (input) => Promise.resolve(input + ' three');
const promises = [promise1, promise2, promise3];
const result = promises.reduce((accumulator, currentValue) => {
  return accumulator.then(currentValue);
}, Promise.resolve('start'));
result.then(console.log); // 'one two three'

對(duì)象屬性值求和

const obj = {
  a: 1,
  b: 2,
  c: 3
};
const result = Object.values(obj).reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(result); // 6

按屬性對(duì)數(shù)組分組

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Mary' },
  { id: 3, name: 'Bob' },
  { id: 4, name: 'Mary' }
];
const result = arr.reduce((accumulator, currentValue) => {
  const key = currentValue.name;
  if (!accumulator[key]) {
    accumulator[key] = [];
  }
  accumulator[key].push(currentValue);
  return accumulator;
}, {});
console.log(result);
/*
{
  John: [{ id: 1, name: 'John' }],
  Mary: [
    { id: 2, name: 'Mary' },
    { id: 4, name: 'Mary' }
  ],
  Bob: [{ id: 3, name: 'Bob' }]
}
*/

扁平化數(shù)組

// 如果你有一個(gè)嵌套的數(shù)組，可以使用reduce將其扁平化成一個(gè)一維數(shù)組。例如：
const nestedArray = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = nestedArray.reduce((acc, curr) => acc.concat(curr), []);
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]

合并對(duì)象

// 可以使用reduce將多個(gè)對(duì)象合并成一個(gè)對(duì)象。例如：
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { e: 5, f: 6 };
const mergedObj = [obj1, obj2, obj3].reduce((acc, curr) => Object.assign(acc, curr), {});
console.log(mergedObj); // {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

以上就是JavaScript數(shù)組對(duì)象高階函數(shù)reduce的妙用詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript數(shù)組對(duì)象reduce的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: