JS函数式编程基本概念培训配套实例

包含Flatten, Curry, Compose, waterfall等用例

js, 基础知识

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1327
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// Flatten
console.log(
    [
        [1, 2, 3],
        [3, 2, 1],
        [5, 2, 1]
    ]
    .reduce((acc, curr) => acc.concat(curr), [])
)

// Split every
const splitEvery = (chunkSize, arr) => (
    arr.reduce((acc, curr, i) => {
        const index = Math.floor(i / chunkSize);
        acc[index] = (acc[index] || []).concat(curr);
        return acc;
    }, [])
);

console.log(splitEvery(3, [1, 2, 3, 4, 5, 6, 7, 8, 9]))

// Compose
const compose = (...fns) => (
    (x) => fns.reduceRight(
        (acc, curr) => curr(acc),
        x
    )
);

const doubleTheSquare = compose(
    (x) => x * 2, (x) => x * x
);

console.log(
    doubleTheSquare(10)
)

// Curry
const curry = (fn) =>
    (...args) => (
        fn.length <= 1 || args.length >= fn.length ? fn(...args) : args.reduce((acc, curr) => curry(acc.bind(null, curr)), fn)
    )

console.log(
    curry((a, b, c, d) => a + b + c + d)("jared")(" ")("curried")("!")
);

console.log(
    curry((a, b, c, d, e) => a + b + c + d + e)("jared", " ")("curried")(" ", "again!")
);

// Promise Thunk Waterfall
const waterfall = (...promiseThunks) => (
    () => promiseThunks.reduce(
        (acc, curr) => acc.then(() => curr()),
        Promise.resolve()
    )
)

waterfall(
    () => new Promise((resolve) => setTimeout(
        () => resolve(console.log(1)),
        1000
    )),

() => new Promise((resolve) => setTimeout(
        () => resolve(console.log(2)),
        1000
    )),

() => new Promise((resolve) => setTimeout(
        () => resolve(console.log(3)),
        1000
    ))

)()

编译

CSS

HTML

包含Flatten, Curry, Compose, waterfall等用例

js, 基础知识

编辑器支持Emmet

快捷键

包含Flatten, Curry, Compose, waterfall等用例

js, 基础知识

用GoJS实现图形化交互编程界面示例

基于Vue.JS实现的电子时钟

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：