Un article vous apprend à implémenter l'optimisation des branches en JavaScript

Cet article vous apporte des connaissances pertinentes sur JavaScript, qui présente principalement le contenu pertinent sur l'optimisation des branches. S'il existe de nombreuses conditions de jugement, l'utilisation d'un grand nombre de branches if rendra l'ensemble du code plus lisible et plus lisible. réduit. Jetons-y un coup d'oeil. J'espère que cela sera utile à tout le monde.

[Recommandations associées : Tutoriel vidéo JavaScript, front-end web]

J'ai récemment vu ce morceau de code en surfant sur Internet :

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

À première vue, je n'ai rien ressenti d'inhabituel , mais s'il y en a 1 000. Pour juger des conditions, est-il difficile d'écrire 1 000 branches if selon cette façon d'écrire ? 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作了一些处理。这就突出了getUserDescribeSi vous écrivez un grand nombre de branches if, et que vous pouvez également avoir branche dans branche

, vous pouvez imaginer que la lisibilité et la maintenabilité de l'ensemble du code seront considérablement réduites. dans le développement réel, c'est un problème plutôt gênant. Existe-t-il un moyen de répondre aux exigences et d'éviter ces problèmes ? 🎜

🎜Optimisation simple des branches

🎜Cela implique une 🎜optimisation des branches🎜 Changeons notre façon de penser et optimisons la structure de code ci-dessus : 🎜rrreee🎜Dans le code du problème Les jugements sont. tout simple 🎜Jugement d'égalité🎜, nous pouvons alors écrire ces conditions de jugement en tant qu'attribut dans l'objet describeForNameMap. Les valeurs correspondant à ces attributs sont les fonctions de traitement une fois les conditions établies. 🎜🎜Après cela, il nous suffit d'obtenir la valeur correspondante dans l'objet describeForNameMap via les paramètres reçus par la fonction getUserDescribe Si la valeur existe, exécutez la valeur (car. la valeur est une fonction). 🎜🎜De cette façon, le jugement de branche if original est converti en une simple valeur correspondante valeur clé, et les conditions et fonctions de traitement correspondent une à une, ce qui le rend clair à un coup d'oeil. 🎜

🎜Optimisation de branche complexe

🎜Alors si la condition de jugement dans notre branche if n'est pas seulement un simple jugement d'égalité, mais comporte également quelques calculs qui doivent être calculés Que devons-nous faire lorsque l'expression est ? (Comme indiqué ci-dessous) 🎜rrreee🎜Pour cette structure de code, les objets ne peuvent pas être introduits pour l'optimisation des branches. Nous pouvons introduire un 🎜tableau bidimensionnel🎜 pour l'optimisation des branches : 🎜rrreee🎜 Ci-dessus, nous avons défini un describeForNameMap. Tableau, chaque élément du tableau représente un ensemble de conditions de jugement et de fonctions d'exécution (également un tableau), puis nous utilisons la méthode <code>find du tableau pour trouver le describeForNameMap array Sélectionnez simplement le sous-tableau qui répond aux conditions de jugement. 🎜

🎜Détacher la branche

🎜L'objet describeForNameMap que nous avons défini dans l'exemple ci-dessus est une structure indépendante, et nous pouvons la détacher complètement. Sortez : 🎜rrreeerrreee

🎜Grâce au développement modulaire, vous pouvez également écrire cet objet map dans un fichier js séparé, puis l'importer là où vous en avez besoin. 🎜

🎜Controverse

🎜De cette façon, l'ensemble de la fonction getUserDescribe devient très concis. Certains étudiants peuvent se demander pourquoi c'est quoi. c'est pour ? N'est-ce pas plus gênant ? Si vous ne pensez vraiment pas que if else a l'air bien, alors j'utiliserai simplement if return au lieu de else : 🎜rrreee🎜Imaginez, si vous Il y a 1 000 branches de jugement dans la fonction getUserDescribe, et il existe également un grand nombre de codes de traitement qui sont exécutés en fonction des résultats du jugement, et la fonction getUserDescribe renvoie la valeur du résultat du jugement traité. 🎜🎜À l'heure actuelle, l'🎜accent 🎜 de la fonction getUserDescribe est le 🎜le traitement🎜 du résultat du jugement, et non la branche par laquelle le résultat est obtenu, par exemple : 🎜rrreee🎜Si vous ne le faites pas effectuer l'optimisation des branches, la fonction getUserDescribe sera occupée par un grand nombre de branches if, rendant le focus de la fonction getUserDescribe perdu (getUserDescribe🎜 L'accent est mis sur le traitement du résultat du jugement 🎜, et non sur la branche sur laquelle le résultat est obtenu), vous pouvez alors jeter un œil à notre code optimisé : 🎜rrreee🎜Voir le optimisé Fonction getUserDescribe Nous pouvons savoir qu'elle obtient une valeur de describeForNameMap et l'attribue à str (nous ne nous soucions pas de la façon dont describeForNameMap renvoie la valeur), puis Un traitement a été effectué sur str. Cela met en évidence l'objectif de la fonction getUserDescribe (🎜traitement du résultat du jugement str🎜). 🎜

Dans cet exemple, le deuxième élément du sous-tableau describeForNameMap peut utiliser directement une valeur : [(name) => name.length > ], mais pour l'évolutivité du code global, il est recommandé d'utiliser des fonctions, car les fonctions peuvent recevoir des paramètres, ce qui facilite la gestion de scénarios plus complexes à l'avenir. describeForNameMap子数组的第二个元素完全可以直接使用一个值：[(name) => name.length > 3, "名字太长"]，但为了整体代码的可扩展性，推荐还是使用函数，因为函数可以接收参数，方便应对之后更复杂的场景。

结语

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

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

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

Conclusion

L'optimisation des branches a différentes méthodes d'implémentation et scénarios d'application dans différents langages. Cet article passe du JavaScript. introduit deux idées d'optimisation des branches de code. La mise en œuvre du code est très simple et l'accent est mis sur l'application de cette idée.

En fait, il y a eu une controverse sur la question de l'optimisation des branches. Il existe actuellement deux points de vue :

• Vue 1 : il n'est pas nécessaire de s'embêter à l'optimiser, et le le code optimisé est trop complexe. Un objet/tableau est créé, et récupérer l'objet/tableau est plus inefficace que simplement if else.
• Vue 2 : le code après optimisation de branche a une meilleure lisibilité/maintenabilité, et l'introduction de objet/tableau entraîne des problèmes de performances qui l’accompagnent ne valent tout simplement pas la peine d’être mentionnés de nos jours.
🎜【Recommandations associées : 🎜Tutoriel vidéo JavaScript🎜, 🎜front-end web🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!