iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中reduce()详解及使用方法
  • 172
分享到

JavaScript中reduce()详解及使用方法

js中reduce详解js中reduce的用法js reduce 2023-05-18 05:05:14 172人浏览 薄情痞子
摘要

目录reduce():总结:reduce 应用场景:1.数组里所有值的和2.累加数组中对象的值3.将二维数组转为一维数组4.计算数组中每个元素出现的次数5.按属性对object分类6

reduce():

reduce()方法为归并类方法,最常用的场景就是,计算数组中的每一项的总和。

reduce() 方法会遍历数组的每一项,他接收两个参数:

第一个参数:每次遍历都会调用的函数,而这个函数有接收四个参数,分别是:前一个值、当前项、项目索引和数组对象,而这个函数的返回值,回传给下一次遍历时,执行的这个方法的第一个参数。

第二个参数:归并基础的初始值

我们看一下例子: reduce()怎么用?

 let arr = [1,2,3,4,5]
 arr.reduce((prev,cur)=>{
      return prev+cur
 })

上面的这段代码,是用来计算数组总和的,reduce()方法中,只传了第一个参数,也就是只传了一个函数,但第二个参数、初始值没有传,当第二个值没有传的时候,第一次循环,prev的值,默认为数组的第一项,而cur的值为数组的第二项,也就是第一次循环,会return 1+2,这个时候,第一次循环返回的结果回传给下一次循环中方法的第一个参数,也就是说、第二次循环方法中prev的值,是第一次循环方法返回的结果

let arr = [1,2,3,4,5]
arr.reduce((prev,cur)=>{
    return prev+cur
},10)

我们传入一下第二个参数,第一个循环,prev的值为reduce的第二个参数,也就是"归并基础的初始值",而cur的值为数组的第一项,第一项循环会返回10+1

总结:

1.当reduce()方法的第二个值为空时,第一次循环方法中的第一个参数(prev)为数组的第一项值,第二个参数(cur)为数组的第二项值,反之,第一次循环方法中的第一个参数(prev)为reduce的第二个参数值,第二个参数(cur)为数值的第一项值。

2.reduce()方法的第一个参数,就是每次遍历都会执行的匿名函数,当前函数的返回值就会传给下一次执行函数的第一个值。也就是prev

reduce 应用场景:

1.数组里所有值的和

      var arr = [0,1,2,3];
 
      var value = arr.reduce((pre, cur) => {
        return pre + cur;
      }, 0);
      
      console.log(value);// 输出:6

2.累加数组中对象的值

      var arr = [{ x: 1 }, { x: 2 }, { x: 3 }];
 
      var value = arr.reduce((pre, cur) => {
        return pre + cur.x;
      }, 0);
      
      console.log(value);// 输出:6

3.将二维数组转为一维数组

      var arr = [
        [0, 1],
        [2, 3],
        [4, 5],
      ];
 
      var value = arr.reduce((pre, cur) => {
        return pre.concat(cur);
      }, []);
 
      console.log(value); // 输出:[0, 1, 2, 3, 4, 5]

4.计算数组中每个元素出现的次数

      var arr = ["a", "b", "a", "c", "c", "c"];
 
      var value = arr.reduce((pre, cur) => {
        if (cur in pre) {
          pre[cur]++;
        } else {
          pre[cur] = 1;
        }
        return pre;
      }, {});
 
      console.log(value); // 输出:{a: 2, b: 1, c: 3}

5.按属性对object分类

      var people = [
        { name: "tom", age: 17, birthYear: 2021 },
        { name: "tony", age: 21, birthYear: 2021 },
        { name: "bob", age: 18, birthYear: 2020 },
        { name: "bob", age: 18, birthYear: 2021 },
        { name: "bob", age: 18, birthYear: 2019 },
      ];
 
      function groupBy(arr, property) {
        if (!Array.isArray(arr)) return [];
 
        return arr.reduce((pre, obj) => {
          var newObj = {
            [property]: obj[property],
            data: [obj],
          };
 
          if (!pre.length) {
            return [newObj];
          }
 
          for (let i = 0; i < pre.length; i++) {
            let item = pre[i];
            if (item[property] === obj[property]) {
              item.data = [...item.data, obj];
              return pre;
            }
          }
          return [...pre, newObj];
        }, []);
      }
 
      var value = groupBy(people, "birthYear");

返回值:

6.数组去重:

      var arr = [1, 2, 3, 2, 2, 3, 5, null, null, 0, false, false, true];
 
      var value = arr.reduce((pre, cur) => {
        return pre.includes(cur) ? pre : pre.concat(cur);
      }, []);
 
      console.log(value);//[1, 2, 3, 5, null, 0, false, true]

附:reduce的高级用法

(1)计算数组中每个元素出现的次数
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}


(2)数组去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

