js利用reduce方法让你的代码更加优雅

一直以来都在函数式编程的大门之外徘徊,要入门的话首先得熟悉各种高阶函数,数组的reduce方法就是其中之一,这篇文章主要给大家介绍了关于js利用reduce方法让你的代码更加优雅的相关资料,需要的朋友可以参考下

js利用reduce方法让你的代码更加优雅,久久派带你了解更多相关信息。

前言

在实际项目中,最常见可能是在计算、循环逻辑方面的处理,可以使用数组中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\', \'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.concat(cur)  }, [])}​console.log(flatten(arr)); // [\"a\", \"b\", \"b\", \"c\", \"d\", \"e\"]

数组去重

const arr = [22,341,124,54,4,21,4,4,1,4,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, 124, 21, 22, 341, 4, 54]

求数组中最大值

const arr = [1, 2, 3, 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.then(res => {  console.log(res);})

最后

本文分享了一些在日常开发中比较常用的一些reduce处理方法,你可以直接拿到你的项目中使用,也可以进行二次封装。

到此这篇关于js利用reduce方法让你的代码更加优雅的文章就介绍到这了,更多相关js reduce方法让代码优雅内容请搜索趣讯吧以前的文章或继续浏览下面的相关文章希望大家以后多多支持趣讯吧!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 203304862@qq.com 举报,一经查实,本站将立刻删除。转转请注明出处:https://www.szhjjp.com/n/18618.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注