[Dictionnaire frontal] De returnWeekday () sur l'optimisation du code de l'instruction if ()

Préface

Récemment, le département a fait quelques optimisations sur le code précédent. J'ai vu une série de jugements logiques if () {} elseif () {} dans le code. Cela peut évidemment être optimisé.

Puisque le code interne n'est pas adapté au partage, j'utiliserai <la sortie aujourd'hui comme jour de la semaine> pour parler de quelques solutions d'optimisation du jugement logique.

Voici d'abord une déclaration pour éviter tout doute:

Ce que nous utilisons dans le projet est susceptible d'avoir plusieurs niveaux d'imbrication, contrairement à mon exemple, qui n'a qu'un seul niveau. Cependant, l'idée d'optimisation est à peu près la même. La méthode returnWeekday () étant exceptionnellement simple, déclarez-la à l'avance.
demande

Écrivez une méthode returnWeekday () pour renvoyer "Aujourd'hui, c'est la semaine *".

Ensuite, nous allons procéder étape par étape.

processus d'optimisation

Ici, je le divise simplement en "débutant -> entrée -> intermédiaire" ces étapes.

Débutant

Lorsque nous avons commencé à comprendre les exigences et que nous avons vu une série de jugements logiques, la première chose qui nous est venue à l'esprit devrait être l'énoncé if.

code montrer comme ci-dessous:

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())

Lorsque nous avons fini d'écrire un tel code, la première impression est de savoir s'il y a trop de blocs elseif.

Mais pendant que nous réfléchissons encore à la façon d'optimiser, le produit vous enverra un message sur Dingding pour vous demander comment cette exigence est remplie? Il a également apporté un paquet d'emoji narquois. A ce moment vous vous dites, parlons de cette optimisation plus tard. Mais avec le temps, la demande s'ajoute. Cela n'a jamais été optimisé jusqu'à ce que le suivant prenne le relais.

Le code ci-dessus a trop de blocs elseif, ce qui le rend inconfortable à regarder.

Lorsque nous regardions "Programmation avancée JavaScript", nous avons vu cette phrase:

L'instruction switch est plus étroitement liée à l'instruction if, et c'est également une instruction de contrôle de flux couramment utilisée dans d'autres langages.

Alors pouvons-nous envisager d'utiliser l'instruction switch pour l'optimiser?

commencer

Ici, nous utilisons l'instruction switch pour optimiser le code.

Remarque: l'instruction switch utilise l'opérateur congruent lors de la comparaison des valeurs, et il n'y aura pas de conversion de type.

code montrer comme ci-dessous:

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())

Nous concaténons les caractères dans le cas pour atteindre l'objectif de sortie du résultat attendu. La structure ici semble un peu plus claire que l'instruction if. Mais toujours un peu confus?

Supposons qu'un jour, l'organisation concernée découvre que l'horoscope a changé. Cela doit être huit jours par semaine (réflexion sur les produits, vous ne pouvez pas imaginer). Notre méthode returnWeekday () nécessite une couche supplémentaire de jugement.

Nous espérons que la méthode encapsulée ne devrait pas être modifiée fréquemment. Mais les changements de la demande sont indépendants de votre volonté.

Nous continuons donc à réfléchir à la manière d'optimiser.

intermédiaire

On voit que le cas ici est un nombre, ce qui est cohérent avec l'indice du tableau.

À savoir: [«天», «un», «deux», «trois», «quatre», «cinq», «six»] indices.

Nous pouvons donc envisager d'utiliser des tableaux pour optimiser.

code montrer comme ci-dessous:

function returnWeekday(){

    let string = "今天是星期";

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

    // 使用数组

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

    return string + dateArr[date]

}

console.log(returnWeekday())

Le code ci-dessus est beaucoup plus clair que l'instruction switch et l'instruction if. Et même si la semaine devient huit jours, modifiez simplement le tableau dateArr.

Et si chacun de nos cas était une chaîne irrégulière? Ensuite, nous utilisons des objets, chaque cas est une clé

code montrer comme ci-dessous:

function returnWeekday(){

    let string = "今天是星期";

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

    // 使用对象

    dateObj = { 

        0: '天', 

        1: "一", 

        2: "二", 

        3: "三", 

        4: "四", 

        5: "五", 

        6: "六", 

    };

    return string + dateObj[date]

}

console.log(returnWeekday())

L'utilisation ci-dessus de l'écriture de tableaux ou d'objets améliore la lisibilité du code et en même temps devient plus facile à maintenir.

Utiliser la méthode de caractère charAt

Les chaînes ont une méthode similaire à l'utilisation des indices de tableau:

// charAt 定位方法

function returnWeekday(){

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

}

console.log(returnWeekday())

Changements de la demande

À l'heure actuelle, certaines personnes espèrent que la méthode returnWeekday () renvoie non seulement le jour de la semaine d'aujourd'hui, mais doit également faire la distinction entre les jours ouvrables et les jours de repos et les méthodes liées aux appels.

Si vous utilisez switch, if ou array, la maintenance est un peu difficile et il existe de nombreux endroits à réécrire.

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))

Autres méthodes d'optimisation courantes

Voici quelques méthodes d'optimisation courantes.

Opération ternaire

Convient aux situations simples 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;

}

De cette manière, la lisibilité n'est pas réduite lorsque le code est rationalisé.

Opérateur ET logique

Parfois, nous pouvons utiliser l'opérateur logique AND pour simplifier le code

if( falg ){

    someMethod()

}

Peut être changé en:

falg && someMethod();

Utiliser comprend pour gérer plusieurs conditions

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

    someMethod()

}

Peut être changé en

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

    someMethod()

}

Plan de sortie des articles liés à Vue

Récemment, des amis m'ont toujours posé des questions sur les questions liées à Vue, donc je publierai 10 articles liés à Vue ensuite, dans l'espoir d'aider tout le monde. Je garderai une mise à jour dans 7 à 10 jours.

Le processus d'injection de Vuex dans le cycle de vie de Vue (terminé)
La réserve de connaissances nécessaire pour apprendre le code source de Vue (terminé)
Analyse du principe de réponse de Vue (terminé)
Le processus de correction des nouveaux et anciens VNodes
Comment développer des composants fonctionnels et télécharger npm
Optimisez votre projet Vue à partir de ces aspects
Parler du développement du routage frontal à partir de la conception Vue-Router
Comment utiliser correctement Webpack dans le projet
Rendu du serveur Vue
Comment choisir entre Axios et Fetch

Je vous suggère de faire attention à mon compte officiel, vous pouvez recevoir les derniers articles dès que possible.

[Dictionnaire frontal] De returnWeekday () sur l'optimisation du code de l'instruction if ()

Si vous souhaitez rejoindre l'échange de groupe, vous pouvez scanner le code pour rejoindre le groupe par vous-même: