JavaScript数组reduce常见实例方法

2024-04-02 19:04:59 664人浏览安东尼

摘要

目录前言一、 reduce定义和用法语法：二、reduce浏览器支持情况三、reduce累加带初始值不带初始值四、reduce数组去重五、reduce求数组项最大值六、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实例内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript数组reduce常见实例方法

本文链接: https://www.lsjlt.com/news/149097.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

JavaScript数组reduce常见实例方法

目录前言一、 reduce定义和用法语法：二、reduce浏览器支持情况三、reduce累加带初始值不带初始值四、reduce数组去重五、reduce求数组项最大值六、reduce将...

99+

2022-11-13
JavaScript数组reduce()方法使用实例详解

目录前言1、累加和累积乘法2、获取一个数组的最大值和最小值3、计算数组中元素出现的频率4、多个数组的展平总结前言今天请让我详细介绍一下这个方法，希望对你有帮助。这是 reduce...

99+

2022-11-13
JavaScript数组reduce()方法

将某个值减去数组中的每个元素： var items = [5, 10, 15]; var reducer = function minus(minusSum, item) { ...

99+

2022-11-12
JavaScript数组reduce()方法的语法与实例解析

前言 reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。 reduce 为数组中的每一个元素依次执行回调函数...

99+

2022-11-12
JavaScript 数组方法filter与reduce

目录前言filterreduce数组求和筛选首字母是否是含有b字母结语前言在ES6新增的数组方法中，包含了多个遍历方法，其中包含了用于筛选的filter和reduce filter...

99+

2022-11-13
Javascript数组方法reduce怎么用

这篇文章主要为大家展示了“Javascript数组方法reduce怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Javascript数组方法reduce怎...

99+

2022-10-19
JavaScript数组reduce()方法怎么用

本篇内容主要讲解“JavaScript数组reduce()方法怎么用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript数组reduce()方法怎么用”吧!将某个值减去数组中的每个...

99+

2023-06-26
27个JavaScript数组常见方法汇总与实例说明

1. push() 概括：数组末位增加参数：需要增加的数据返回值：数组更新后的长度 let arr = [1,2,3] arr.push(1) // 返回新增后的数组长度 4 ...

99+

2022-12-10

JavaScript数组常见方法与实例说明 JavaScript数组增加 JavaScript数组删除 JavaScript遍历 JavaScript数组反转 JavaScript数组排序 JavaS
javascript数组中的reduce方法和pop方法

目录一、reduce方法1直接vs打开2代码部分3运行结果二、pop方1直接vs打开2代码部分3运行结果前言：在我们的日常开发中不免会有很多需要处理数据的方法本节主要说一说fo...

99+

2022-11-13
JavaScript数组reduce方法如何使用

今天小编给大家分享一下JavaScript数组reduce方法如何使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。redu...

99+

2023-07-05
JavaScript数组reduce()方法怎么使用

这篇文章主要介绍了JavaScript数组reduce()方法怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript数组reduce()方法怎么使用文章都会...

99+

2022-10-19
JavaScript如何使用reduce实现数组filter方法

这篇文章主要为大家展示了“JavaScript如何使用reduce实现数组filter方法”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript如何...

99+

2022-10-19
JavaScript数组reduce()方法的语法和应用

本篇内容主要讲解“JavaScript数组reduce()方法的语法和应用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript数组reduce()方法的语法和应用”吧!前言redu...

99+

2023-06-20
JavaScript中数组reduce()方法使用详情

语法： reduce()对数组中的每个元素进行累加，返回一个新的值，可以传入初始值简单的讲就是返回数组中所有元素的和数不会改变原始组的值不会对空数组执行回...

99+

2022-11-13
javascript数组中reduce方法和pop方法怎么用

这篇文章给大家分享的是有关javascript数组中reduce方法和pop方法怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。一、reduce方法1直接vs打开2代码部分var geyao=[1,...

99+

2023-06-29
JavaScript中如何使用reduce实现数组map方法

这篇文章主要介绍了JavaScript中如何使用reduce实现数组map方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家...

99+

2022-10-19
JavaScript如何使用reduce实现数组的flat方法

这篇文章主要介绍了JavaScript如何使用reduce实现数组的flat方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大...

99+

2022-10-19
javascript数组includes、reduce的基本使用方法

这篇文章主要讲解了“javascript数组includes、reduce的基本使用方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“javascript数组includes、reduce的...

99+

2023-06-20
javascript中常见的数组方法有哪些

小编给大家分享一下javascript中常见的数组方法有哪些，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！javascript数组方法有：concat()、join()、pop()、push()、revers&#...

99+

2023-06-14
JavaScript数组常见使用方法有哪些

今天小编给大家分享一下JavaScript数组常见使用方法有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。1. push...

99+

2023-07-04