js中reduce的神奇用法小白常识_reduce使用攻略

最近经常在项目中经常看到别人用reduce处理数据,很是牛掰,很梦幻, 不如自己琢磨琢磨。先看w3c语法array.reduce(function(total, currentValue, currentIndex, arr), initialValue);
/*total: 必需。初始值, 或者计算结束后的返回值。currentValue: 必需。当前元素

js中reduce的神奇用法小白常识

最近经常在项目中经常看到别人用reduce处理数据,很是牛掰,很梦幻, 不如自己琢磨琢磨。

js中reduce的神奇用法小白常识_reduce使用攻略

先看w3c语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue);
/*
  total: 必需。初始值, 或者计算结束后的返回值。
  currentValue: 必需。当前元素。
  currentIndex: 可选。当前元素的索引;                     
  arr: 可选。当前元素所属的数组对象。
  initialValue: 可选。传递给函数的初始值,相当于total的初始值。
*/

常见用法

数组求和

const arr = [12, 34, 23];
const sum = arr.reduce((total, num) => total + num);
<!-- 设定初始值求和 -->
const arr = [12, 34, 23];
const sum = arr.reduce((total, num) => total + num, 10);  // 以10为初始值求和
<!-- 对象数组求和 -->
var result = [
  { subject: 'math', score: 88 },
  { subject: 'chinese', score: 95 },
  { subject: 'english', score: 80 }
];
const sum = result.reduce((accumulator, cur) => accumulator + cur.score, 0); 
const sum = result.reduce((accumulator, cur) => accumulator + cur.score, -10);  // 总分扣除10分

数组最大值

const a = [23,123,342,12];
const max = a.reduce(function(pre,cur,inde,arr){return pre>cur?pre:cur;}); // 342

进阶用法

数组对象中的用法

<!-- 比如生成“老大、老二和老三” -->
const objArr = [{name: '老大'}, {name: '老二'}, {name: '老三'}];
const res = objArr.reduce((pre, cur, index, arr) => {
  if (index === 0) {
    return cur.name;
  }
  else if (index === (arr.length - 1)) {
    return pre + '和' + cur.name;
  }
  else {
    return pre + '、' + cur.name;
  }
}, '');

求字符串中字母出现的次数

const str = 'sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';
const res = str.split('').reduce((accumulator, cur) => {accumulator[cur] ? accumulator[cur]++ : accumulator[cur] = 1; return accumulator;}, {});

数组转数组

<!-- 按照一定的规则转成数组 -->
var arr1 = [2, 3, 4, 5, 6]; // 每个值的平方
var newarr = arr1.reduce((accumulator, cur) => {accumulator.push(cur * cur); return accumulator;}, []);

数组转对象

<!-- 按照id 取出stream -->
var streams = [{name: '技术', id: 1}, {name: '设计', id: 2}];
var obj = streams.reduce((accumulator, cur) => {accumulator[cur.id] = cur; return accumulator;}, {});

高级用法

多维的叠加执行操作

<!-- 各科成绩占比重不一样, 求结果 -->
var result = [
  { subject: 'math', score: 88 },
  { subject: 'chinese', score: 95 },
  { subject: 'english', score: 80 }
];
var dis = {
    math: 0.5,
    chinese: 0.3,
    english: 0.2
};
var res = result.reduce((accumulator, cur) => dis[cur.subject] * cur.score + accumulator, 0);

<!-- 加大难度, 商品对应不同国家汇率不同,求总价格 -->
var prices = [{price: 23}, {price: 45}, {price: 56}];
var rates = {
  us: '6.5',
  eu: '7.5',
};
var initialState = {usTotal:0, euTotal: 0};
var res = prices.reduce((accumulator, cur1) => Object.keys(rates).reduce((prev2, cur2) => {
  console.log(accumulator, cur1, prev2, cur2);
  accumulator[`${cur2}Total`] += cur1.price * rates[cur2];
  return accumulator;
}, {}), initialState);

