微信号:JavaScriptcn

介绍:面向JavaScript爱好人员提供:前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js等一系列教程和经验分享.

数组的遍历你都会用了,那Promise版本的呢

2018-04-27 21:31 贾顺名

原文:https://segmentfault.com/a/1190000014598785


这里指的遍历方法包括: map、 reduce、 reduceRight、 forEach、 filter、 some、 every 因为最近要进行了一些数据汇总, node版本已经是8.11.1了,所以直接写了个 async/await的脚本。 但是在对数组进行一些遍历操作时,发现有些遍历方法对 Promise的反馈并不是我们想要的结果。

当然,有些严格来讲并不能算是遍历,比如说 some, every这些的。 但确实,这些都会根据我们数组的元素来进行多次的调用传入的回调。

这些方法都是比较常见的,但是当你的回调函数是一个 Promise时,一切都变了。

前言

async/await为 Promise的语法糖 文中会直接使用 async/await替换 Promise

 
           
  1. let result = await func()

  2. // => 等价于

  3. func().then(result => {

  4.  // code here

  5. })

  6. // ======

  7. async function func () {

  8.  return 1  

  9. }

  10. // => 等价与

  11. function func () {

  12.  return new Promise(resolve => resolve(1))

  13. }

map

map可以说是对 Promise最友好的一个函数了。 我们都知道, map接收两个参数:

  1. 对每项元素执行的回调,回调结果的返回值将作为该数组中相应下标的元素

  2. 一个可选的回调函数 this指向的参数

 
           
  1. [1, 2, 3].map(item => item ** 2) // 对数组元素进行求平方

  2. // > [1, 4, 9]

上边是一个普通的 map执行,但是当我们的一些计算操作变为异步的:

 
           
  1. [1, 2, 3].map(async item => item ** 2) // 对数组元素进行求平方

  2. // > [Promise, Promise, Promise]

这时候,我们获取到的返回值其实就是一个由 Promise函数组成的数组了。

所以为什么上边说 map函数为最友好的,因为我们知道, Promise有一个函数为 Promise.all 会将一个由 Promise组成的数组依次执行,并返回一个 Promise对象,该对象的结果为数组产生的结果集。

 
           
  1. await Promise.all([1, 2, 3].map(async item => item ** 2))

  2. // > [1, 4, 9]

首先使用 Promise.all对数组进行包装,然后用 await获取结果。

reduce/reduceRight

reduce的函数签名想必大家也很熟悉了,接收两个参数:

  1. 对每一项元素执行的回调函数,返回值将被累加到下次函数调用中,回调函数的签名:


    1. accumulator累加的值

    2. currentValue当前正在处理的元素

    3. currentIndex当前正在处理的元素下标

    4. array调用 reduce的数组

  2. 可选的初始化的值,将作为 accumulator的初始值


 
           
  1. [1, 2, 3].reduce((accumulator, item) => accumulator + item, 0) // 进行加和

  2. // > 6

这个代码也是没毛病的,同样如果我们加和的操作也是个异步的:

 
           
  1. [1, 2, 3].reduce(async (accumulator, item) => accumulator + item, 0) // 进行加和

  2. // > Promise {<resolved>: "[object Promise]3"}

这个结果返回的就会很诡异了,我们在回看上边的 reduce的函数签名

对每一项元素执行的回调函数,返回值将被累加到下次函数调用中

然后我们再来看代码, async (accumulator, item) => accumulator +=item 这个在最开始也提到了,是 Pormise的语法糖,为了看得更清晰,我们可以这样写:

 
           
  1. (accumulator, item) => new Promise(resolve =>

  2.  resolve(accumulator += item)

  3. )

也就是说,我们 reduce的回调函数返回值其实就是一个 Promise对象 然后我们对 Promise对象进行 +=操作,得到那样怪异的返回值也就很合情合理了。

当然, reduce的调整也是很轻松的:

 
           
  1. await [1, 2, 3].reduce(async (accumulator, item) => await accumulator + item, 0)

  2. // > 6

我们对 accumulator调用 await,然后再与当前 item进行加和,在最后我们的 reduce返回值也一定是一个 Promise,所以我们在最外边也添加 await的字样 也就是说我们每次 reduce都会返回一个新的 Promise对象,在对象内部都会获取上次 Promise的结果。 我们调用 reduce实际上得到的是类似这样的一个 Promise对象:

 
           
  1. new Promise(resolve => {

  2.  let item = 3

  3.  new Promise(resolve => {

  4.      let item = 2

  5.      new Promise(resolve => {

  6.        let item = 1

  7.        Promise.resolve(0).then(result => resolve(item + result))

  8.      }).then(result => resolve(item + result))

  9.  }).then(result => resolve(item + result))

  10. })

reduceRight

这个就没什么好说的了。。跟 reduce只是执行顺序相反而已

forEach

forEach,这个应该是用得最多的遍历方法了,对应的函数签名:

  1. callback,对每一个元素进行调用的函数


    1. currentValue,当前元素

    2. index,当前元素下标

    3. array,调用 forEach的数组引用

  2. thisArg,一个可选的回调函数 this指向


我们有如下的操作:

 
           
  1. // 获取数组元素求平方后的值

  2. [1, 2, 3].forEach(item => {

  3.  console.log(item ** 2)

  4. })

  5. // > 1

  6. // > 4

  7. // > 9

