reduce的高级用法(二)

2021-04-30 10:32:54 浏览数 (1)

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

代码语言:javascript复制
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); // ["喜欢", "摸鱼", "真好", "一边"]
复制代码

字符串翻转

代码语言:javascript复制
function ReverseStr(str = "") {
    return str.split("").reduceRight((t, v) => t   v);
}

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

累加累乘

代码语言:javascript复制
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
复制代码

异步累计

代码语言:javascript复制
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包围下使用
复制代码

斐波那契数列

代码语言:javascript复制
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]
复制代码

返回对象指定的键值

代码语言:javascript复制
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 }
复制代码

权重求和

代码语言:javascript复制
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
复制代码

数组转对象

代码语言:javascript复制
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函数原理

代码语言:javascript复制
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的累加操作,看看四个方法各自的执行时间。

代码语言:javascript复制
// 创建一个长度为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 人点赞