JavaScript中数组reduce()方法使用详情

语法：

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

arr.reduce(function(tmp, value, [index]) {
    // dosomething...
},  [startValue]) // 提供初始值通常更安全
  • tmp：上一次的累加值，初始值为外部传进去的初始值 startValue，若没传默认是数组第一个值
  • value：数组元素；若累加值tmp为数组第一个值，则value为从数组第二个值开始
  • index：数组索引（可选）
  • startValue：外部传入的初始值（可选）

用法：

1、简单用法：求和、乘积、平均值

let arr = [1, 2, 3, 4]
let sum = arr.reduce((x,y) => x + y) // 求和
let mul = arr.reduce((x,y) => x * y) // 求乘积
let average = arr.reduce((x, y) => (x + y) / arr.length) // 求平均值

2、升级用法：使用reduce代替map和filter的组合

筛选出数组中年龄>18岁的，并添加属性，用map和filter的组合需要遍历数组2次

const list = [
    { name:'张三', age:20 },
    { name:'李四', age:15 },
    { name:'王五', age:35}
]
const newList = list.filter(item => item.age > 18).map(item => {
    return Object.assign({}, item, {
        is: '成年'
    })
})

同样操作使用reduce只用遍历数组一次

const newList = list.reduce((tmp, item) => {
    return item.age > 18 ? tmp.concat(Object.assign({}, item, { is: '成年' })) : tmp
}, [])
console.log(newList)

返回结果：

 3、高级用法：对象数组去重

let person = [
  {id: 0, name: "小明"},
  {id: 1, name: "小张"},
  {id: 2, name: "小李"},
  {id: 3, name: "小孙"},
  {id: 1, name: "小周"},
  {id: 2, name: "小陈"},
]

let obj = {}
person = person.reduce((prev,item)=>{
  if(obj[item.id] === undefined) {
    prev.push(item)
    obj[item.id] = 1
  }
  return prev
}, [])
console.log(person)

返回结果：

4、高级用法：按属性分组对象

const result = [
  {subject: '物理', marks: 41},
  {subject: '化学', marks: 59},
  {subject: '高等数学', marks: 36},
  {subject: '应用数学', marks: 90},
  {subject: '英语', marks: 64},
]
let initialValue = {
  pass: [],
  fail: []
}
const groupedResult = result.reduce((accumulator, current) => {
  (current.marks >= 50) ? accumulator.pass.push(current) : accumulator.fail.push(current)
  return accumulator
}, initialValue)
console.log(groupedResult)

返回结果：