普通版本我们是可以直接这么输出的,但是如果遇到了 Promise

 
           
  1. // 获取数组元素求平方后的值

  2. [1, 2, 3].forEach(async item => {

  3.  console.log(item ** 2)

  4. })

  5. // > nothing

forEach并不关心回调函数的返回值,所以 forEach只是执行了三个会返回 Promise的函数 所以如果我们想要得到想要的效果,只能够自己进行增强对象属性了:

 
           
  1. Array.prototype.forEachSync = async function (callback, thisArg) {

  2.  for (let [index, item] of Object.entries(this)) {

  3.    await callback(item, index, this)

  4.  }

  5. }

  6. await [1, 2, 3].forEachSync(async item => {

  7.  console.log(item ** 2)

  8. })

  9. // > 1

  10. // > 4

  11. // > 9

await会忽略非 Promise值, await 0、 await undefined与普通代码无异

filter

filter作为一个筛选数组用的函数,同样具有遍历的功能: 函数签名同 forEach,但是 callback返回值为 true的元素将被放到 filter函数返回值中去。

我们要进行一个奇数的筛选,所以我们这么写:

 
           
  1. [1, 2, 3].filter(item => item % 2 !== 0)

  2. // > [1, 3]

然后我们改为 Promise版本:

 
           
  1. [1, 2, 3].filter(async item => item % 2 !== 0)

  2. // > [1, 2, 3]

这会导致我们的筛选功能失效,因为 filter的返回值匹配不是完全相等的匹配,只要是返回值能转换为 true,就会被认定为通过筛选。 Promise对象必然是 true的,所以筛选失效。 所以我们的处理方式与上边的 forEach类似,同样需要自己进行对象增强 但我们这里直接选择一个取巧的方式:

 
           
  1. Array.prototype.filterSync = async function (callback, thisArg) {

  2.  let filterResult = await Promise.all(this.map(callback))

  3.  // > [true, false, true]

  4.  return this.filter((_, index) => filterResult[index])

  5. }

  6. await [1, 2, 3].filterSync(item => item % 2 !== 0)

我们可以直接在内部调用 map方法,因为我们知道 map会将所有的返回值返回为一个新的数组。 这也就意味着,我们 map可以拿到我们对所有 item进行筛选的结果, true或者 false。 接下来对原数组每一项进行返回对应下标的结果即可。

some

some作为一个用来检测数组是否满足一些条件的函数存在,同样是可以用作遍历的 函数签名同 forEach,有区别的是当任一 callback返回值匹配为 true则会直接返回 true,如果所有的 callback匹配均为 false,则返回 false

我们要判断数组中是否有元素等于 2

 
           
  1. [1, 2, 3].some(item => item === 2)

  2. // > true

然后我们将它改为 Promise

 
           
  1. [1, 2, 3].some(async item => item === 2)

  2. // > true

这个函数依然会返回 true,但是却不是我们想要的,因为这个是 async返回的 Promise对象被认定为 true

所以,我们要进行如下处理:

 
           
  1. Array.prototype.someSync = async function (callback, thisArg) {

  2.  for (let [index, item] of Object.entries(this)) {

  3.    if (await callback(item, index, this)) return true

  4.  }

  5.  return false

  6. }

  7. await [1, 2, 3].someSync(async item => item === 2)

  8. // > true

因为 some在匹配到第一个 true之后就会终止遍历,所以我们在这里边使用 forEach的话是在性能上的一种浪费。 同样是利用了 await会忽略普通表达式的优势,在内部使用 for-of来实现我们的需求

every

以及我们最后的一个 every 函数签名同样与 forEach一样, 但是 callback的处理还是有一些区别的: 其实换一种角度考虑, every就是一个反向的 somesome会在获取到第一个 true时终止 而 every会在获取到第一个 false时终止,如果所有元素均为 true,则返回 true

我们要判定数组中元素是否全部大于3

 
           
  1. [1, 2, 3].every(item => item > 3)

  2. // > false

很显然,一个都没有匹配到的,而且回调函数在执行到第一次时就已经终止了,不会继续执行下去。 我们改为 Promise版本:

 
           
  1. [1, 2, 3].every(async => item > 3)

  2. // > true

这个必然是 true,因为我们判断的是 Promise对象 所以我们拿上边的 someSync实现稍微修改一下:

 
           
  1. Array.prototype.everySync = async function (callback, thisArg) {

  2.  for (let [index, item] of Object.entries(this)) {

  3.    if (!await callback(item, index, this)) return false

  4.  }

  5.  return true

  6. }

  7. await [1, 2, 3].everySync(async item => item === 2)

  8. // > false

当匹配到任意一个 false时,直接返回 false,终止遍历。

后记

关于数组的这几个遍历方法。 因为 map和 reduce的特性,所以是在使用 async时改动最小的函数。 reduce的结果很像一个洋葱模型 但对于其他的遍历函数来说,目前来看就需要自己来实现了。

四个 *Sync函数的实现:https://github.com/Jiasm/notebook/tree/master/array-sync

参考资料

Array - JavaScript | MDN


END

 
JavaScript 更多文章 阿里前端笔试总结 webpack 开发者:我当初为什么写webpack 从 0 开始了解 Docker 茴字的四种写法——浅谈移动前端适配 Node.js 10.0.0 正式发布,带来大量改进和修复
猜您喜欢 【Telegraph】全球未来15年八大预测 Java字符串之性能优化 一块听听,程序员生财之道、如何内容创业、创造可持续收入 十年 EMC XtremIO全闪存阵列——架构解析