var manageReducers = function() {
  return function(state, item) {
    return Object.keys(rates).reduce((nextState, key) => {
        state[`${key}Total`] += item.price * rates[key];
        return state;
      }, {});
  }
};
var res1= prices.reduce(manageReducers(), initialState);

扁平一个二维数组

var arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
var res = arr.reduce((x, y) => x.concat(y), []);

对象数组去重

const hash = {};
  chatlists = chatlists.reduce((obj, next: Object) => {
    const hashId = `${next.topic}_${next.stream_id}`;
    if (!hash[hashId]) {
      hash[`${next.topic}_${next.stream_id}`] = true;
      obj.push(next);
    }
    return obj;
  }, []);

compose函数

function compose(...funs) {
    if (funs.length === 0) {
        return arg => arg;
    }
    if (funs.length === 1) {
       return funs[0];
    }
    return funs.reduce((a, b) => (...arg) => a(b(...arg)))

}
海计划公众号
(0)
上一篇 2020/03/20 22:21
下一篇 2020/03/20 22:21

您可能感兴趣的内容

  • POSTMAN使用帮助_强大的HTTP请求Chrome插件

    POSTMAN使用帮助 官方网址:https://www.getpostman.com/ 简介描述:强大的HTTP请求Chrome插件 Postman is the only co…

    2020/03/06
  • js 执行顺序入门攻略_顺序使用帮助

    1、js正常是顺序执行:A,B,C,不管A里边代码运行时间多长,都要先执行完A,再执行B,再执行CA:sssssssssssssssssssssssssss
    B: ddd
    C: ccccccccc 2、如果一个函数返回的是promise对象,则这个promise对象.then里边的代码,不会顺序执行,会同时执行,哪个代码运行快先显示哪个的执行结果jobs.a

    2020/04/03
  • API 接口设计规范入门知识_api基础入门

    概述这篇文章分享 API 接口设计规范,目的是提供给研发人员做参考。规范是死的,人是活的,希望自己定的规范,不要被打脸。路由命名规范动作前缀备注获取getget{XXX}获取getget{XXX}List新增addadd{XXX}修改updateupdate{XXX}保存savesave{XXX}删除deletedelete{XXX}上传uploaduplo

    2020/03/20
  • validate.js基础教程表单提供了强大的验证功能,让客户端表单验证变得更简单

    validate.js基础入门 官方网址:http://rickharrison.github.io/validate.js/ GitHub:https://github.com/…

    2020/03/05
  • 精读《V8 引擎 Lazy Parsing》小白基础_引擎使用教程

    1. 引言本周精读的文章是 V8 引擎 Lazy Parsing,看看 V8 引擎为了优化性能,做了怎样的尝试吧!这篇文章介绍的优化技术叫 preparser,是通过跳过不必要函数编译的方式优化性能。2. 概述 & 精读解析 Js 发生在网页运行的关键路径上,因此加速对 JS 的解析,就可以加速网页运行效率。然而并不是所有 Js 都需要在初始化时就被执行,因

    2020/03/30
  • Unicode字符集的由来菜鸟教程网_字符指南教程

    本文起源于行走在阳光下的那些不可见字符中的知识边界,因为涉及到字符相关,而我也不能很清楚的描述Unicode的前世今生,故而有了此文。计算机技术的革命极大地方便了人们的工作与生活,使得人类生活前进了一大步,可是在计算机发展进程中,世界各地由于语言文字不一,有过那么一段混乱难受的日子…字符世界的起源由于计算机在美国诞生,因此字符集最初也只考虑了美国人当时的

    2020/03/29
  • FastScan入门教程_用于敏感词过滤的 ahocorasick 算法快速文本搜索JS实现

    FastScan入门教程 官方网址:https://pyloque.github.com/fastscan GitHub:https://github.com/pyloque/fa…

    2020/03/10
  • javascript的本地对象,内置对象和宿主对象使用帮助_对象教程视频

    名词参考:原生对象:也叫内部对象、本地对象、native object内置对象:Build-in object宿主对象:host objectECMA-262 定义:原生对象:独立于宿主环境的ECMAScript实现提供的对象。与宿主无关,在javascript(远景浏览器)、nodejs(node平台)、jscript(ie浏览器)、typescript(

    2020/04/05
  • 网站中内链和外链的区别是什么?小白入门_网站入门教程

    什么是内链?网站内链就是本网站内部页面之间的链接。最通俗的说法是自己在自己的网站上添 加链接,就是在同一网站域名下的各内容页面间的互相链接。什么是外链?外链就是指在别的网站导入自己网站的链接。导入链接对于网站优化来说是非常重要的一个过程。导入链接的质量(即导入链接所在页面的权重)间接影响了我们的网站在搜索引擎中的权重。内链和外链的区别外链可以算作是友情链接,

    2020/03/20
  • Js函数curry化新手入门_函数入门百科

    前言最近的某次面试被问到了两次相关的问题,但是自己居然都没答好,尤其第二次,先来看看面试官给的题目是什么样子的: // 实现一个函数add使得下面这段代码返回trueadd(1)(2)(3) === add(0)(2)(4);
    这一问给我问懵逼了,add(1)(2)(3)() === add(0)(2)(4)();这样的咱会实现啊,你再多加几个参数咱也能

    2020/03/24
  • 黑客攻击用的最短代码是什么?入门基础教程_代码指南教程

    第一,我们讲的是攻击过程中用到的代码,不是你攻击过程中准备的软件代码。第二,我们讲的是现在应当能成功攻击的。不是你已经装好后门你去连接了,像菜刀服务端、跨站代码等。接近这个答案,有两种:1、真正的dir溢出医科圣手tombkeeper,在知乎上举过例子。在简体中文版 Windows 2000 SP4 的命令提示符下执行这条 dir 命令会导致系统锁屏:dir

    2020/04/03
  • ichartjs使用帮助_基于HTML5图形图表组件

    ichartjs使用说明 官方网址:http://www.ichartjs.com/ GitHub:https://github.com/wanghetommy/ichartjs …

    2020/03/06
  • 第十届中国卫星导航年会小白指南_活动入门攻略

    ——成就博览会,五月相约北京,成就你的博览  第十届中国卫星导航成就博览会(China Satellite Navigation Expo,CSNE)是第十届中国卫星导航年会(CSNC2019)的重要内容,与第十届中国卫星导航年会同期举办将于2019年5月22-25日在北京国测国际会议会展中心举办,主题为:导航,遇见十年,展出面积15,000㎡。十年踪迹十年

    2020/03/30
  • webpack是什么?小白攻略_webpack入门基础教程

    从前的代码书写方式在 html 文件里使用 script 标签引入各个 JavaScript 文件。
    <

    2020/03/26
  • PHP的高效率写法菜鸟教程网_php小白教程

    1、尽量静态化;如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍。当然了,这个测试方法需要在十万级以上次执行,效果才明显。其实静态方法和非静态方法的效率主要区别在内存:静态方法在程序开始时生成内存,实例方法在程序运行中生成内存,所以静态方法可以直接调用,实例方法要先成生实例,通过实例调用方法,静态速度很快,但是多

    2020/03/31
  • 谷歌为何会选用TypeScript?小白攻略_TypeScript入门基础知识

    我已经使用 TypeScript 两年多时间,是时候写一两篇文章来总结一下了。谷歌在很早之前就张开双臂拥抱 Web 应用程序,Gmail 已经发布 14 年了。当时,JavaScript 的世界是疯狂的。Gmail 工程师不得不为 IE 糟糕的垃圾回收算法捏一把汗,他们需要手动将字符串文字从 for 循环中提取出来,以避免 GC 停顿。最近,我找到了那个时代

    2020/04/03