到此这篇关于JavaScript中数组reduce()方法使用详情的文章就介绍到这了,更多相关JS reduce内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript中Reduce10个常用场景技巧

    目录 累加/累积 求最大/最小值 格式化搜索参数 反序列化搜索参数 拉平嵌套数组 实现 flat 数组去重 数组计数 获取对象多个属性 反转字符串 不知道大家平常用 Reduce 多不多,反正本瓜用的不多.但实际上,Reduce 能做的,比我们能想到的要多得多,本篇带来 10 个Reduce 常用场景和技巧,一定有你不知道~ 冲ヾ(◍°∇°◍)ﾉﾞ 累加/累积 累加我们可能是最熟悉 Reduce 的一种用法,除此之外,还可以用做累积. // adder const sum = (...nums)

  • JavaScript数组reduce()方法使用实例详解

    JavaScript数组reduce()方法使用实例详解

    目录 前言 1.累加和累积乘法 2.获取一个数组的最大值和最小值 3.计算数组中元素出现的频率 4.多个数组的展平 总结 前言 今天请让我详细介绍一下这个方法,希望对你有帮助. 这是 reduce 的基本用法: var arr = [1, 2, 3]; function reducer(parmar1, parmar2){ } arr.reduce(reducer) reduce是数组原型对象上的一个方法,可以帮助我们操作数组.它将另一个函数作为其参数,可以称为reducer. reducer

  • JavaScript 数组方法filter与reduce

    目录 前言 filter reduce 数组求和 筛选首字母是否是含有b字母 结语 前言 在ES6新增的数组方法中,包含了多个遍历方法,其中包含了用于筛选的filter和reduce filter 主要用于筛选数组的filter方法,在使用中,不会改变原数组,同时会将符合筛选条件的元素,放入新的数组进行返回. /*** * @item 数组元素 * @index 遍历数组下标 * @thisArr 当前数组 */ let arr1 = [1, 2, 3, 4, 5]; let newArr1 =

  • JavaScript reduce的基本用法详解

    JavaScript reduce的基本用法详解

    目录 reduce的基本定义 基本用法 计算数组里面所有值的和! 累加对象数组里的值! 将二维数组转换为一维数组! 计算数组中每个元素出现的次数 用Reduce按属性对object分类 使用扩展运算符和initialValue绑定包含在对象数组中的数组! 数组去重 数组去重2 总结 reduce的基本定义 个人理解: 根据数组reduce的定义来说: 1.从数组第一个元素开始遍历,逐渐遍历到最后一项 2.reduce 接受两个参数,一个回调函数,一个初始值,如果不给Reduce初始值他会默认从第

  • JavaScript中reduce()的用法实例

    前言 过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce() 的用法. 一.语法 arr.reduce(function(prev,cur,index,arr){ ... }, init); 其中, arr 表示原数组: prev 表示上一次调用回调时的返回值,或者初始值 init; cur 表示当前正在处理的数组元素: index 表示当前正在处

  • JavaScript数组reduce常见实例方法

    JavaScript数组reduce常见实例方法

    目录 前言 一. reduce定义和用法 语法: 二.reduce浏览器支持情况 三.reduce累加 带初始值 不带初始值 四.reduce数组去重 五.reduce求数组项最大值 六.reduce将二维数组转为一维数组 七.reduce对象里的属性求和 八.reduce计算数组中每个元素出现的个数 九.reduce按属性给数组分类 十.reduce实现map 十一.reduce实现forEach 十二.reduce实现filter 十三.reduce实现find 总结 前言 对比map. f

  • JavaScript reduce方法使用方法介绍

    目录 1. reduce方法的使用 2. reduce数组的使用场景 2.1 扁平化数组 2.2 数组去重 2.3 计算数组最大/最小值 2.4 数组求和 2.5 计算数组中元素的出现次数 3. 操作对象 4. 使用reduce代替.filter().map() 5. 按顺序执行promise 6. 使用compose函数组合实现管道 1. reduce方法的使用 Array.prototype.reduce(callBack(previousValue, currentValue, curre

  • JavaScript中array.reduce()数组方法的四种使用实例

    JavaScript中array.reduce()数组方法的四种使用实例

    目录 1.累加和累积乘法 2.获取一个数组的最大值和最小值 3.计算数组中元素出现的频率 4.多个数组的展平 总结 Array.prototype.reduce() 是数组中最强大的方法之一,也是 JavaScript 函数式编程中一个吸引人的特性.但不幸的是,我发现很多朋友不习惯使用它 今天请让我详细介绍一下这个方法,希望对你有帮助. 这是 reduce 的基本用法: var arr = [1, 2, 3]; function reducer(parmar1, parmar2){ } arr.

  • JavaScript中数组reduce()方法使用详情

    JavaScript中数组reduce()方法使用详情

    语法: reduce()对数组中的每个元素进行累加,返回一个新的值,可以传入初始值简单的讲就是返回数组中所有元素的和数  不会改变原始组的值  不会对空数组执行回调函数 arr.reduce(function(tmp, value, [index]) { // dosomething... }, [startValue]) // 提供初始值通常更安全 tmp:上一次的累加值,初始值为外部传进去的初始值 startValue,若没传默认是数组第一个值 value:数组元素:若累加值tmp为数组第一

  • JavaScript中数组sort()方法的基本使用与踩坑记录

    前言 在日常的代码开发中,关于数组排序的操作可不少,JavaScript 中可以调用 sort 方法对数组进行快速排序. 今天,就数组的 sort 方法来学习一下,避免日后踩坑的悲惨遭遇. 概念 sort 方法用于对数组的元素进行排序. 语法 arr.sort([compareFunction]) 参数解析 compareFunction (可选) 用来指定按某种顺序进行排列的函数.该函数有两个参数: firstEl    第一个比较的元素 secondEl    第二个比较的元素 该函数如果省

  • JavaScript中数组Array方法详解

    ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方法将数组中所有元素都转化为字符串并连接在一起,返回最后生成的字符串.可以指定一个可选的符号或字符串在生成的字符串中来分隔数组的各个元素.如果不指定分隔符,默认使用逗号.注意:此方法不会改变原始数组 var arr = ['a', 'b', 'c']; console.log(arr.join());

  • JavaScript中数组的22种方法必学(推荐)

    前面的话 数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详细介绍 对象继承方法 数组是一种特殊的对象,继承了对象Object的toString().toLocaleString()和valueOf()方法 [toString()] toString()方法返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串 [注意]该方法的返回值与不使用任何参数

  • JavaScript数组reduce()方法的语法与实例解析

    前言 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. Javascript数组方法中,相比map.filter.forEach等常用的迭代方法,reduce常常被我们所忽略,今天一起来探究一下reduce在我们实战开发当中,能有哪

  • JavaScript数组reduce()方法 

    将某个值减去数组中的每个元素: var items = [5, 10, 15]; var reducer = function minus(minusSum, item) {     return minusSum - item; } var total = items.reduce(reducer, 61); console.log(total); // 31 上例中初始值为number类型,所以返回的结果也是number类型的,如果我们想返回object类型的值,也可以传入object类型的

  • JavaScript中数组去重常用的五种方法详解

    目录 1.对象属性(indexof) 2.new Set(数组) 3.new Map() 4.filter() + indexof 5.reduce() + includes 补充 原数组 const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; 1.对象属性(indexof) 利用对象属性key排除重复项 遍历数组,每次判断新数组中是否存在该属性,不存在就存储在新数组中 并把数组元素作为key,最后返

  • JavaScript中数组去除重复的三种方法

    废话不多说了,具体方法如下所示: 方法一:返回新数组每个位子类型没变 function outRepeat(a){ var hash=[],arr=[]; for (var i = 0; i < a.length; i++) { hash[a[i]]!=null; if(!hash[a[i]]){ arr.push(a[i]); hash[a[i]]=true; } } console.log(arr); } outRepeat([2,4,4,5,"a","a"

  • 总结Javascript中数组各种去重的方法

    前言 在做javascript开发的时候,经常会遇到数组元素重复的问题,而javascript Array又没有直接提供方法解决此问题,还需要自己去实现.这篇文章总结了Javascript中数组各种去重的方法,下面来一起看看. 方法一 利用对象属性不重复的特性 Array.prototype.distinct = function (){ var arr = this, i, obj = {}, result = [], len = arr.length; for(i = 0; i< arr.l

随机推荐