龙都娱乐»JavaScript»数组的遍历你都会用了,那Promise版本的呢

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

来源:贾顺名 发布时间:2018-04-28 阅读次数:
这里指的遍历方法包括:map、reduce、reduceRight、forEach、filter、some、every。因为最近要进行了一些数据汇总,node版本已经是8.11.1了,所以直接写了个async/await的脚本。但是在对数组进行一些遍历操作时,发现有些遍历方法对Promise的反馈并不是我们想要的结果。
  当然,有些严格来讲并不能算是遍历,比如说some,every这些的。   但确实,这些都会根据我们数组的元素来进行多次的调用传入的回调。   这些方法都是比较常见的,但是当你的回调函数是一个Promise时,一切都变了。

 前言

  async/await为Promise的语法糖   文中会直接使用async/await替换Promise let result = await func() // => 等价于 func().then(result => { // code here }) // ====== async function func () { return 1 } // => 等价与 function func () { return new Promise(resolve => resolve(1)) }

 map

  map可以说是对Promise最友好的一个函数了。   我们都知道,map接收两个参数:
  • 对每项元素执行的回调,回调结果的返回值将作为该数组中相应下标的元素
  • 一个可选的回调函数this指向的参数
  • [1, 2, 3].map(item => item ** 2) // 对数组元素进行求平方 // > [1, 4, 9]   上边是一个普通的map执行,但是当我们的一些计算操作变为异步的: [1, 2, 3].map(async item => item ** 2) // 对数组元素进行求平方 // > [Promise, Promise, Promise]   这时候,我们获取到的返回值其实就是一个由Promise函数组成的数组了。   所以为什么上边说map函数为最友好的,因为我们知道,Promise有一个函数为Promise.all   会将一个由Promise组成的数组依次执行,并返回一个Promise对象,该对象的结果为数组产生的结果集。 await Promise.all([1, 2, 3].map(async item => item ** 2)) // > [1, 4, 9]   首先使用Promise.all对数组进行包装,然后用await获取结果。

     reduce/reduceRight

      reduce的函数签名想必大家也很熟悉了,接收两个参数:
  • 对每一项元素执行的回调函数,返回值将被累加到下次函数调用中,回调函数的签名:
  • accumulator累加的值
  • currentValue当前正在处理的元素
  • currentIndex当前正在处理的元素下标
  • array调用reduce的数组
  • 可选的初始化的值,将作为accumulator的初始值
  • [1, 2, 3].reduce((accumulator, item) => accumulator + item, 0) // 进行加和 // > 6   这个代码也是没毛病的,同样如果我们加和的操作也是个异步的: [1, 2, 3].reduce(async (accumulator, item) => accumulator + item, 0) // 进行加和 // > Promise {<resolved>: "[object Promise]3"}   这个结果返回的就会很诡异了,我们在回看上边的reduce的函数签名
    对每一项元素执行的回调函数,返回值将被累加到下次函数调用中
      然后我们再来看代码,async (accumulator, item) => accumulator += item   这个在最开始也提到了,是Pormise的语法糖,为了看得更清晰,我们可以这样写: (accumulator, item) => new Promise(resolve => resolve(accumulator += item) )   也就是说,我们reduce的回调函数返回值其实就是一个Promise对象   然后我们对Promise对象进行+=操作,得到那样怪异的返回值也就很合情合理了。   当然,reduce的调整也是很轻松的: await [1, 2, 3].reduce(async (accumulator, item) => await accumulator + item, 0) // > 6   我们对accumulator调用await,然后再与当前item进行加和,在最后我们的reduce返回值也一定是一个Promise,所以我们在最外边也添加await的字样   也就是说我们每次reduce都会返回一个新的Promise对象,在对象内部都会获取上次Promise的结果。   我们调用reduce实际上得到的是类似这样的一个Promise对象: new Promise(resolve => { let item = 3 new Promise(resolve => { let item = 2 new Promise(resolve => { let item = 1 Promise.resolve(0).then(result => resolve(item + result)) }).then(result => resolve(item + result)) }).then(result => resolve(item + result)) })

      reduceRight

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

     forEach

      forEach,这个应该是用得最多的遍历方法了,对应的函数签名:
  • callback,对每一个元素进行调用的函数
  • currentValue,当前元素
  • index,当前元素下标
  • array,调用forEach的数组引用
  • thisArg,一个可选的回调函数this指向
  •   我们有如下的操作: // 获取数组元素求平方后的值 [1, 2, 3].forEach(item => { console.log(item ** 2) }) // > 1 // > 4 // > 9   普通版本我们是可以直接这么输出的,但是如果遇到了Promise // 获取数组元素求平方后的值 [1, 2, 3].forEach(async item => { console.log(item ** 2) }) // > nothing   forEach并不关心回调函数的返回值,所以forEach只是执行了三个会返回Promise的函数   所以如果我们想要得到想要的效果,只能够自己进行增强对象属性了: Array.prototype.forEachSync = async function (callback, thisArg) { for (let [index, item] of Object.entries(this)) { await callback(item, index, this) } } await [1, 2, 3].forEachSync(async item => { console.log(item ** 2) }) // > 1 // > 4 // > 9   await会忽略非Promise值,await 0、await undefined与普通代码无异

     filter

      filter作为一个筛选数组用的函数,同样具有遍历的功能:   函数签名同forEach,但是callback返回值为true的元素将被放到filter函数返回值中去。   我们要进行一个奇数的筛选,所以我们这么写: [1, 2, 3].filter(item => item % 2 !== 0) // > [1, 3]   然后我们改为Promise版本: [1, 2, 3].filter(async item => item % 2 !== 0) // > [1, 2, 3]   这会导致我们的筛选功能失效,因为filter的返回值匹配不是完全相等的匹配,只要是返回值能转换为true,就会被认定为通过筛选。   Promise对象必然是true的,所以筛选失效。   所以我们的处理方式与上边的forEach类似,同样需要自己进行对象增强   但我们这里直接选择一个取巧的方式: Array.prototype.filterSync = async function (callback, thisArg) { let filterResult = await Promise.all(this.map(callback)) // > [true, false, true] return this.filter((_, index) => filterResult[index]) } 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, 2, 3].some(item => item === 2) // > true   然后我们将它改为Promise [1, 2, 3].some(async item => item === 2) // > true   这个函数依然会返回true,但是却不是我们想要的,因为这个是async返回的Promise对象被认定为true。   所以,我们要进行如下处理: Array.prototype.someSync = async function (callback, thisArg) { for (let [index, item] of Object.entries(this)) { if (await callback(item, index, this)) return true } return false } await [1, 2, 3].someSync(async item => item === 2) // > true   因为some在匹配到第一个true之后就会终止遍历,所以我们在这里边使用forEach的话是在性能上的一种浪费。   同样是利用了await会忽略普通表达式的优势,在内部使用for-of来实现我们的需求

     every

      以及我们最后的一个every   函数签名同样与forEach一样,   但是callback的处理还是有一些区别的:   其实换一种角度考虑,every就是一个反向的some   some会在获取到第一个true时终止   而every会在获取到第一个false时终止,如果所有元素均为true,则返回true   我们要判定数组中元素是否全部大于3 [1, 2, 3].every(item => item > 3) // > false   很显然,一个都没有匹配到的,而且回调函数在执行到第一次时就已经终止了,不会继续执行下去。   我们改为Promise版本: [1, 2, 3].every(async => item > 3) // > true   这个必然是true,因为我们判断的是Promise对象   所以我们拿上边的someSync实现稍微修改一下: Array.prototype.everySync = async function (callback, thisArg) { for (let [index, item] of Object.entries(this)) { if (!await callback(item, index, this)) return false } return true } await [1, 2, 3].everySync(async item => item === 2) // > false   当匹配到任意一个false时,直接返回false,终止遍历。

     后记

      关于数组的这几个遍历方法。   因为map和reduce的特性,所以是在使用async时改动最小的函数。   reduce的结果很像一个洋葱模型   但对于其他的遍历函数来说,目前来看就需要自己来实现了。   四个*Sync函数的实现:https://github.com/Jiasm/notebook/tree/master/array-sync

     参考资料

      Array - JavaScript | MDN
    QQ群:WEB龙都娱乐官方群(515171538),验证消息:10000
    微信群:加小编微信 849023636 邀请您加入,验证消息:10000
    提示:更多精彩内容关注微信公众号:全栈龙都娱乐中心(fsder-com)
    网友评论(共0条评论) 正在载入评论......
    理智评论文明上网,拒绝恶意谩骂 发表评论 / 共0条评论
    登录会员中心
    龙都娱乐