摘要：數(shù)組方法中，相比等常用的迭代方法，常常被我們所忽略，今天一起來探究一下在我們實(shí)戰(zhàn)開發(fā)當(dāng)中，能有哪些妙用之處，下面從語法開始介紹。按順序運(yùn)行異步函數(shù)我們可以做的另一件事是按順序運(yùn)行而不是并行。函數(shù)返回一個(gè)對象，可以使用方法添加回調(diào)函數(shù)。

Javascript數(shù)組方法中，相比map、filter、forEach等常用的迭代方法，reduce常常被我們所忽略，今天一起來探究一下reduce在我們實(shí)戰(zhàn)開發(fā)當(dāng)中，能有哪些妙用之處，下面從reduce語法開始介紹。

array.reduce(function(accumulator, arrayElement, currentIndex, arr), initialValue)

若傳入初始值，accumulator首次迭代就是初始值，否則就是數(shù)組的第一個(gè)元素；后續(xù)迭代中將是上一次迭代函數(shù)返回的結(jié)果。所以，假如數(shù)組的長度為n，如果傳入初始值，迭代次數(shù)為n；否則為n-1。

比如實(shí)現(xiàn)數(shù)組 arr = [1,2,3,4] 求數(shù)組的和

let arr = [1,2,3,4];
arr.reduce(function(pre,cur){return pre + cur}); // return 10

實(shí)際上reduce還有很多重要的用法，這是因?yàn)槔奂悠鞯闹悼梢圆槐貫楹唵晤愋停ㄈ鐢?shù)字或字符串），它也可以是結(jié)構(gòu)化類型（如數(shù)組或?qū)ο螅?，這使得我們可以用它做一些其他有用的事情，比如：

將數(shù)組轉(zhuǎn)換為對象

展開更大的數(shù)組

在一次遍歷中進(jìn)行兩次計(jì)算

將映射和過濾函數(shù)組合

按順序運(yùn)行異步函數(shù)

在實(shí)際業(yè)務(wù)開發(fā)中，你可能遇到過這樣的情況，后臺接口返回的數(shù)組類型，你需要將它轉(zhuǎn)化為一個(gè)根據(jù)id值作為key，將數(shù)組每項(xiàng)作為value的對象進(jìn)行查找。

例如：

const userList = [
  {
    id: 1,
    username: "john",
    sex: 1,
    email: "[email protected]"
  },
  {
    id: 2,
    username: "jerry",
    sex: 1,
    email: "[email protected]"
  },
  {
    id: 3,
    username: "nancy",
    sex: 0,
    email: ""
  }
];

如果你用過lodash這個(gè)庫，使用_.keyBy這個(gè)方法就能進(jìn)行轉(zhuǎn)換，但用reduce也能實(shí)現(xiàn)這樣的需求。

function keyByUsernameReducer(acc, person) {
    return {...acc, [person.id]: person};
}
const userObj = peopleArr.reduce(keyByUsernameReducer, {});
console.log(userObj);

試想這樣一個(gè)場景，我們將一堆純文本行讀入數(shù)組中，我們想用逗號分隔每一行，生成一個(gè)更大的數(shù)組名單。

const fileLines = [
    "Inspector Algar,Inspector Bardle,Mr. Barker,Inspector Barton",
    "Inspector Baynes,Inspector Bradstreet,Inspector Sam Brown",
    "Monsieur Dubugue,Birdy Edwards,Inspector Forbes,Inspector Forrester",
    "Inspector Gregory,Inspector Tobias Gregson,Inspector Hill",
    "Inspector Stanley Hopkins,Inspector Athelney Jones"
];

function splitLineReducer(acc, line) {
    return acc.concat(line.split(/,/g));
}
const investigators = fileLines.reduce(splitLineReducer, []);
console.log(investigators);
// [
//   "Inspector Algar",
//   "Inspector Bardle",
//   "Mr. Barker",
//   "Inspector Barton",
//   "Inspector Baynes",
//   "Inspector Bradstreet",
//   "Inspector Sam Brown",
//   "Monsieur Dubugue",
//   "Birdy Edwards",
//   "Inspector Forbes",
//   "Inspector Forrester",
//   "Inspector Gregory",
//   "Inspector Tobias Gregson",
//   "Inspector Hill",
//   "Inspector Stanley Hopkins",
//   "Inspector Athelney Jones"
// ]

我們從長度為5的數(shù)組開始，最后得到一個(gè)長度為16的數(shù)組。

另一種常見增加數(shù)組的情況是flatMap，有時(shí)候我們用map方法需要將二級數(shù)組展開，這時(shí)可以用reduce實(shí)現(xiàn)扁平化

例如：

Array.prototype.flatMap = function(f) {
    const reducer = (acc, item) => acc.concat(f(item));
    return this.reduce(reducer, []);
}

const arr = ["今天天氣不錯(cuò)", "", "早上好"]

const arr1 = arr.map(s => s.split(""))
// [["今", "天", "天", "氣", "不", "錯(cuò)"],[""],["早", "上", "好"]]

const arr2 = arr.flatMap(s => s.split(""));
// ["今", "天", "天", "氣", "不", "錯(cuò)", "", "早", "上", "好"]

