专栏首页前端逗逗飞reduce的高级用法(二)

reduce的高级用法(二)

对数组成员包含的关键字进行统计

function Keyword(arr = [], keys = []) {
    return keys.reduce((t, v) => (arr.some(w => w.includes(v)) && t.push(v), t), []);
}

const text = [
    "今天天气真好,我想出去钓鱼",
    "我一边看电视,一边写作业",
    "小明喜欢同桌的小红,又喜欢后桌的小君,真TM花心",
    "最近上班喜欢摸鱼的人实在太多了,代码不好好写,在想入非非"
];
const keyword = ["偷懒", "喜欢", "睡觉", "摸鱼", "真好", "一边", "明天"];
Keyword(text, keyword); // ["喜欢", "摸鱼", "真好", "一边"]
复制代码

字符串翻转

function ReverseStr(str = "") {
    return str.split("").reduceRight((t, v) => t + v);
}

const str = "reduce最牛逼";
ReverseStr(str); // "逼牛最ecuder"
复制代码

累加累乘

function Accumulation(...vals) {
    return vals.reduce((t, v) => t + v, 0);
}

function Multiplication(...vals) {
    return vals.reduce((t, v) => t * v, 1);
}

Accumulation(1, 2, 3, 4, 5); // 15
Multiplication(1, 2, 3, 4, 5); // 120
复制代码

异步累计

async function AsyncTotal(arr = []) {
    return arr.reduce(async(t, v) => {
        const at = await t;
        const todo = await Todo(v);
        at[v] = todo;
        return at;
    }, Promise.resolve({}));
}

const result = await AsyncTotal(); // 需在async包围下使用
复制代码

斐波那契数列

function Fibonacci(len = 2) {
    const arr = [...new Array(len).keys()];
    return arr.reduce((t, v, i) => (i > 1 && t.push(t[i - 1] + t[i - 2]), t), [0, 1]);
}

Fibonacci(10); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
复制代码

返回对象指定的键值

function GetKeys(obj = {}, keys = []) {
    return Object.keys(obj).reduce((t, v) => (keys.includes(v) && (t[v] = obj[v]), t), {});
}

const target = { a: 1, b: 2, c: 3, d: 4 };
const keyword = ["a", "d"];
GetKeys(target, keyword); // { a: 1, d: 4 }
复制代码

权重求和

const score = [
    { score: 90, subject: "chinese", weight: 0.5 },
    { score: 95, subject: "math", weight: 0.3 },
    { score: 85, subject: "english", weight: 0.2 }
];
const result = score.reduce((t, v) => t + v.score * v.weight, 0); // 90.5
复制代码

数组转对象

const people = [
    { area: "GZ", name: "YZW", age: 27 },
    { area: "SZ", name: "TYJ", age: 25 }
];
const map = people.reduce((t, v) => {
    const { name, ...rest } = v;
    t[name] = rest;
    return t;
}, {}); // { YZW: {…}, TYJ: {…} }
复制代码

Redux Compose函数原理

