55.[函数式编程] 不用循环的 JavaScript about cc

[justjavac]

搭车，安利一篇我的知乎回答：JavaScript 函数式编程存在性能问题么？

[jawil]

再次遇见@justjavac前辈大神😄

[rccoder]

很强！

[hughfenghen]

推荐lodash、ramda，数据结构转换超级方便，基本上不用自己写转换逻辑，理清思路找API就行了。

[ty-cs]

哇！惊现学长@rccoder

[xuqinggang]

函数式编程reduce、map、filter、find等应用实践

// 输入为state和originData变量
// 输出为:
{
    houseTypeShared: '2居_3居',
    houseTypeWhole: '2居',
};
// state和originData变量如下:
// state
const state = {
    sharedRooms: { 0: false, 1: true, 2:true },
    wholeRooms: { 2: false, 3: true },
};

// 源数据
const originData = {
    sharedRooms: [
        {
            unique: true,
            text: '不限',
            value: 'UNLIMITED',
        },
        {
            text: '2居',
            value: 'TWO',
        },
        {
            text: '3居',
            value: 'THREE',
        },
        {
            text: '3居+',
            value: 'THREE_MORE',
        },
    ],
    wholeRooms: [
        {
            unique: true,
            text: '不限',
            value: 'UNLIMITED',
        },
        {
            text: '1居',
            value: 'ONE',
        },
        {
            text: '2居',
            value: 'TWO',
        },
        {
            text: '2居+',
            value: 'TWO_MORE',
        },
    ]
};

// 利用map, reduce, filter等函数式方法，计算出结果。
/*
好处:
1.代码精简
2.map,reduce,filter等方法更具语义化
坏处:
1.初次阅读，难以阅读理解(其实写习惯，就很容易理解了)

*/

const TypeMapParamKey = {
    sharedRooms: 'houseTypeShared',
    wholeRooms: 'houseTypeWhole',
};
Object.keys(state)
    .map(type => {
        const rtText = Object.keys(state[type])
            .filter(index => state[type][index])
            .map(index => originData[type][index].text)
            .reduce((rt, text, index) =>
                (`${rt}` + (index === 0 ? '' : '_') + `${text}`),
                '',
            );
        return {
            [TypeMapParamKey[type]]: rtText,
        };
    })
    .reduce((rt, item) => Object.assign(rt, item), {})

可以看下更详细的实践与对比