前言

在實際專案中，最常見可能是在計算、迴圈邏輯方面的處理，可以使用陣列中reduce方法也可以解決很多的問題，使得你的程式碼風格更加優雅！

reduce語法

arr.reduce(callback(accumulator,currentValue[,index[,array]])[,initialValue])

引數說明

reducer函式需要接收4個引數分別是

callback

• Accumulator
  • 累計器累計回撥的返回值; 它是上一次呼叫回撥時返回的累積值，或initialValue。
• Current Value
  • 陣列中正在處理的元素。
• Current Index
  • 這是一個可選引數，陣列中正在處理的當前元素的索引。 如果提供了initialValue，則起始索引號為0，否則從索引1起始。
• Source Array
  • 這是一個可選引數，呼叫reduce()的陣列

initialValue

• 作為第一次呼叫 callback函式時的第一個引數的值。 如果沒有提供初始值，則將使用陣列中的第一個元素。 在沒有初始值的空陣列上呼叫 reduce 將報錯。

返回值

• 函式累計處理的結果

一些reduce常用方法

數組裡所有元素的和

const arr = [1,2,3,4];
const result = arr.reduce((acc,cur) => acc + cur)
​
console.log(result) // 10

計算陣列中每個元素出現的次數

const nums = ['1','1','2','3'];
const countednums = nums.reduce((acc,cur) => { 
 if (cur in acc) {
  acc[cur]++;
  }
 else {
  acc[cur] = 1;
  }
 return acc;
},{});
​
console.log(countednums); // {1: 3,2: 1,3: 1}

扁平化陣列

const arr = [['a','b'],['b','c'],['d','e']]
const flatten = arr => {
 return arr.reduce((acc,cur) => {
  return acc.concatwww.cppcns.com(cur)
  },[])
}
​
console.log(flatten(arr)); // ["a","b","c","d","e"]

陣列去重

const arr = [22,341,124,54,4,21,1,4];
const result = arr.sort().reduce((acc,cur) => {
  if(acc.length === 0 || acc[acc.length-1] !== cur) {
     acc.push(cur);
   }
  return acc;
},[]);
​
console.log(result); // [1,22,54]

求陣列中最大值

const arr = [1,5,1]
let result = arr.reduce((acc,cur) => Math.max(acc,cur))
​
console.log(result)

按照順序呼叫promise

這種方式實際上處理的是promise的value，將上一個promise的value作為下一個promise的value進行處理。

const prom1 = a => {
  return new Promise((resolve => {
    resolve(a)
  }))
}
const prom2 = a => {
  return new Promise((resolve => {
    resolve(a * 2)
  }))
}
const prom3 = a => {
  return new Promise((resolve => {
    resolve(a * 3)
  }))
}

const arr = [prom1,prom2,prom3]
const result = arr.reduce((all,current) => {
  return all.then(current)
},Promise.resolve(10))

result.twww.cppcns.comhen(res => {
  console.log(res);
})

最後

本文分享了一些在日常開發中比較常用的一些reduce處理方法，你可以直接拿到你的專案中使用，也可以進行二次封裝。

到此這篇關於利用reduce方法讓你的程式碼更加優雅的文章就介紹到這了,更多相關js reduce方法讓程式碼優雅內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！