[フロントエンド辞書] returnWeekday（）からif（）ステートメントコードの最適化

序文

最近、部門は前のコードに対していくつかの最適化を行っています。コード内に一連のif（）{} elseif（）{}論理判断が見られました。これには明らかに最適化の余地があります。

内部コードは共有に適していないため、<今日の出力を曜日として>を使用して、論理的な判断を最適化するためのいくつかのソリューションについて説明します。

疑いを避けるための最初のステートメントは次のとおりです。

プロジェクトで使用するものは、1つのレベルしかない私の例とは異なり、複数のレベルのネストがある可能性があります。ただし、最適化の考え方はほぼ同じです。returnWeekday（）メソッドは非常に単純なので、事前に宣言してください。
要求する

「今日は週*」を返すreturnWeekday（）メソッドを記述します。

次に、段階的に説明します。

最適化プロセス

ここでは、これらの段階を「初級->入門->中級」に単純に分けています。

初心者

要件を取得し始め、一連の論理的な判断を見たとき、最初に頭に浮かんだのはifステートメントです。

コードは次のように表示されます。

function returnWeekday(){

    let string = "今天是星期";

    let date = new Date().getDay();

    if (date === 0) {

        string += "日";

    } else if (date === 1) {

        string += "一";

    } else if (date === 2) {

        string += "二";

    } else if (date === 3) {

        string += "三";

    } else if (date === 4) {

        string += "四";

    } else if (date === 5) {

        string += "五";

    } else if (date === 6) {

        string += "六";

    }

    return string

}

console.log(returnWeekday())

そのようなコードを書き終えたときの第一印象は、elseifブロックが多すぎるかどうかです。

しかし、最適化の方法についてはまだ検討中ですが、製品はDingdingに関するメッセージを送信して、この要件がどのように満たされているかを尋ねます。彼はまた、にやにや笑いの絵文字パッケージを持ってきました。この時点で、あなたは自分自身に言い聞かせます、後でこの最適化について話しましょう。しかし、時間が経つにつれて、需要が追加されます。次のものが引き継ぐまで、これは二度と最適化されませんでした。

上記のコードにはelseifブロックが多すぎるため、見づらくなります。

「JavaScriptAdvancedProgramming」を見ていると、次のような文が表示されました。

switchステートメントはifステートメントと最も密接に関連しており、他の言語で一般的に使用されるフロー制御ステートメントでもあります。

では、switchステートメントを使用して最適化することを検討できますか？

入門

ここでは、switchステートメントを使用してコードを最適化します。

注：switchステートメントは、値を比較するときに一致演算子を使用し、型変換は行われません。

コードは次のように表示されます。

function returnWeekday(){

    let string = "今天是星期";

    let date = new Date().getDay();

    switch (date) {

        case 0 :

            string += "日";

            break;

        case 1 :

            string += "一";

            break;

        case 2 :

            string += "二";

            break;

        case 3 :

            string += "三";

            break;

        case 4 :

            string += "四";

            break;

        case 5 :

            string += "五";

            break;

        case 6 :

            string += "六";

            break;

    }

    return string

}

console.log(returnWeekday())

期待される結果を出力する目的を達成するために、ケース内の文字を連結します。ここでの構造は、ifステートメントよりも少し明確に見えます。しかし、それでも少し混乱していますか？

ある日、関連する組織がホロスコープが変更されたことを発見したとします。週に8日である必要があります（製品の考え方、想像もできません）。returnWeekday（）メソッドには、追加の判断レイヤーが必要です。

カプセル化されたメソッドを頻繁に変更しないことを望んでいます。しかし、需要の変化はあなたのコントロールを超えています。

そのため、最適化の方法について引き続き検討します。

中級

ここでのケースは数値であり、配列の添え字と一致していることがわかります。

つまり、[「天」、「1」、「2」、「3」、「4」、「5」、「6」]の添え字です。

したがって、配列を使用して最適化することを検討できます。

コードは次のように表示されます。

function returnWeekday(){

    let string = "今天是星期";

    let date = new Date().getDay();

    // 使用数组

    let dateArr = ['天','一','二','三','四','五','六'];

    return string + dateArr[date]

}