function Compose(...funs) {
    if (funs.length === 0) {
        return arg => arg;
    }
    if (funs.length === 1) {
        return funs[0];
    }
    return funs.reduce((t, v) => (...arg) => t(v(...arg)));
复制代码

兼容和性能

好用是挺好用的,但是兼容性如何呢?在Caniuse上搜索一番,兼容性绝对的好,可大胆在任何项目上使用。不要吝啬你的想象力,尽情发挥reduce的compose技能啦。对于时常做一些累计的功能,reduce绝对是首选方法。

另外,有些同学可能会问,reduce的性能又如何呢?下面我们通过对for-in、forEach、map和reduce四个方法同时做1~100000的累加操作,看看四个方法各自的执行时间。

// 创建一个长度为100000的数组
const list = [...new Array(100000).keys()];

// for-in
console.time("for-in");
let result1 = 0;
for (let i = 0; i < list.length; i++) {
    result1 += i + 1;
}
console.log(result1);
console.timeEnd("for-in");

// forEach
console.time("forEach");
let result2 = 0;
list.forEach(v => (result2 += v + 1));
console.log(result2);
console.timeEnd("forEach");

// map
console.time("map");
let result3 = 0;
list.map(v => (result3 += v + 1, v));
console.log(result3);
console.timeEnd("map");

// reduce
console.time("reduce");
const result4 = list.reduce((t, v) => t + v + 1, 0);
console.log(result4);
console.timeEnd("reduce");
复制代码

连续做了10次以上操作,发现reduce总体的平均执行时间还是会比其他三个方法稍微快一点,所以大家还是放心使用啦!本文更多是探讨reduce的使用技巧,如对reduce的兼容和性能存在疑问,可自行参考相关资料进行验证。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • reduce的高级用法(一)

    reduce作为ES5新增的常规数组方法之一,对比forEach 、filter和map,在实际使用上好像有些被忽略,发现身边的人极少用它,导致这个如此强大的方...

    前端逗逗飞
  • 数组reduce方法的高级用法

    使用下来,感觉确实妙用无穷,仿佛自己的逼格在无形中变得高大了一点点,哈哈,上一篇文章的简单介绍确实有点糙,因此决定重新一些总结文章。这篇文章就是专门总结redu...

    用户6901603
  • Python的高级语法与用法(二)

    这种将数字转换成枚举类型的方法和字符串整形转换是不一样的,前者是数值访问具体枚举类型的方案,后者则是数据结构的内部转换。

    stormwen
  • 【JS】511- 20个你不得不知道的数组reduce高级用法

    reduce作为ES5新增的常规数组方法之一,对比forEach 、filter和map,在实际使用上好像有些被忽略,发现身边的人极少用它,导致这个如此强大的方...

    pingan8787
  • js中reduce的用法

    reduce() 是数组的归并方法,reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算

    用户6973020
  • python的正则(二):一些高级用法

    (?aiLmsux) 等价于re.A, re.I, re.L, re.M, re.S, re.U, re.X (?:...) 不分组 (?aiLmsux-ims...

    ExASIC
  • 09 Spring框架 AOP (二) 高级用法

    上一篇文章我们主要讲了一点关于AOP编程,它的动态考虑程序的运行过程,和Spring中AOP的应用,前置通知,后置通知,环绕通知和异常通知,这些都是Spring...

    MindMrWang
  • js中reduce的用法(二) 详解与注意事项

    reduce()是将数组数据的每个元素累积为一个值的最佳方法,所以本篇文章我们就来详细介绍一下JavaScript中reduce()的使用方法。

    用户6973020
  • sass的高级用法

    进入到Koala 安装目录 D:\Koala\rubygems\gems\sass-3.4.9\lib\sass修改 engine.rb 文件 在requir...

    潇洒哥和黑大帅
  • css的高级用法

    潇洒哥和黑大帅
  • Knockout.Js官网学习(Mapping高级用法二)

    如果在map的时候,你想忽略一些属性,你可以使用ignore累声明需要忽略的属性名称集合:

    aehyok
  • python中reduce函数的用法

    reduce:将一个可以迭代的对象应用到两个带有参数的方法上,我们称这个方法为fun,遍历这个可迭代的对象,将其中元素依次作为fun的参数,但是这个函数有两个参...

    用户7886150
  • [Python]中filter、map、reduce、lambda的用法

    原文链接:http://blog.csdn.net/humanking7/article/details/45950985

    祥知道
  • testNG的高级用法 --DataProvider

    @DataProvider Method参数 数据提供者的第一个参数是java.lang.reflect.Method,TestNG传递这个将调用的测试方法。如...

    千往
  • vue watch的高级用法

    watch 有一个特点是,最初绑定的时候是不会执行的,要等到依赖改变时才执行监听计算。

    Daotin
  • FastDFS的高级用法(3)

        为每个storage节点安装nginx,使其能够通过http协议,展示文件

    py3study
  • Newtonsoft.Json高级用法

      手机端应用讲究速度快,体验好。刚好手头上的一个项目服务端接口有性能问题,需要进行优化。在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用N...

    用户1168362
  • Postman高级用法

    可以方便在不同的工作场景或者项目中切换,每个Workspace设置不同的环境,不同的请求集合Collections

    十毛
  • Groovy高级用法

    在根工程下自定义config.gradle可以直接在根project引用apply from:'config.gradle' 如果需要在app project...

    Yif

扫码关注云+社区

领取腾讯云代金券