有時(shí)我們需要對數(shù)組進(jìn)行兩次計(jì)算。例如，我們可能想要計(jì)算數(shù)字列表的最大值和最小值。我們可以通過兩次通過這樣做：

const readings = [0.3, 1.2, 3.4, 0.2, 3.2, 5.5, 0.4];
const maxReading = readings.reduce((x, y) => Math.max(x, y), Number.MIN_VALUE);
const minReading = readings.reduce((x, y) => Math.min(x, y), Number.MAX_VALUE);
console.log({minReading, maxReading});
// {minReading: 0.2, maxReading: 5.5}

這需要遍歷我們的數(shù)組兩次。但是，有時(shí)我們可能不想這樣做。因?yàn)?reduce()讓我們返回我們想要的任何類型，我們不必返回?cái)?shù)字。我們可以將兩個(gè)值編碼到一個(gè)對象中。然后我們可以在每次迭代時(shí)進(jìn)行兩次計(jì)算，并且只遍歷數(shù)組一次：

const readings = [0.3, 1.2, 3.4, 0.2, 3.2, 5.5, 0.4];
function minMaxReducer(acc, reading) {
    return {
        minReading: Math.min(acc.minReading, reading),
        maxReading: Math.max(acc.maxReading, reading),
    };
}
const initMinMax = {
    minReading: Number.MAX_VALUE,
    maxReading: Number.MIN_VALUE,
};
const minMax = readings.reduce(minMaxReducer, initMinMax);
console.log(minMax);
// {minReading: 0.2, maxReading: 5.5}

還是先前那個(gè)用戶列表，我們希望找到?jīng)]有電子郵件地址的人的用戶名，返回它們用戶名用逗號拼接的字符串。一種方法是使用兩個(gè)多帶帶的操作：

獲取過濾無電子郵件后的條目

獲取用戶名并拼接

將它們放在一起可能看起來像這樣：

function notEmptyEmail(x) {
   return !!x.email
}

function notEmptyEmailUsername(a, b) {
    return a ? `${a},${b.username}` : b.username
}

const userWithEmail = userList.filter(notEmptyEmail);
const userWithEmailFormatStr = userWithEmail.reduce(notEmptyEmailUsername, "");

console.log(userWithEmailFormatStr);
// "john,jerry"

現(xiàn)在，這段代碼是完全可讀的，對于小的樣本數(shù)據(jù)不會有性能問題，但是如果我們有一個(gè)龐大的數(shù)組呢？如果我們修改我們的reducer回調(diào)，那么我們可以一次完成所有事情：

function notEmptyEmail(x) {
   return !!x.email
}

function notEmptyEmailUsername(usernameAcc, person){
    return (notEmptyEmail(person))
        ? (usernameAcc ? `${usernameAcc},${person.username}` : `${person.username}`) : usernameAcc;
}

const userWithEmailFormatStr = userList.reduce(notEmptyEmailUsername, "");

console.log(userWithEmailFormatStr);
// "john,jerry"

在這個(gè)版本中，我們只遍歷一次數(shù)組，一般建議使用filter和map的組合，除非發(fā)現(xiàn)性能問題，才推薦使用reduce去做優(yōu)化。

我們可以做的另一件事.reduce()是按順序運(yùn)行promises（而不是并行）。如果您對API請求有速率限制，或者您需要將每個(gè)prmise的結(jié)果傳遞到下一個(gè)promise，reduce可以幫助到你。

舉一個(gè)例子，假設(shè)我們想要為userList數(shù)組中的每個(gè)人獲取消息。

function fetchMessages(username) {
    return fetch(`https://example.com/api/messages/${username}`)
        .then(response => response.json());
}

function getUsername(person) {
    return person.username;
}

async function chainedFetchMessages(p, username) {
    // In this function, p is a promise. We wait for it to finish,
    // then run fetchMessages().
    const obj  = await p;
    const data = await fetchMessages(username);
    return { ...obj, [username]: data};
}

const msgObj = userList
    .map(getUsername)
    .reduce(chainedFetchMessages, Promise.resolve({}))
    .then(console.log);
// {glestrade: [ … ], mholmes: [ … ], iadler: [ … ]}

async函數(shù)返回一個(gè) Promise 對象，可以使用then方法添加回調(diào)函數(shù)。當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到await就會先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。

請注意，在此我們傳遞Promise作為初始值Promise.resolve()，我們的第一個(gè)API調(diào)用將立即運(yùn)行。

下面是不使用async語法糖的版本

function fetchMessages(username) {
    return fetch(`https://example.com/api/messages/${username}`)
        .then(response => response.json());
}

function getUsername(person) {
    return person.username;
}

function chainedFetchMessages(p, username) {
    // In this function, p is a promise. We wait for it to finish,
    // then run fetchMessages().
    return p.then((obj)=>{
        return fetchMessages(username).then(data=>{
            return {
                ...obj,
                [username]: data
            }
        })
    })
}

const msgObj = peopleArr
    .map(getUsername)
    .reduce(chainedFetchMessages, Promise.resolve({}))
    .then(console.log);
// {glestrade: [ … ], mholmes: [ … ], iadler: [ … ]}

PS：更多前端資訊、技術(shù)干貨，請關(guān)注公眾號「前端新視界」