console.log(returnWeekday())

上記のコードは、switchステートメントおよびifステートメントよりもはるかに明確です。また、週が8日になった場合でも、dateArr配列を変更するだけです。

それぞれのケースが不規則な文字列である場合はどうなりますか？次に、オブジェクトを使用します。それぞれのケースが重要です

コードは次のように表示されます。

function returnWeekday(){

    let string = "今天是星期";

    let date = new Date().getDay();

    // 使用对象

    dateObj = { 

        0: '天', 

        1: "一", 

        2: "二", 

        3: "三", 

        4: "四", 

        5: "五", 

        6: "六", 

    };

    return string + dateObj[date]

}

console.log(returnWeekday())

上記の配列またはオブジェクトの書き込みを使用すると、コードの読みやすさが向上すると同時に、保守が容易になります。

charAt文字メソッドを使用する

文字列には、配列の添え字を使用するのと同様の方法があります。

// charAt 定位方法

function returnWeekday(){

    return "今天是星期" + "日一二三四五六".charAt(new Date().getDay());

}

console.log(returnWeekday())

需要の変化

現時点では、returnWeekday（）メソッドが今日の曜日を返すだけでなく、営業日と休憩日を区別して関連するメソッドを呼び出す必要があることを期待する人もいます。

switch、if、またはarrayを使用する場合、保守が少し面倒で、書き直す場所がたくさんあります。

function returnWeekday(){

    let string = "今天是星期";

    let date = new Date().getDay();

    // 使用对象

    dateObj = { 

        0: ['天','休'], 

        1: ["一",'工'], 

        2: ["二",'工'], 

        3: ["三",'工'], 

        4: ["四",'工'], 

        5: ["五",'工'], 

        6: ["六",'休'], 

    }

    // 类型，这里也可以对应相关方法

    dayType = {

        '休': function(){

            // some code

            console.log('为休息日')

        },

        '工': function(){

            // some code

            console.log('为工作日')

        }

    }

    let returnData = {

        'string' : string + dateObj[date][0],

        'method' : dayType[dateObj[date][1]]

    }

    return returnData

};

console.log(returnWeekday().method.call(this))

その他の一般的な最適化方法

一般的な最適化方法を次に示します。

三元操作

単純なif（）{} else {}の状況に適しています。

//滚动监听，头部固定

handleScroll: function () {

    let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;

    if( offsetTop < 0 ){

        this.titleFixed = true

    } else {

        this.titleFixed = false

    }

    // 改成三元

    (offsetTop < 0) ? this.titleFixed = true : this.titleFixed = false;

    // 我们发现条件块里面的赋值情况是布尔值，所以可以更简单

    this.titleFixed = offsetTop < 0;

}

このように、コードが合理化されても読みやすさが低下することはありません。

論理AND演算子

論理AND演算子を使用してコードを簡略化できる場合もあります

if( falg ){

    someMethod()

}

次のように変更できます。

falg && someMethod();

インクルードを使用して複数の条件を処理する

if( code === '202' || code === '203' || code === '204' ){

    someMethod()

}

に変更することができます

if( ['202','203','204'].includes(code) ){

    someMethod()

}

Vue関連記事の出力計画

最近は友達からいつもVueに関する質問がありますので、次回はVue関連の記事を10本出力して、皆様のお役に立てれば幸いです。更新は7〜10日で行います。

1. VuexをVueライフサイクルに注入するプロセス（完了）

2. Vueソースコードを学習するために必要な知識の予備（完成）

3. Vue応答原理の分析（完了）

4. 新旧のVNodeにパッチを適用するプロセス

5. 機能コンポーネントを開発してnpmをアップロードする方法

6. これらの側面からVueプロジェクトを最適化する

7. Vue-Router設計からのフロントエンドルーティング開発について話します

8. プロジェクトでWebpackを正しく使用する方法

9. Vueサーバーのレンダリング

10. AxiosとFetchのどちらを選択するか

私の公式アカウントに注意を払うことをお勧めします。できるだけ早く最新の記事を受け取ることができます。

グループ交換に参加したい場合は、コードをスキャンして自分でグループに参加できます。