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方法让代码优雅内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript mapreduce工作原理简析

    JavaScript mapreduce工作原理简析

    谷歌在2003到2006年间连续发表了三篇非常有影响力的文章,分别是2003年在SOSP上发布的GFS,2004年在OSDI上发布的MapReduce,以及2006年在OSDI上发布的BigTable.GFS是文件系统相关的,其对后来的分布式文件系统设计具有指导意义:MapReduce是一种并行计算的编程模型,用于作业调度:BigTable是一个用于管理结构化数据的分布式存储系统,构建在GFS.Chubby.SSTable等Google技术之上.相当多的Google应用使用了这三种技术,比如Go

  • js中的reduce()函数讲解

    js中的reduce()函数讲解

    定义: reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值.对空数组是不会执行回调函数的. 案例 1.数组求和 // 1.数组求和 var arr = [1,5,8,6,15,78,65,25,48,55] var sum = arr.reduce(function(total,currentValue){ return total+currentValue; }); console.log(sum);//306 var eachSum = 0;

  • 详解JS数组Reduce()方法详解及高级技巧

    基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. 语法: arr.reduce(callback,[initialValue]) callback (执行数组中每个值的函数,包含四个参数) previousValue (上

  • JavaScript中reduce()方法的使用详解

    JavaScript 数组reduce()方法同时应用一个函数针对数组的两个值(从左到右),以减至一个值. 语法 array.reduce(callback[, initialValue]); 下面是参数的详细信息: callback : 函数执行在数组中每个值 initialValue : 对象作为第一个参数回调的第一次调用使用 返回值: 返回数组的减少单一个值 兼容性: 这种方法是一个JavaScript扩展到ECMA-262标准; 因此它可能不存在在标准的其他实现.为了使它工作,你需要添加

  • js数组方法reduce经典用法代码分享

    以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要单挑reduce方法,一个原因是我对这个方法掌握不够,不能够用到随心所欲.另一个方面,我也感觉到了这个方法的庞大魅力,在许多的场景中发挥着神奇的作用. 理解reduce函数 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. a

  • 详解JavaScript中数组的reduce方法

    详解JavaScript中数组的reduce方法

    介绍 我们先来看看这个方法的官方概述:reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. 你一定也和我一样看的有点迷糊,其实reduce接收的就是一个回调函数,去调用数组里的每一项,直到数组结束. 我们来举个例子大家就很明白了. 假设我有一串数组,数组里放的全是数字,我要算出这些数字的总和是多少.正常情况下我们会循环,然后一个个加,有了reduce就不用那么麻烦了,只用一行代码. var total = [0,1,2,3,4

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

    前言 在实际项目中,最常见可能是在计算.循环逻辑方面的处理,可以使用数组中reduce方法也可以解决很多的问题,使得你的代码风格更加优雅! reduce语法 arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) 参数说明 reducer函数需要接收4个参数分别是 callback Accumulator 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValu

  • JS数组Reduce方法功能与用法实例详解

    本文实例讲述了JS数组Reduce方法功能与用法.分享给大家供大家参考,具体如下: 概述 一直以来都在函数式编程的大门之外徘徊,要入门的话首先得熟悉各种高阶函数,数组的reduce方法就是其中之一. reduce方法将会对数组元素从左到右依次执行reducer函数,然后返回一个累计的值.举个形象的例子:你要组装一台电脑,买了主板.CPU.显卡.内存.硬盘.电源...这些零件是组装电脑的必要条件. 装的过程可以简单概括为拆掉每个零件的包装,再装到一起.类比一下reduce函数就可以明白了,那些零件

  • JS使用reduce()方法处理树形结构数据

    JS使用reduce()方法处理树形结构数据

    定义 reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值. reduce() 与forEach().map().filter()这些方法一样,也会对数组中的每一项进行遍历,但是reduce() 可以将遍历的前一个数组项产生的结果与当前遍历项进行运算. 语法 array.reduce(function(prev, cur, index, array){ ... }, init); 回调函数中的参数: prev 必需.表示调用回调时的返

  • js判断某个方法是否存在实例代码

    本文实例讲述了js判断某个方法是否存在的代码.分享给大家供大家参考. 具体代码如下: 复制代码 代码如下: <html> <head> <title> js判断某个方法是否存在</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript&q

  • 使用js的replace()方法查找字符示例代码

    通常用于文本输入框的一种功能是替换指定的字符.JavaScript具有一个非常有用的方法replace(),可以用它利用备选字符集途欢指定的字符. replace()方法允许指定希望替换的字符或字符集,方式是利用字符串或者正则表达式:这是该方法的第一个实参.第二个实参是谢昂替换为的字符.第二个实参通常只是一个替换字符串(替换字符集),但他可以是用于确定替换字符串应当是什么的函数--如果是函数,则返回值应当用做俄日替换字符串.隐藏replace()方法的语法可以是如下任意一种: 复制代码 代码如下

  • JS数组reduce()方法原理及使用技巧解析

    1.语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. callback (执行数组中每个值的函数,包含四个参数) 1.previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue)) 2.currentValue (数组中当前被处理的元素)

  • js 利用className得到对象的实现代码

    下面代码直接copy 就能用l 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

  • 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类型的

  • js利用iframe实现选项卡效果

    本文实例为大家分享了js利用iframe实现选项卡的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .header{ width: 400px; height: 40px; border:solid 1px red; } .header a{ width: 1

随机推荐