类似1234 124 134的流程,怎么写比较好?

Question

下面是我写的,总感觉写的很渣,有没有好点的写法

let 代码块4=()=>{
    代码块4
}
let 代码块3=()=>{
    代码块3
    代码块4()
}
代码块1
if(条件1){
    代码块2
    if(条件2){
        代码块3()
    }else{
        代码块4()
    }
}else{
    代码块3()
}

Answer 1

function fn1() {
    const r = Math.random() * 2 > 1;
    console.log("fn1", r);
    return r;
}

function fn2() {
    const r = Math.random() * 2 > 1;
    console.log("fn2", r);
    return r;
}

function fn3() {
    console.log("fn3");
}

function fn4() {
    console.log("fn4");
}

function process() {
    const fns = [() => { }, fn1, fn2, fn3, fn4];
    const map = {
        1: [2, 3],
        2: [3, 4],
        3: [4]
    };

    exec(1);

    function exec(id) {
        const r = fns[id]();
        const next = map[id];
        if (!next?.length) { return r; }
        if (next.length === 1) {
            exec(next[0]);
        } else {
            r ? exec(next[0]) : exec(next[1]);
        }
    }
}

某几次运行结果

-------------------
fn1 false
fn3
fn4
-------------------
fn1 true
fn2 false
fn4
-------------------
fn1 true
fn2 false
fn4
-------------------
fn1 false
fn3
fn4
-------------------
fn1 true
fn2 true
fn3
fn4

---

另一种写法，直接从函数里返回下面要进行的步骤序号，循环（依次）执行，将结果插入到一个集合中，每次执行的时候，检查序号是否在此集合，如果在，执行，否则不执行。

function fn1() {
    const r = Math.random() * 2 > 1;
    console.log("fn1", r);
    return r ? 2 : 3;
}

function fn2() {
    const r = Math.random() * 2 > 1;
    console.log("fn2", r);
    return r ? 3 : 4;
}

function fn3() {
    console.log("fn3");
    return 4;
}

function fn4() {
    console.log("fn4");
}

function process() {
    const runable = new Set([0, 1]);
    [
        () => { },
        fn1, fn2, fn3, fn4
    ].forEach((fn, i) => {
        if (runable.has(i)) {
            const r = fn();
            runable.add(r);
        }
    });
}

---

不过我觉得最直接的写法还是直接在函数中调用，每次只需要调用一次开始那个 fn1() 即可。

function fn1() {
    const r = Math.random() * 2 > 1;
    console.log("fn1", r);
    r ? fn2() : fn3();
}

function fn2() {
    const r = Math.random() * 2 > 1;
    console.log("fn2", r);
    r ? fn3() : fn4();
}

function fn3() {
    console.log("fn3");
    fn4();
}

function fn4() {
    console.log("fn4");
}

function process() {
    fn1();
}

Answer 2

先解嵌套，基本上就好读了，多层嵌套代码越到后面越难读懂

let 代码块4=()=>{
    代码块4
}
let 代码块3=()=>{
    代码块3
    代码块4()
}

代码块1

if(!条件1){
  代码块3()
  return;
}

代码块2

if(条件2){
    代码块3()
    return;
}

代码块4()

Answer 3

一个代码块一个函数，不需要嵌套

代码块1()
条件1 && 代码块2()
// 条件1 && 条件2 && 代码块3()
(!条件1 || 条件2) && 代码块3()
代码块4()

Answer 4

const f1 = () => {
    console.log('f1 被执行')
    return 0 // 0 可以不用返回
}
const f2 = () => {
    console.log('f2 被执行')
    return 1 // 1 代表nextJump
}
const f3 = () => {
    console.log('f3 被执行')
    return 0
}
const f4 = () => {
    console.log('f4 被执行')
    return 1
}
const f5 = () => {
    console.log('f5 被执行')
    return 0
}
const fun = [f1,f2,f3,f4,f5]

fun.reduce((nextJump, fn, index, arr) => {
   nextJump = fn()
   // p 是false 删除下一个函数
   nextJump && arr.splice(index+1,nextJump)   
}, 0)

// 如果说 你要讲每个函数的执行数据传递下去 就修改nextJump就行 nextJump = fn(nextJump)
// 或者bind 到上一个对象 fn.bind(nextJump)