数组的reduce方法

赵春朋发布于2019-08-22 10:50 / 2372人阅读

摘要：数组的方法大家对数组的，等的操作应该都比较熟悉了。首先，的用法如下对数组中的所有元素调用指定的回调函数。语法注意这时候只能是同步方法参数含义通过上一次调用回调函数获得的值。否者将是调用数组的第一项当前数组元素的值。

数组的reduce方法

async await reduce array

大家对数组的map,filter，forEach等的操作应该都比较熟悉了。这两天写代码的时候用到了reduce方法，一不小心写出了一个bug，在此记录一下。

首先，reduce的用法如下：

对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。

语法：

array.reduce(callback[,initialValue]) //注意这时候只能是同步方法

function callbackfn(previousValue, currentValue, currentIndex, array1)

参数	含义
previousValue	通过上一次调用回调函数获得的值。如果向 reduce 方法提供initialValue，则在首次调用函数时，previousValue 为 initialValue。否者将是调用数组的第一项
currentValue	当前数组元素的值。
currentIndex	当前数组元素的数字索引。
array1	包含该元素的数组对象。

实现：

// 实现数组的每一项之和
var arr = [1,2,3,4]
arr.reduce((pre,cur) => {return pre + cur}) // return 10

实现数组的每一项转化为对象,例({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
昨天的代码，我是这么实现的：

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的值并不是我们预期的，循环中只有第一个值是对的，后面的值都不对，而且看起来是个Promise对象。这是为什么呢？
接下来看到上面的实现翻译成reduce的底层实现方式：

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执行异步方法，导致，传回的final只是个Promise方法对象
}

这样我们就清楚为什么上面会打印这么奇怪的结果了。下面我们只要做小小的修改，就可以得到正确的结果：

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里面执行异步方法~

GPU云服务器云服务器数组方法reduce reduce方法判断数组的方法定义数组的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91372.html

JS进阶篇--JS数组reduce()方法详解及高级技巧

摘要：基本概念方法接收一个函数作为累加器，数组中的每个值从左到右开始缩减，最终为一个值。例进阶应用使用方法可以完成多维度的数据叠加。在该函数内部，则执行多维的叠加工作。参考的内建函数数组方法的高级技巧基本概念 reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。 reduce 为数组中的每一个元素依次执行回调函数，不包括...

jerryloveemily 2019-08-21 12:00 评论0 收藏0
JS的内建函数reduce

摘要：函数，是规范中出现的数组方法。所有的一切通过一个函数来管理流程和传递初始参数。上面就是函数的实现，它需要对象作为参数，并返回一个类型的函数，作为的第一个参数。在该函数内部，则执行多维的叠加工作。 @(js) reduce函数，是ECMAScript5规范中出现的数组方法。在平时的工作中，相信大家使用的场景并不多，一般而言，可以通过reduce方法实现的逻辑都可以通过forEach方法来...

mrcode 2019-08-19 17:43 评论0 收藏0
Javascript 中的map/reduce

摘要：简单例子一个较为常用的场景就是累加或累乘输出数组元素的乘积输出数组元素的乘积简写形式输出数组元素的乘积形式，营造复杂的逼格用在数组降维扁平化处理的例子中注方法用于连接两个或多个数组。看到一个提问的回答巧妙地使用了map/reduce操作，很优雅，所以来学习和总结一下javascript自带的map/reduce的使用技巧，文章不会讲的很深，纯当科普一下知识点，如有解释的不正确的地方，...

zhou_you 2019-08-20 15:09 评论0 收藏0
面试题目别有洞天 -> 从es6优雅解法，到降级polyfill，再到redux reduce

摘要：每次被执行时，和被传入，这个根据进行累加或者是自身消减，英文原意，进而返回最新的。之前的一篇文章：从一道面试题，到我可能看了假源码讨论了bind方法的各种进阶Pollyfill，今天再分享一个有意思的题目。从解这道题目出发，我会谈到数组的Reduce方法，ES6特性和Redux数据流框架中Reducer的命名等等。一道典型的题目，却如唐代诗人章碣《对月》诗中所云：别有洞天三十六，水...

econi 2019-08-21 11:33 评论0 收藏0
Javascript中数组方法reduce的妙用之处

摘要：数组方法中，相比等常用的迭代方法，常常被我们所忽略，今天一起来探究一下在我们实战开发当中，能有哪些妙用之处，下面从语法开始介绍。按顺序运行异步函数我们可以做的另一件事是按顺序运行而不是并行。函数返回一个对象，可以使用方法添加回调函数。 showImg(https://segmentfault.com/img/remote/1460000019423051); Javascript数组方...

yiliang 2019-08-23 18:01 评论0 收藏0