JavaScript reduce方法使用方法介紹

更新時間：2022年10月17日 11:04:36 作者：愛思考的豬

Reduce是個純函數(shù)，即只要傳入相同的參數(shù)，每次都應返回相同的結果。不要把和處理數(shù)據(jù)無關的代碼放在Reduce里，讓Reduce保持純凈，只是單純地執(zhí)行計算，這篇文章主要介紹了Redux拆分reduce函數(shù)流程

1. reduce方法的使用

Array.prototype.reduce(callBack(previousValue, currentValue, currentIndex), initialValue)

reduce是數(shù)組的一個高階方法,用來實現(xiàn)對數(shù)組的累加計算

var arr = ['a', 'b', 'c'];
var str = arr.reduce(function (previousValue, currentValue, currentIndex) {
  return previousValue + currentValue;
  });
console.log(str); //abc
var str = arr.reduce(function (previousValue, currentValue, currentIndex) {
  return previousValue + currentValue;
}, 's');
console.log(str); //sabc

reduce的回調函數(shù)中一共有4個參數(shù):

previous 表示計算的前一個值
currentValue 是正在被計算的值
currentIndex 是正在計算的索引
initialValue 設置累加的初始值

在數(shù)組遍歷的時候,回調函數(shù)的返回值會累加給previousValue,一直到數(shù)組遍歷完畢返回這個累加值。

在沒有傳遞initialValue的情況下,首次累加的時候previousValue為數(shù)組的第1項,currentValue為數(shù)組的第2項,當傳遞了initialValue的時候previousValue初始值為initialValue,currentValue初始值為數(shù)組的第一項

2. reduce數(shù)組的使用場景

2.1 扁平化數(shù)組

使用reduce實現(xiàn)Array.prototype.flat的功能

const arr = [[1, 2, 3], [4, 5, 6, 7, 8], [9]];
const flat = arr.reduce((previousValue, currentValue) => {
   return previousValue.concat(currentValue);
});
console.log(flat); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

2.2 數(shù)組去重

const arr = [1, 2, 5, 2, 5, 5];
const deduplication = arr.reduce((previousValue, currentValue) => {
  return previousValue.includes(currentValue) ? previousValue : previousValue.concat([currentValue]);
}, []);
console.log(deduplication);

2.3 計算數(shù)組最大/最小值

const arr = [2, 5, 1, 88, 12, -21, 33, 10, 75];
const maxVal = arr.reduce((previousValue, currentValue) => Math.max(previousValue, currentValue));
console.log(maxVal); //8

2.4 數(shù)組求和

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

2.5 計算數(shù)組中元素的出現(xiàn)次數(shù)

const arr = ['a', 'c', 'b', 'a', 'c', 'e'];
const countedCharacter = arr.reduce((previousValue, currentValue) => {
if (currentValue in previousValue) {
  return { ...previousValue, [currentValue]: previousValue[currentValue] + 1 };
} else {
    return { ...previousValue, [currentValue]: 1 };
  };
}, {});
console.log(countedCharacter); //{a: 2, c: 2, b: 1, e: 1};

3. 操作對象

累加對象數(shù)組里面的值

const arr = [{ x: 1 }, { x: 2 }, { x: 3 }];
const sum = arr.reduce((previousValue, currentValue) =>
 previousValue + currentValue.x, 0);
console.log(sum); //6

4. 使用reduce代替.filter().map()

使用reduce可以同時完成過濾合映射,不需要遍歷兩次數(shù)組

const arr = [81, 92, 67, 100, 79];
const scoreArr = arr.filter(s => s > 80).map(val => ({ score: val }));
const scoreArr1 = arr.reduce((previousValue, currentValue) => {
  if (currentValue > 80) { return previousValue.concat([{ score: currentValue }]) } else {
    return previousValue;
  }
}, []);
console.log(scoreArr); //[{score: 81}, {score: 92}, {score: 100}]
console.log(scoreArr1); //[{score: 81}, {score: 92}, {score: 100}]

5. 按順序執(zhí)行promise

function p1(num) {
  return new Promise((rs, rj) => {
    setTimeout(() => {
      rs(num + 5);
    }, 100);
  });
 };
function p2(num) {
  return new Promise((rs, rj) => {
    setTimeout(() => {
      rs(num * 2);
    }, 300);
  });
 };
function p3(num) {
  return new Promise((rs, rj) => {
    rs(num - 3);
  })
 };
//鏈式調用
Promise.resolve(10)
  .then(p1)
  .then(p2)
  .then(p3)
  .then(res => console.log(res)) ;  //27
//使用reduce執(zhí)行promise
var arr = [p1, p2, p3];
var lastPromise = arr.reduce((previousPromise, currentPromise) => previousPromise.then(currentPromise), Promise.resolve(10));
lastPromise.then(res => console.log(res)); //27

6. 使用compose函數(shù)組合實現(xiàn)管道

管道(Pipe)是指輸入一個值,依次經過管道(有序的函數(shù)運算)后輸出這個值,是函數(shù)編程的核心思想

function add10(num) {
  return num + 10;
};
function multipl2(num) {
  return num * 2;
};
function divide3(num) {
  return num / 3;
};
const compose = (fns) => (initialValue) => fns.reduce((previous, current) => current(previous), initialValue);
const calculate1 = compose([add10, divide3]);
const calculate2 = compose([divide3, add10, multipl2]);
console.log(calculate1(20)); //10
console.log(calculate2(9)); //26

到此這篇關于JavaScript reduce方法使用方法介紹的文章就介紹到這了,更多相關JS reduce內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: