찾다

집 >웹 프론트엔드 >JS 튜토리얼 >한 기사에서는 JavaScript에서 분기 최적화를 구현하는 방법을 설명합니다.

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

WBOY
WBOY앞으로
2022-11-15 17:00:571794검색

이 기사에서는 브랜치 최적화에 대한 관련 내용을 주로 소개하는 JavaScript에 대한 관련 지식을 제공합니다. 판단 조건이 많은 경우 if 브랜치를 많이 사용하면 전체 코드의 가독성과 가독성이 크게 향상됩니다. 모두에게 도움이 되기를 바랍니다.

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

[관련 추천: JavaScript 동영상 튜토리얼, web front-end]

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

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("此人比较神秘！");
    }}

첫눈에는 별다른 느낌이 없었습니다. , 그런데 1,000개가 있으면 조건을 판단하려면 이런 작성 방식으로 if 브랜치를 1000개 작성하기 어려운가요? if 分支？

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

简单分支优化

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

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对应值，条件与处理函数一一对应，一目了然。

复杂分支优化

那如果我们的 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数组中符合判断条件的子数组即可。

抽离分支

上面例子中我们定义的这个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文件，之后在需要使用的地方导入即可。

争议

这样一来整个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많은 수의 if 브랜치를 작성하고 브랜치 내에 브랜치

도 있을 수 있다면 전체 코드의 가독성과 유지 관리성이 크게 떨어진다고 생각할 수 있습니다. 이는 사실입니다. 실제 개발에서는 다소 까다로운 문제입니다. 요구 사항을 충족하고 이러한 문제를 피할 수 있는 방법이 있습니까? 🎜

🎜간단한 분기 최적화

🎜여기에는 🎜분기 최적화🎜가 포함됩니다. 생각을 바꾸고 위의 코드 구조를 최적화해 보겠습니다. 🎜rrreee🎜문제 코드에서 판단은 다음과 같습니다. 모두 단순 🎜평등 판단🎜이라면 이러한 판단 조건을 describeForNameMap 개체에 속성으로 작성할 수 있습니다. 이러한 속성에 해당하는 값은 조건이 설정된 후 처리 기능입니다. 🎜🎜이후에는 getUserDescribe 함수에서 받은 매개변수를 통해 describeForNameMap 개체에서 해당 값만 가져오면 됩니다. 값은 함수입니다). 🎜🎜이렇게 하면 원래 if 분기 판단이 간단한 키 값 해당 값으로 변환되어 조건과 처리 기능이 일대일로 대응되므로 한 번에 명확해집니다. 섬광. 🎜

🎜복잡한 분기 최적화

🎜그러면 우리 if 분기의 판단 조건이 단순한 동등 판단뿐만 아니라 몇 가지 계산도 포함한다면 계산해야 하는 표현식이 이면 어떻게 해야 합니까? (아래 참조) 🎜rrreee🎜이 코드 구조에서는 분기 최적화를 위해 객체를 도입할 수 없습니다. 분기 최적화를 위해 🎜2차원 배열🎜을 도입할 수 있습니다. 🎜rrreee🎜위에서 describeForNameMap을 정의했습니다. Array, 배열의 각 요소는 일련의 판단 조건과 실행 함수(또한 배열)를 나타내며, 배열의 <code>find 메소드를 사용하여 describeForNameMap을 찾습니다. 배열 판정 조건에 맞는 하위 배열을 선택하면 됩니다. 🎜

🎜Detach Branch

🎜위 예제에서 정의한 describeForNameMap 객체는 독립적인 구조이므로 완전히 분리할 수 있습니다. 🎜rrreeerrreee
🎜모듈식 개발을 통해 이 map 개체를 별도의 js 파일에 작성한 다음 필요한 곳에 가져올 수도 있습니다. 🎜

🎜논쟁

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

이 예에서 describeForNameMap 하위 배열의 두 번째 요소는 [(name) => name.length > 3, "The name is too long" 값을 직접 사용할 수 있습니다. ]이지만, 전체적인 코드의 확장성을 위해서는 함수를 사용하는 것이 좋습니다. 왜냐하면 함수는 매개변수를 받을 수 있기 때문에 앞으로 더 복잡한 시나리오를 더 쉽게 처리할 수 있기 때문입니다. describeForNameMap子数组的第二个元素完全可以直接使用一个值：[(name) => name.length > 3, "名字太长"]，但为了整体代码的可扩展性，推荐还是使用函数，因为函数可以接收参数，方便应对之后更复杂的场景。

结语

分支优化在各种语言中都有不同的实现方式和应用场景，本篇通过JavaScript介绍了两种代码分支优化的思想，代码的实现非常简单，重点在于这种思想的应用。

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

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

    • 결론
분기 최적화에는 다양한 언어로 구현 방법과 적용 시나리오가 다릅니다. 이 문서에서는 JavaScript를 전달합니다. 는 코드 분기 최적화에 대한 두 가지 아이디어를 소개합니다. 코드 구현은 매우 간단하며 이 아이디어의 적용에 중점을 둡니다.

사실 브랜치 최적화 문제에 대해 논란이 있어왔습니다. 현재 두 가지 보기가 있습니다:

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

JavaScript if Length map JS 对象
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：Node+mysql의 SQL 인젝션을 설명하는 글다음 기사：Node+mysql의 SQL 인젝션을 설명하는 글

관련 기사

더보기