亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

數(shù)組的reduce方法

趙春朋 / 2473人閱讀

摘要：數(shù)組的方法大家對數(shù)組的，等的操作應(yīng)該都比較熟悉了。首先，的用法如下對數(shù)組中的所有元素調(diào)用指定的回調(diào)函數(shù)。語法注意這時候只能是同步方法參數(shù)含義通過上一次調(diào)用回調(diào)函數(shù)獲得的值。否者將是調(diào)用數(shù)組的第一項當(dāng)前數(shù)組元素的值。

數(shù)組的reduce方法

async await reduce array

大家對數(shù)組的map,filter，forEach等的操作應(yīng)該都比較熟悉了。這兩天寫代碼的時候用到了reduce方法，一不小心寫出了一個bug，在此記錄一下。

首先，reduce的用法如下：

對數(shù)組中的所有元素調(diào)用指定的回調(diào)函數(shù)。該回調(diào)函數(shù)的返回值為累積結(jié)果，并且此返回值在下一次調(diào)用該回調(diào)函數(shù)時作為參數(shù)提供。

語法：

array.reduce(callback[,initialValue]) //注意這時候只能是同步方法
function callbackfn(previousValue, currentValue, currentIndex, array1)
參數(shù) 含義
previousValue 通過上一次調(diào)用回調(diào)函數(shù)獲得的值。如果向 reduce 方法提供initialValue，則在首次調(diào)用函數(shù)時，previousValue 為 initialValue。否者將是調(diào)用數(shù)組的第一項
currentValue 當(dāng)前數(shù)組元素的值。
currentIndex 當(dāng)前數(shù)組元素的數(shù)字索引。
array1 包含該元素的數(shù)組對象。

實現(xiàn)：

// 實現(xiàn)數(shù)組的每一項之和
var arr = [1,2,3,4]
arr.reduce((pre,cur) => {return pre + cur}) // return 10
實現(xiàn)數(shù)組的每一項轉(zhuǎn)化為對象,例({1: 1, 2: 2, 3: 3, 4: 4})
var arr = [1,2,3,4]
arr.reduce((final,cur) => {
  final[cur] = cur
  return final
}, {}) // return {1: 1, 2: 2, 3: 3, 4: 4}

BUG
昨天的代碼，我是這么實現(xiàn)的：

async function getGroup() {
    ...
}

async function getGroups() {
  var arr = [1,2,3]
  const result = arr.reduce(async (final,cur) => {
    final[cur] = await getGroup(cur)
    console.log(final, "<===final")
    return final
  }, {}) 
}
// final的打印值
{ "9ddc9834-9344-4cc1-be38-ba2d0e9d17c5": { recommendType: 1, weight: 123 } } "<===final"
Promise {
  _c: [],
  _a: undefined,
  _s: 1,
  _d: true,
  _v: { "9ddc9834-9344-4cc1-be38-ba2d0e9d17c5": { recommendType: 1, weight: 123 } },
  _h: 0,
  _n: false,
  "9bb6ed56-29a3-47e5-89a8-b652e8f08ef8": { recommendType: 2, weight: 12 } } "<===final"
Promise {
  _c: [],
  _a: undefined,
  _s: 0,
  _d: false,
  _v: undefined,
  _h: 0,
  _n: false,
  "30ffffd8c9-2132-4d27-bc4b-4d27305acec9": {} }"<===final"

我們可以看到final的值并不是我們預(yù)期的，循環(huán)中只有第一個值是對的，后面的值都不對，而且看起來是個Promise對象。這是為什么呢？
接下來看到上面的實現(xiàn)翻譯成reduce的底層實現(xiàn)方式：

var final = {}
async function getGroup(final, cur){
  final[cur] = await getGroup(cur)
  console.log(final, "<===final")
  return final
}
for(var i = 0, i < arr.lenght, i++) {
   final = getGroup(final, arr[i])
   //這里沒有用async await執(zhí)行異步方法，導(dǎo)致，傳回的final只是個Promise方法對象
}

這樣我們就清楚為什么上面會打印這么奇怪的結(jié)果了。下面我們只要做小小的修改，就可以得到正確的結(jié)果：

var temp = {}
async function getGroup() {
    ...
}

async function getGroups() {
  var arr = [1,2,3]
  const result = arr.reduce(async (final,cur) => {
    temp[cur] = await getGroup(cur)
    console.log(temp, "<===final")
    return temp
  }, {}) 
}

以后還是盡量避免在reduce里面執(zhí)行異步方法~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/91372.html

相關(guān)文章

  • JS進(jìn)階篇--JS數(shù)組reduce()方法詳解及高級技巧

    摘要：基本概念方法接收一個函數(shù)作為累加器，數(shù)組中的每個值從左到右開始縮減，最終為一個值。例進(jìn)階應(yīng)用使用方法可以完成多維度的數(shù)據(jù)疊加。在該函數(shù)內(nèi)部，則執(zhí)行多維的疊加工作。參考的內(nèi)建函數(shù)數(shù)組方法的高級技巧 基本概念 reduce() 方法接收一個函數(shù)作為累加器（accumulator），數(shù)組中的每個值（從左到右）開始縮減，最終為一個值。 reduce 為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù)，不包括...

    jerryloveemily 評論0 收藏0

  • JS的內(nèi)建函數(shù)reduce

    摘要：函數(shù)，是規(guī)范中出現(xiàn)的數(shù)組方法。所有的一切通過一個函數(shù)來管理流程和傳遞初始參數(shù)。上面就是函數(shù)的實現(xiàn)，它需要對象作為參數(shù)，并返回一個類型的函數(shù)，作為的第一個參數(shù)。在該函數(shù)內(nèi)部，則執(zhí)行多維的疊加工作。 @(js) reduce函數(shù)，是ECMAScript5規(guī)范中出現(xiàn)的數(shù)組方法。在平時的工作中，相信大家使用的場景并不多，一般而言，可以通過reduce方法實現(xiàn)的邏輯都可以通過forEach方法來...

    mrcode 評論0 收藏0

  • Javascript 中的map/reduce

    摘要：簡單例子一個較為常用的場景就是累加或累乘輸出數(shù)組元素的乘積輸出數(shù)組元素的乘積簡寫形式輸出數(shù)組元素的乘積形式，營造復(fù)雜的逼格用在數(shù)組降維扁平化處理的例子中注方法用于連接兩個或多個數(shù)組。 看到一個提問的回答巧妙地使用了map/reduce操作，很優(yōu)雅，所以來學(xué)習(xí)和總結(jié)一下javascript自帶的map/reduce的使用技巧，文章不會講的很深，純當(dāng)科普一下知識點，如有解釋的不正確的地方，...

    zhou_you 評論0 收藏0

  • 面試題目別有洞天 -> 從es6優(yōu)雅解法，到降級polyfill，再到redux reduce

    摘要：每次被執(zhí)行時，和被傳入，這個根據(jù)進(jìn)行累加或者是自身消減，英文原意，進(jìn)而返回最新的。 之前的一篇文章：從一道面試題，到我可能看了假源碼討論了bind方法的各種進(jìn)階Pollyfill，今天再分享一個有意思的題目。 從解這道題目出發(fā)，我會談到數(shù)組的Reduce方法，ES6特性和Redux數(shù)據(jù)流框架中Reducer的命名等等。一道典型的題目，卻如唐代詩人章碣《對月》詩中所云：別有洞天三十六，水...

    econi 評論0 收藏0

  • Javascript中數(shù)組方法reduce的妙用之處

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

    yiliang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<