(3)将二维数组转化为一维

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
(3)将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

(4)、对象里的属性求和
var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60

到此这篇关于javascript中reduce()详解及使用方法的文章就介绍到这了,更多相关js中reduce()详解内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript中reduce()详解及使用方法

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

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

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript中reduce()详解及使用方法
    目录reduce():总结:reduce 应用场景:1.数组里所有值的和2.累加数组中对象的值3.将二维数组转为一维数组4.计算数组中每个元素出现的次数5.按属性对object分类6...
    99+
    2023-05-18
    js中reduce详解 js中reduce的用法 js reduce
  • JavaScript数组reduce()方法使用实例详解
    目录前言1、累加和累积乘法2、获取一个数组的最大值和最小值3、计算数组中元素出现的频率4、多个数组的展平总结前言 今天请让我详细介绍一下这个方法,希望对你有帮助。 这是 reduce...
    99+
    2022-11-13
  • JavaScript中数组reduce()方法使用详情
    语法: reduce()对数组中的每个元素进行累加,返回一个新的值,可以传入初始值简单的讲就是返回数组中所有元素的和数  不会改变原始组的值  不会对空数组执行回...
    99+
    2022-11-13
  • 如何使用javascript中reduce()方法
    这篇文章主要讲解了“如何使用javascript中reduce()方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用javascript中reduc...
    99+
    2022-10-19
  • JavaScript中reduce()方法如何使用
    本篇文章为大家展示了JavaScript中reduce()方法如何使用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。reduce()方法对数组中的每一个元素执行一个...
    99+
    2022-10-19
  • javascript中怎么使用reduce方法
    这篇文章主要为大家展示了“javascript中怎么使用reduce方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript中怎么使用reduce方法”这篇文章吧。在javascr...
    99+
    2023-06-15
  • JavaScript中reduce()方法怎么用
    这篇文章主要讲解了“JavaScript中reduce()方法怎么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中reduce()方法怎么用”吧!一、语法arr.red...
    99+
    2023-06-30
  • 详解JavaScript数组reduce()方法的高级技巧
    目录1、语法2、实例解析 initialValue 参数3、reduce的简单用法4、reduce的高级用法reduce()方法可以搞定的东西,for循环,或者forEach方法有时...
    99+
    2023-03-24
    JavaScript reduce()方法用法 JavaScript reduce()方法 JavaScript reduce
  • JAVA8 Stream流中的reduce()方法详解
    目录reduce()简介reduce三个override的方法公共集合reduce()简介 Reduce 原意:减少,缩小根据指定的计算模型将Stream中的值计算得到一个...
    99+
    2023-02-28
    JAVA8 Stream reduce()方法 JAVA8 Stream reduce
  • 详解javascript reduce函数的原理和用法
    reduce函数是Javascript中一个非常常用的函数,它可以大大简化我们对数组的操作。在这篇文章中,我们将详细讲解reduce函数的原理以及如何实现它。一、reduce函数的概念reduce函数是Javascript中一个非常重要的函...
    99+
    2023-05-14
  • JavaScript中如何使用 .map()、.reduce() 和 .filter()方法
    这篇文章主要为大家展示了“JavaScript中如何使用 .map()、.reduce() 和 .filter()方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中如何使用...
    99+
    2023-06-02
  • JavaScript数组reduce方法如何使用
    今天小编给大家分享一下JavaScript数组reduce方法如何使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。redu...
    99+
    2023-07-05
  • JavaScript数组reduce()方法怎么使用
    这篇文章主要介绍了JavaScript数组reduce()方法怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript数组reduce()方法怎么使用文章都会...
    99+
    2022-10-19
  • 详解JS中的reduce fold unfold用法
    目录fold(reduce)使用for...of使用while循环更像fold的实现unfold数组实现生成器实现unfold实现总结fold(reduce) 说说reduce吧, ...
    99+
    2022-11-12
  • Python3中map()、reduce()、filter()的用法详解
    目录1.map()2.filter()3.reduce()Python3中的map()、reduce()、filter() 这3个一般是用于对序列进行操作的内置函数,它们经常需要与 ...
    99+
    2022-11-11
  • JavaScript中reduce()和reduceRight()方法怎么用
    这篇文章主要为大家展示了“JavaScript中reduce()和reduceRight()方法怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“J...
    99+
    2022-10-19
  • 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()方法
    这篇文章将为大家详细讲解有关怎么使用javascript数组求和中的reduce()方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。JavaScript有什么特点1、js属于一种解释性脚本语言;2、在绝...
    99+
    2023-06-14
  • JavaScript如何使用reduce方法实现求和
    这篇文章主要为大家展示了“JavaScript如何使用reduce方法实现求和”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何使用reduce方法实现求和”这篇文章吧。使用...
    99+
    2023-06-17
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作