ある記事では、JavaScript でブランチ最適化を実装する方法を説明しています。

この記事では JavaScript に関する知識を紹介しており、主に分岐の最適化に関する内容を紹介しています 判定条件が多い場合、if分岐を多用することでコード全体が読みやすくなり、メンテナンス性が大幅に低下しますので、見ていきましょう。

【関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド 】

最近、このビデオを見ました。ネットサーフィン こんな感じのコードです。

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 ブランチを記述し、ブランチ 内に ブランチも存在する可能性がある場合、コード全体の可読性と保守性が低下すると想像できます。実際の開発ではこれが頭の痛い問題ですが、これらの問題を回避しながら要件を達成する方法はあるのでしょうか?

単純なブランチの最適化

これには

ブランチの最適化 が含まれます。考え方を変えて、上記のコード構造を最適化してみましょう:

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 対応値に変換され、条件と処理関数が 1 対 1 に対応して明確になります。一目でわかる。

複雑な分岐の最適化

次に、

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

この構造のコードでは、分岐最適化のためにオブジェクトを導入できません。分岐最適化のために

2 次元配列 を導入できます:

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 が本当に適切ではない場合は、else の代わりに if return を使用します。

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 関数の focus は、どの分岐で結果が得られるかではなく、 判定結果の処理にあります。例:

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 Lost の関数に焦点を当てます (getUserDescribeFunction焦点は判定結果の処理です。 結果がどのブランチを通じて得られるかではありません)。最適化されたコード:

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サブ配列の 2 番目の要素で値を直接使用できます:[(name) => name.length > 3, "name Too long" ] ただし、コード全体のスケーラビリティを考慮すると、関数を使用することをお勧めします。関数はパラメーターを受け取ることができるため、将来的により複雑なシナリオに対処しやすくなります。

#結論

ブランチの最適化さまざまな言語でさまざまな実装方法と適用シナリオがあります。この記事では JavaScript# を採用します## では、コード ブランチの最適化に関する 2 つのアイデアを紹介します。コードの実装は非常に単純で、このアイデアの適用に重点が置かれています。 実は、ブランチの最適化の問題については議論があり、現在 2 つのビューがあります:

ビュー 1
• : わざわざ行う必要はありません最適化と最適化 次のコードは追加の オブジェクト/配列 を作成するため、 オブジェクト/配列 を取得することは、単純に if else を実行するよりもさらに無駄です。
視点 2
• : ブランチ最適化後のコード 可読性/保守性 は向上しており、object/array の導入によりパフォーマンスの問題が発生します。この時代では言及する価値はありません。
[関連する推奨事項:

JavaScript ビデオ チュートリアル

、Web フロントエンド ]

以上がある記事では、JavaScript でブランチ最適化を実装する方法を説明しています。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。