In einem Artikel erfahren Sie, wie Sie JavaScript bei der Verzweigungsoptimierung implementieren-js-Tutorial-php.cn

1000 Urteilsbedingungen erfordern das Schreiben von 1000 Wenns? Wie optimiert man die if-Branch-Anweisung? Im folgenden Artikel erfahren Sie, wie Sie eine Filialoptimierung erreichen können. Ich hoffe, er ist für alle hilfreich!

In einem Artikel erfahren Sie, wie Sie JavaScript bei der Verzweigungsoptimierung implementieren

Ich habe kürzlich beim Surfen im Internet diesen Code gesehen:

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

Nach dem Login kopieren

Ich habe auf den ersten Blick nichts Ungewöhnliches gespürt, aber wenn es 1000 Beurteilungsbedingungen gibt, ist es dann schwierig, 1000 if in zu schreiben? hier entlang? Branch? 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("此人比较神秘！");
}

Nach dem Login kopieren

问题代码中的判断都是简单的相等判断，那么我们就可以将这些判断条件作为一个属性写到对象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("此人比较神秘！");
    }
}

Nach dem Login kopieren

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

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

Nach dem Login kopieren

上面我们定义了一个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("此人比较神秘！");
}

Nach dem Login kopieren

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

Nach dem Login kopieren

通过模块化的开发也可以将这个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("此人比较神秘！");
}

Nach dem Login kopieren

试想一下，如果你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;
}

Nach dem Login kopieren

如果你不进行分支优化，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;
}

Nach dem Login kopieren

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

在这个例子中describeForNameMap子数组的第二个元素完全可以直接使用一个值：[(name) => name.length > 3, "名字太长"]
Wenn Sie eine große Anzahl von if-Zweigen schreiben und möglicherweise auch Zweige innerhalb der Zweige haben, können Sie sich vorstellen, dass die Lesbarkeit und Wartbarkeit des gesamten Codes stark eingeschränkt wird . Das ist in der Tat ein Problem. Gibt es also eine Möglichkeit, die Anforderungen zu erfüllen und diese Probleme zu vermeiden? [Empfohlenes Lernen: Javascript-Video-Tutorial]🎜1️⃣ Einfache Zweigoptimierung🎜Dies beinhaltet Zweigoptimierung. Lassen Sie uns unsere Denkweise ändern und die obige Codestruktur optimieren: 🎜rrreee🎜Problemcode Die Urteile in Sind alle einfache Gleichheitsurteile, können wir diese Urteilsbedingungen als Attribut in das Objekt describeForNameMap schreiben. Die Werte, die diesen Attributen entsprechen, sind, wenn die Bedingungen festgelegt sind. Die endgültige Verarbeitungsfunktion. 🎜🎜Danach müssen wir nur noch den entsprechenden Wert im describeForNameMap-Objekt über die von der Funktion getUserDescribe empfangenen Parameter abrufen. Wenn der Wert vorhanden ist, führen Sie den Wert aus (weil der Wert ist eine Funktion). 🎜🎜Auf diese Weise wird die ursprüngliche if-Zweigbeurteilung in einen einfachen key value entsprechenden Wert umgewandelt. Die Bedingungen und Verarbeitungsfunktionen entsprechen eins zu eins und machen es klar Blick. 🎜
2️⃣ Komplexe Zweigoptimierung
🎜Wenn die Beurteilungsbedingung in unserem if-Zweig nicht nur eine einfache Gleichheitsbeurteilung ist, sondern auch einige Berechnungen enthält Der Ausdruck muss berechnet werden. Was sollen wir tun? (Wie unten gezeigt) 🎜rrreee🎜Für diese Codestruktur können keine Objekte zur Zweigoptimierung eingeführt werden. Wir können ein zweidimensionales Array zur Zweigoptimierung einführen: 🎜rrreee🎜 Oben haben wir einen definiert beschreibenForNameMap Array, jedes Element im Array stellt eine Reihe von Beurteilungsbedingungen und Ausführungsfunktionen dar (auch ein Array), und dann finden wir describeForNameMap über die <code>find-Methode des Arrays Das Unterarray im Array, das die Beurteilungsbedingungen erfüllt, ist ausreichend. 🎜
3️⃣ Zweig extrahieren
🎜Das describeForNameMap-Objekt, das wir im obigen Beispiel definiert haben, ist eine unabhängige Struktur und wir können es vollständig extrahieren: 🎜rrreeerrreee🎜Durch modulare Entwicklung können Sie dieses map-Objekt auch in eine separate js-Datei schreiben und es dann dort importieren, wo Sie es verwenden müssen. 🎜

