JavaScript数组reduce常见实例方法

更新时间：2022年05月18日 14:56:22 作者：沉静地闪光

reduce方法在数组的每个元素上执行用户提供的回调函数,即"reducer",它传入对前一个元素进行计算的返回值,结果是单个值,它是在数组的所有元素上运行reducer的结果,下面这篇文章主要给大家介绍了关于JavaScript数组reduce常见实例方法的相关资料,需要的朋友可以参考下

前言

对比map、 forEach、 filter 等数组方法，reduce比它们更强。

一、 reduce定义和用法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法：

array.reduce(function(prev, cur, index, arr), init)

prev （上一次调用回调返回的值，或者是提供的初始值（initialValue））
cur （数组中当前被处理的元素）
index （当前元素在数组中的索引)
arr （调用的数组）
init （传递给函数的初始值）

二、reduce浏览器支持情况

三、reduce累加

带初始值

var arr = [1,2,3,4]
var sum = arr.reduce((pre, item) => {
    return pre + item
}, 10)
console.log(sum) // 20

不带初始值

var arr = [1,2,3,4]
var sum = arr.reduce((pre, item) => {
    return pre + item
},)
console.log(sum) // 10

四、reduce数组去重

var arr = [1,2,3,3,2,1,4]
arr.reduce((acc, cur) => {
  if (!(acc.includes(cur))) {
    acc.push(cur)
  }
  return acc
}, [])
// [1, 2, 3, 4]

五、reduce求数组项最大值

var arr = [1, 2, 3, 4];
arr.reduce((prev, cur) => {
    return Math.max(prev,cur);
});
//4

六、reduce将二维数组转为一维数组

var arr = [[1,2], [3,4], [5,6]]
arr.reduce((acc, cur) => {
  return acc.concat(cur)
}, [])
// [1,2,3,4,5,6]

七、reduce对象里的属性求和

var arr = [
    {subject: 'Math', score: 90},
    {subject: 'Chinese', score: 90},
    {subject: 'English', score: 100}
]
arr.reduce((pre, cur) => {
    return cur.score + pre
}, 0)
//280

八、reduce计算数组中每个元素出现的个数

var arr = [1, 2,3,3,2,1,2,1]
arr.reduce((acc, cur) => {
  if (!(cur in acc)) {
    acc[cur] = 1
  } else {
    acc[cur] += 1
  }
  return acc
}, {})
//{1: 3, 2: 3, 3: 2}

九、reduce按属性给数组分类

var arr = [
    {subject: 'Math', score: 90},
    {subject: 'Chinese', score: 90},
    {subject: 'English', score: 100},
    {subject: 'Math', score: 80},
    {subject: 'Chinese', score: 95}
];
arr.reduce((acc, cur) => {
  if (!acc[cur.type]) {
    acc[cur.type] = [];
  }
  acc[cur.type].push(cur)
  return acc
}, {})

十、reduce实现map

var arr = [1, 2, 3, 4]
Array.prototype.reduceMap = function(callback) {
  return this.reduce((acc, cur, index, array) => {
    const item = callback(cur, index, array)
    acc.push(item)
    return acc
  }, [])
}
arr.reduceMap((item, index) => {
  return item + index
})
// [1, 3, 5, 7]

十一、reduce实现forEach

var arr = [1, 2, 3, 4]
Array.prototype.reduceForEach = function(callback) {
  this.reduce((acc, cur, index, array) => {
    callback(cur, index, array)
  }, [])
}

arr.reduceForEach((item, index, array) => {
  console.log(item, index)
})
// 1234
// 0123

十二、reduce实现filter

var arr = [1, 2, 3, 4]
Array.prototype.reduceFilter = function (callback) {
   return this.reduce((acc, cur, index, array) => {
    if (callback(cur, index, array)) {
      acc.push(cur)
    }
    return acc
  }, [])
}
arr.reduceFilter(item => item % 2 == 0) // 过滤出偶数项。
// [2, 4]

十三、reduce实现find

var arr = [1, 2, 3, 4]
var obj = [{ a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }]
Array.prototype.reduceFind = function (callback) {
  return this.reduce((acc, cur, index, array) => {
    if (callback(cur, index, array)) {
      if (acc instanceof Array && acc.length == 0) {
        acc = cur
      }
    }    
    if ((index == array.length - 1) && acc instanceof Array && acc.length == 0) {
      acc = undefined
    }
    return acc
  }, [])
}
arr.reduceFind(item => item % 2 == 0) // 2
obj.reduceFind(item => item.a % 2 == 0) // {a: 2}
obj.reduceFind(item => item.a % 9 == 0) // undefined

碰到数组复杂操作的时候，就是reduce大显身手的时候。深入研究reduce的用法，对开发大有裨益。

总结

到此这篇关于JavaScript数组reduce常见实例的文章就介绍到这了,更多相关js数组reduce实例内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS中的forEach、$.each、map方法推荐
下面小编就为大家带来一篇JS中的forEach、$.each、map方法推荐。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-04-04
JavaScript实现简单的计算器功能
这篇文章主要为大家详细介绍了JavaScript实现简单的计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
JavaScript判断数组的方法总结与推荐
这篇文章主要给大家介绍了关于JavaScript判断数组方法的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-02-02
关于JavaScript中的this指向问题总结篇
在小编面试过程中经常会遇到javascript中this指向问题，可以说是前端面试必问，下面小编给大家总结了一下js中this的指向，感兴趣的朋友一起学习吧
2017-07-07
JS模拟并美化的表单控件完整实例
这篇文章主要介绍了JS模拟并美化的表单控件实现方法,涉及javascript结合css样式美化表单的功能,非常美观实用,需要的朋友可以参考下
2015-08-08
JS计算两个数组的交集、差集、并集、补集（多种实现方式）
本文通过多种实现方式给大家介绍了JS计算两个数组的交集、差集、并集、补集的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
Html和JS字符串中间加空格的简单实例
最近遇到了个需求,需要在字符串的中间加上一两个字符串,所以下面这篇文章主要给大家介绍了关于Html和JS字符串中间加空格的相关资料,文中介绍的挺详细,需要的朋友可以参考下
2023-02-02
TypeScript接口和类型的区别小结
在 TypeScript 中，有两种主要的定义自定义类型的方式，接口和类型，尽管它们在外观上可能相似，但它们之间有一些关键的区别，本文就详细的介绍一下，感兴趣的可以了解下
2023-05-05
JS Date时间格式化的方法
这篇文章主要介绍了JS Date时间格式化的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-01-01
关于Webpack dev server热加载失败的解决方法
下面小编就为大家分享一篇关于Webpack dev server热加载失败的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02