한 기사에서는 분기 최적화 시 JavaScript를 구현하는 방법을 설명합니다.-JS 튜토리얼-php.cn

1000개의 판단 조건은 1000개의 ifs 작성이 필요하다고요? 분기 문을 최적화하는 방법은 무엇입니까? 다음 기사에서는 브랜치 최적화를 달성하는 방법에 대해 설명하겠습니다. 모든 사람에게 도움이 되기를 바랍니다.

한 기사에서는 분기 최적화 시 JavaScript를 구현하는 방법을 설명합니다.

최근에 인터넷 서핑을 하다가 이런 코드를 봤습니다.

function getUserDescribe(name) {
    if (name === "小刘") {
        console.log("刘哥哥");
    } else if (name === "小红") {
        console.log("小红妹妹");
    } else if (name === "陈龙") {
        console.log("大师");
    } else if (name === "李龙") {
        console.log("师傅");
    } else if (name === "大鹏") {
        console.log("恶人");
    } else {
        console.log("此人比较神秘！");
    }
}

로그인 후 복사

처음에는 딱히 이상한 점은 못 느꼈는데, 판단 조건이 1000개라면 <코드> 1000개 쓰기 어려운가요? 분기? if 分支？

如果写了大量的 if 分支，并且可能还具有分支套分支，可以想象到整个代码的可读性和可维护都会大大降低，这在实际开发中，确实是一个比较头疼的问题，那有没有什么办法能够即实现需求又能避免这些问题呢？【推荐学习：javascript视频教程】

1️⃣ 简单分支优化

这就涉及到分支优化，让我们转换思维，去优化一下上面的代码结构：

function getUserDescribe(name) {
    const describeForNameMap = {
        小刘: () => console.log("刘哥哥"),
        小红: () => console.log("小红妹妹"),
        陈龙: () => console.log("大师"),
        李龙: () => console.log("师傅"),
        大鹏: () => console.log("恶人"),
    };
    describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比较神秘！");
}

로그인 후 복사

问题代码中的判断都是简单的相等判断，那么我们就可以将这些判断条件作为一个属性写到对象describeForNameMap 中去，这些属性对应的值就是条件成立后的处理函数。

之后我们就只需通过getUserDescribe函数接收到的参数去获取describeForNameMap对象中对应的值，如果该值存在就运行该值（因为值是一个函数）。

这样一来原本的 if 分支判断就转换成了简单的key value对应值，条件与处理函数一一对应，一目了然。

2️⃣ 复杂分支优化

那如果我们的 if 分支中的判断条件不只是简单的相等判断，还具有一些需要计算的表达式时，我们该怎么办呢？（如下所示）

function getUserDescribe(name) {
    if (name.length > 3) {
        console.log("名字太长");
    } else if (name.length < 2) {
        console.log("名字太短");
    } else if (name[0] === "陈") {
        console.log("小陈");
    } else if (name[0] === "李" && name !== "李鹏") {
        console.log("小李");
    } else if (name === "李鹏") {
        console.log("管理员");
    } else {
        console.log("此人比较神秘！");
    }
}

로그인 후 복사

对于这种结构的代码就不能引入对象来进行分支优化了，我们可以引入二维数组来进行分支优化：

function getUserDescribe(name) {
    const describeForNameMap = [
        [
            (name) => name.length > 3, // 判断条件
            () => console.log("名字太长") // 执行函数
        ],
        [
            (name) => name.length < 2, 
            () => console.log("名字太短")
        ],
        [
            (name) => name[0] === "陈", 
            () => console.log("小陈")
        ],
        [
            (name) => name === "大鹏", 
            () => console.log("管理员")
        ],
        [
            (name) => name[0] === "李" && name !== "李鹏",
            () => console.log("小李"),
        ],
    ];
    // 获取符合条件的子数组
    const getDescribe = describeForNameMap.find((item) => item[0](name));
    // 子数组存在则运行子数组中的第二个元素（执行函数）
    getDescribe ? getDescribe[1]() : console.log("此人比较神秘！");
}

로그인 후 복사

上面我们定义了一个describeForNameMap数组，数组内的每一个元素代表一个判断条件与其执行函数的集合（也是一个数组），之后我们通过数组的find方法查找describeForNameMap数组中符合判断条件的子数组即可。

3️⃣ 抽离分支

上面例子中我们定义的这个describeForNameMap对象是一个独立的结构，我们完全可以将它抽离出去：

const describeForNameMap = {
    小刘: () => console.log("刘哥哥"),
    小红: () => console.log("小红妹妹"),
    陈龙: () => console.log("大师"),
    李龙: () => console.log("师傅"),
    大鹏: () => console.log("恶人"),
};

function getUserDescribe(name) {
    describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比较神秘！");
}

로그인 후 복사