4️⃣ Kontroverse

🎜Auf diese Weise wird die gesamte getUserDescribe-Funktion sehr prägnant. Einige Schüler fragen sich möglicherweise, wozu das dient ? Was soll ich verwenden? Ist das nicht problematischer? Wenn Sie wirklich nicht glauben, dass if else gut aussieht, dann verwende ich einfach if return anstelle von else: 🎜rrreee🎜Stellen Sie sich vor, Wenn Sie die Funktion getUserDescribe haben, gibt es 1000 Beurteilungszweige und es gibt auch eine große Anzahl von Verarbeitungscodes, die basierend auf den Beurteilungsergebnissen ausgeführt werden, und die Funktion getUserDescribe wird dies tun Gibt den Wert des verarbeiteten Beurteilungsergebnisses zurück. 🎜🎜Zu diesem Zeitpunkt liegt der Schwerpunkt der getUserDescribe-Funktion auf der Verarbeitung des Beurteilungsergebnisses und nicht darauf, in welchem Zweig das Ergebnis erhalten wird , zum Beispiel: 🎜rrreee🎜Wenn Sie keine Zweigoptimierung durchführen, wird die Funktion getUserDescribe von einer großen Anzahl von if-Zweigen belegt, wodurch der Fokus auf getUserDescribe-Funktion verloren ( Die getUserDescribe-Funktionkonzentriert sich auf die Verarbeitung des Beurteilungsergebnisses und nicht darauf, über welchen Zweig das Ergebnis erhalten wird), dann können Sie es verwenden Schauen Sie sich unseren optimierten Code an: 🎜 rrreee🎜Wenn wir uns die optimierte Funktion getUserDescribe ansehen, können wir erkennen, dass sie einen Wert von describeForNameMap erhält und ihn str (<code>describeForNameMap den Wert zurückgibt) und dann etwas an <code>str verarbeitet. Dies unterstreicht den Schwerpunkt der Funktion getUserDescribe (Verarbeitung des Beurteilungsergebnis str). 🎜

🎜In diesem Beispiel kann das zweite Element des Subarrays describeForNameMap direkt einen Wert verwenden: [(name) => "], aber für die Skalierbarkeit des gesamten Codes wird die Verwendung von Funktionen empfohlen, da Funktionen Parameter empfangen können, was den Umgang mit komplexeren Szenarien in der Zukunft erleichtert. 🎜

? Fazit

Branch-Optimierung Es gibt verschiedene Implementierungsmethoden und Anwendungsszenarien. In diesem Artikel werden zwei Ideen zur Code-Branch-Optimierung durch JavaScript vorgestellt liegt in der Anwendung dieser Idee. JavaScript介绍了两种代码分支优化的思想，代码的实现非常简单，重点在于这种思想的应用。

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

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

Ansicht 1
: Es besteht überhaupt keine Notwendigkeit, sich um die Optimierung zu kümmern, und der optimierte Code erstellt ein zusätzlicher Object/array, das Abrufen von object/array ist ineffizienter als einfach if else.
Ansicht 2: Der Code nach der Verzweigungsoptimierung weist eine bessere Lesbarkeit/Wartbarkeit auf, und die durch die Einführung von object/array verursachten Leistungsprobleme sind nicht erwähnenswert in der heutigen Zeit. 🎜🎜Was ist deine Meinung? 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmierlehre🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonIn einem Artikel erfahren Sie, wie Sie JavaScript bei der Verzweigungsoptimierung implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!