【实用】用 FP 思想将 JS 循环做简单封装~

2022 年 8 月 27 日
广东
本文字数：1387 字
阅读完需：约 5 分钟

本篇带来 FP 函数式编程思想在 JS【循环】中的应用。

闲言少叙，冲 (づ￣3￣)づ╭～

通常，写一个循环：

for (let i=9; i<=22; i++) {
    // do something with i
}

复制代码

或者：

let i = 9;while (i <= 22) {    // do something with i    i++;}

复制代码

这样写有什么问题吗？

说有，也是有的 QAQ

容易产生边际问题 —— 也叫做 “off-by-one” Bug，差一錯誤。比如漏写 < 号；
如果索引 i 发生变化，循环就会造成错误（那为什么说 i 容易发生变化呢？因为对于循环来说，比如 while 结构，索引 i 是外部变量，外部变量的修改不受循环内部所控制；）
代码太长了，循环结构有可能比操作的功能代码都长；

所以，我们尝试用 FP 函数式编程思路对循环做下改造~

改造后的期望类似这样：

range(9, 22).forEach(i => {    /* do something with i */})

复制代码

range 函数实现：

const range = (from, to) => {    const arr = [];    do {    arr.push(from);    from++;    } while (to >= from);    return arr;};

复制代码

range(9,22) 展开就是 [9, 10, 11, … 22]，如果，想要反转数组，比如：range(12,4) 展开是 [12,11,10...4]

const range = (from, to, step = Math.sign(to - from)) => {    const arr = [];    do {    arr.push(from);    from += step;    } while ((step > 0 && to >= from) || (step < 0 && to <= from));    return arr;};
range(12,4)

复制代码

这样，我们就做了一层简单的封装！

还有一个问题 —— 目前这样写，循环不受控制。即我们不能随意停止循环或者跳出循环；

为了解决这个问题，尝试采用 .some(fn) 来代替 .forEach(fn)；

some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。

e.g.

function isBiggerThan10(element, index, array) {  return element > 10;}
[2, 5, 8, 1, 4].some(isBiggerThan10);  // false[12, 5, 8, 1, 4].some(isBiggerThan10); // true

复制代码

只要 Fn 函数返回 false ，循环将继续;当它返回 true 时，循环将结束。

同时借助 generators，每次调用，它会产生一个返回值；

range() 函数演变如下：

function* range(from, to, step = Math.sign(to - from)) {    do {        yield from;        from += step;    } while ((step > 0 && to >= from) || (step < 0 && to <= from));}

复制代码

for (const i of range(9, 22)) { i => {    ...    ...    if (someCondition) continue;    ...    if (somethingElse) break;    ...    ...    }}
// 或者赋值一个数组
const arrayFrom9To22 = [...range(9, 22)];// this produces [9, 10, 11, ... 22]