const describeForNameMap = [
    [
        (name) => name.length > 3, // 判断条件
        () => console.log("名字太长") // 执行函数
    ],
    [
        (name) => name.length < 2, 
        () => console.log("名字太短")
    ],
    [
        (name) => name[0] === "陈", 
        () => console.log("小陈")
    ],
    [
        (name) => name === "大鹏", 
        () => console.log("管理员")
    ],
    [
        (name) => name[0] === "李" && name !== "李鹏",
        () => console.log("小李"),
    ],
];
    
function getUserDescribe(name) {
    // 获取符合条件的子数组
    const getDescribe = describeForNameMap.find((item) => item[0](name));
    // 子数组存在则运行子数组中的第二个元素（执行函数）
    getDescribe ? getDescribe[1]() : console.log("此人比较神秘！");
}

로그인 후 복사

通过模块化的开发也可以将这个map对象写进一个单独的js文件，之后在需要使用的地方导入即可。

4️⃣ 争议

这样一来整个getUserDescribe函数就变得非常简洁，有的同学可能会问这有什么用呢？这不是更加麻烦了吗？如果真的嫌if else不好看，那我就使用if return不用else就好了：

function getUserDescribe(name) {
    if (name === "小刘") {
        console.log("刘哥哥");
        return;
    }
    if (name === "小红") {
        console.log("小红妹妹");
        return;
    }
    if (name === "陈龙") {
        console.log("大师");
        return;
    }
    if (name === "李龙") {
        console.log("师傅");
        return;
    }
    if (name === "大鹏") {
        console.log("恶人");
        return;
    }
    console.log("此人比较神秘！");
}

로그인 후 복사

试想一下，如果你getUserDescribe函数中有1000个判断分支，并且还具有大量的根据判断结果来执行的处理代码，并且getUserDescribe函数会返回这个处理后的判断结果的值。

这时getUserDescribe函数的重点在于对判断结果的处理，而不在于这个结果是通过什么分支获取的，例如：

function getUserDescribe(name) {
    let str; // 存储判断结果
    if (name.length > 3) {
        str = "名字太长";
    } else if (name.length < 2) {
        str = "名字太短";
    } else if (name[0] === "陈") {
        str = "小陈";
    } else if (name[0] === "李" && name !== "李鹏") {
        str = "小李";
    } else if (name === "李鹏") {
        str = "管理员";
    } else {
        str = "此人比较神秘！";
    }
    // 对判断结果str的一些处理
    // ......
    console.log(str);
    return str;
}

로그인 후 복사

如果你不进行分支优化，getUserDescribe函数就会被大量的 if 分支抢占空间，使得getUserDescribe函数的重点迷失（getUserDescribe函数重点在于对判断结果的处理，而不在于这个结果是通过什么分支获取的），这时你再看一下我们优化后的代码：

const describeForNameMap = [
    [(name) => name.length > 3, () => "名字太长"],
    [(name) => name.length < 2, () => "名字太短"],
    [(name) => name[0] === "陈", () => "小陈"],
    [(name) => name === "大鹏", () => "管理员"],
    [(name) => name[0] === "李" && name !== "李鹏", () => "小李"],
];

function getUserDescribe(name) {
    let str; // 存储判断结果
    const getDescribe = describeForNameMap.find((item) => item[0](name));
    if (getDescribe) {
        str = getDescribe[1]();
    } else {
        str = "此人比较神秘！";
    }
    // 对判断结果str的一些处理
    // ......
    console.log(str);
    return str;
}

로그인 후 복사

查看优化后的getUserDescribe函数我们能够知道，它从describeForNameMap获取了一个值赋值给了str（describeForNameMap是如何返回值的我们并不关心），之后对str作了一些处理。这就突出了getUserDescribe函数的重点（对判断结果str进行处理）。

在这个例子中describeForNameMap子数组的第二个元素完全可以直接使用一个值：[(name) => name.length > 3, "名字太长"]
많은 수의 if 분기를 작성하고 분기 내 분기도 있을 수 있다면 전체 코드의 가독성과 유지 관리성이 크게 감소할 것이라고 상상할 수 있습니다. .실제 개발에서는 실제로 골치 아픈 문제입니다. 그렇다면 요구 사항을 충족하고 이러한 문제를 피할 수 있는 방법이 있습니까? [추천 학습: javascript 비디오 튜토리얼]🎜1️⃣ 간단한 브랜치 최적화🎜여기에는 브랜치 최적화가 포함됩니다. 생각을 바꾸고 위의 코드 구조를 최적화해 보겠습니다. 🎜rrreee🎜문제 코드 모두 단순한 동등 판단인 경우 이러한 판단 조건을 describeForNameMap 개체에 속성으로 작성할 수 있습니다. 이러한 속성에 해당하는 값은 조건이 설정될 때입니다. 최종 처리 기능. 🎜🎜이후에는 getUserDescribe 함수에서 받은 매개변수를 통해 describeForNameMap 개체에서 해당 값만 가져오면 됩니다. 값은 함수입니다). 🎜🎜이렇게 하면 원래 if 분기 판단이 간단한 키 값 해당 값으로 변환되고 조건과 처리 기능이 일대일로 대응되므로 에서 명확하게 알 수 있습니다. 한눈에. 🎜
2️⃣ 복잡한 분기 최적화
🎜그러면 if 분기의 판단 조건이 단순한 동등 판단뿐만 아니라 다음과 같은 몇 가지 계산도 포함한다면 계산식을 표현해야 하는데 어떻게 해야 하나요? (아래 참조) 🎜rrreee🎜이 구조의 코드에서는 분기 최적화를 위해 객체를 도입할 수 없습니다. 분기 최적화를 위해 2차원 배열을 도입할 수 있습니다. 🎜rrreee🎜위의 를 정의했습니다. explainForNameMap 배열에서 배열의 각 요소는 일련의 판단 조건과 실행 함수(또한 배열)를 나타내며 배열의 find 메소드를 통해 describeForNameMap을 찾습니다. /code>판정 조건을 만족하는 배열 내 하위 배열이면 충분합니다. 🎜<h2><strong>3️⃣ 브랜치 추출</strong></h2>🎜위 예제에서 정의한 <code>describeForNameMap 객체는 독립적인 구조이므로 완전히 추출할 수 있습니다. ：🎜rrreeerrreee🎜모듈식 개발을 통해 이 map 개체를 별도의 js 파일에 작성한 다음 필요한 위치로 가져올 수도 있습니다. 🎜

4️⃣ 논란

🎜 이렇게 하면 전체 getUserDescribe 함수가 매우 간결해집니다. 일부 학생들은 이것이 무슨 의미인지 묻습니다. 무엇을 사용하나요? 이게 더 문제가 아닌데? 정말 if else가 좋지 않다고 생각한다면 else 대신 if return을 사용하겠습니다. 🎜rrreee🎜상상해 보세요. getUserDescribe 함수에 1000개의 판단 분기가 있고, 판단 결과에 따라 실행되는 처리 코드도 많고, getUserDescribe 함수가 처리된 판정 결과의 값을 반환합니다. 🎜🎜이때, getUserDescribe 함수의 강조는 결과를 얻는 분기가 아닌 판정 결과 처리에 있습니다. , 예: 🎜rrreee🎜분기 최적화를 수행하지 않으면 getUserDescribe 함수가 다수의 if 분기에 의해 점유되어 >getUserDescribe 기능이 손실되었습니다(getUserDescribe 기능은판정 결과 처리에 중점을 두고 결과를 얻은 분기가 아닌) 다음을 수행할 수 있습니다. 최적화된 코드를 살펴보세요. 🎜 rrreee🎜최적화된 getUserDescribe 함수를 보면 describeForNameMap에서 값을 가져와 str(<code>describeForNameMap가 값을 어떻게 반환하는지 상관하지 않음) 그런 다음 <code>str에서 일부 처리를 수행했습니다. 이는 getUserDescribe 함수(판정 결과 str 처리)의 초점을 강조합니다. 🎜

🎜이 예에서 describeForNameMap 하위 배열의 두 번째 요소는 [(name) => name.length > "]이지만 전체 코드의 확장성을 위해서는 함수를 사용하는 것이 좋습니다. 함수는 매개변수를 받을 수 있기 때문에 앞으로 더 복잡한 시나리오를 더 쉽게 처리할 수 있기 때문입니다. 🎜

? 결론

Branch Optimization은 다양한 언어에서 다양한 구현 방법과 적용 시나리오를 제공합니다. 이 기사에서는 JavaScript를 통해 코드 분기 최적화에 대한 두 가지 아이디어를 소개합니다. 이 아이디어를 적용하고 있습니다. JavaScript介绍了两种代码分支优化的思想，代码的实现非常简单，重点在于这种思想的应用。

其实关于分支优化这个问题一直存在争议，目前存在两种观点：

观点1：压根不需要多此一举去优化它，并且优化后的代码因为多创建了一个对象/数组，对对象/数组进行检索反而比单纯的if else还是废性能。
观点2：分支优化后的代码可读性/可维护性更好，并且引入对象/数组

View 1
: 최적화할 필요가 전혀 없으며, 최적화된 코드가 생성됩니다. 추가 객체/배열, 객체/배열 검색은 단순히 if else보다 더 비효율적입니다.
관점 2: 분기 최적화 후의 코드는 가독성/유지관리성이 더 좋고, 객체/배열 도입으로 인한 성능 문제는 언급할 가치가 없습니다. 이 시대에. 🎜🎜당신의 의견은 무엇입니까? 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜

위 내용은 한 기사에서는 분기 최적화 시 JavaScript를 구현하는 방법을 설명합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!