[Diccionario front-end] Desde returnWeekday () en if () optimización del código de la declaración

Prefacio

Recientemente, el departamento está haciendo algunas optimizaciones en el código anterior. Vi una serie de juicios lógicos if () {} elseif () {} en el código. Obviamente, esto tiene margen de optimización.

Dado que el código interno no es adecuado para compartir, usaré <salida de hoy como día de la semana> para hablar sobre algunas soluciones para la optimización del juicio lógico.

Aquí hay una declaración primero para evitar dudas:

Es probable que lo que usemos en el proyecto tenga múltiples niveles de anidamiento, a diferencia de mi ejemplo, que solo tiene un nivel. Sin embargo, la idea de optimización es aproximadamente la misma. Debido a que el método returnWeekday () es excepcionalmente simple, declárelo con anticipación.
demanda

Escriba un método returnWeekday () para devolver "Hoy es la semana *".

A continuación lo llevaremos paso a paso.

proceso de optimización

Aquí simplemente lo divido en "principiante -> entrada -> intermedio" estas etapas.

Principiante

Cuando comenzamos a obtener los requisitos y vimos una serie de juicios lógicos, lo primero que nos vino a la mente debería ser la declaración if.

el código se muestra a continuación:

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

Cuando terminamos de escribir dicho código, la primera impresión es si hay demasiados bloques elseif.

Pero mientras todavía estamos pensando en cómo optimizar, el producto le enviará un mensaje en Dingding para preguntarle cómo se cumple este requisito. También trajo un paquete de emojis sonrientes. En este momento te dices a ti mismo, hablemos de esta optimización más adelante. Pero con el tiempo, se agrega demanda. Esto nunca se optimizó de nuevo hasta que asumió el siguiente.

El código anterior tiene demasiados bloques elseif, lo que lo hace incómodo de ver.

Cuando estábamos viendo "Programación avanzada de JavaScript", vimos esta oración:

La declaración de cambio está más estrechamente relacionada con la declaración if, y también es una declaración de control de flujo que se usa comúnmente en otros idiomas.

Entonces, ¿podemos considerar usar la declaración de cambio para optimizarlo?

empezando

Aquí usamos la declaración de cambio para optimizar el código.

Nota: La declaración de cambio utiliza el operador congruente al comparar valores y no habrá conversión de tipo.

el código se muestra a continuación:

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

Concatenamos caracteres en el caso para lograr el propósito de generar el resultado esperado. La estructura aquí parece un poco más clara que la declaración if. ¿Pero todavía un poco confundido?

Supongamos que un día, la organización relevante descubre que el horóscopo ha cambiado. Tiene que ser ocho días a la semana (pensando en el producto, no te lo imaginas). Nuestro método returnWeekday () necesita una capa adicional de juicio.

Nuestra esperanza es que el método encapsulado no se modifique con frecuencia. Pero los cambios en la demanda están fuera de su control.

Así que seguimos pensando en cómo optimizar.

intermedio

Vemos que el caso aquí es un número, que es consistente con el subíndice de la matriz.

Es decir: ['天', 'uno', 'dos', 'tres', 'cuatro', 'cinco', 'seis'] subíndices.

Entonces, podemos considerar el uso de matrices para optimizar.

el código se muestra a continuación:

function returnWeekday(){

    let string = "今天是星期";

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

    // 使用数组

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

    return string + dateArr[date]

}

console.log(returnWeekday())

El código anterior es mucho más claro que la declaración de cambio y la declaración if. E incluso si la semana se convierte en ocho días, simplemente modifique la matriz dateArr.

¿Qué pasa si cada uno de nuestros casos es una cadena irregular? Luego usamos objetos, cada caso es una clave

el código se muestra a continuación:

function returnWeekday(){

    let string = "今天是星期";

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

    // 使用对象

    dateObj = { 

        0: '天', 

        1: "一", 

        2: "二", 

        3: "三", 

        4: "四", 

        5: "五", 

        6: "六", 

    };

    return string + dateObj[date]

}

console.log(returnWeekday())

El uso anterior de escritura de matriz u objeto mejora la legibilidad del código y al mismo tiempo se vuelve más fácil de mantener.

Usar el método de carácter charAt

Las cadenas tienen un método similar al uso de subíndices de matriz:

// charAt 定位方法

function returnWeekday(){

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

}

console.log(returnWeekday())

Cambios de demanda

En este momento, algunas personas esperan que el método returnWeekday () no solo devuelva el día de la semana de hoy, sino que también deba distinguir entre días laborables y días de descanso y llamar a métodos relacionados.

Si usa switch, if o array, es un poco difícil de mantener y hay muchos lugares para reescribir.

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

Otros métodos de optimización habituales

A continuación, se muestran algunos métodos de optimización habituales.

Operación ternaria

Adecuado para situaciones sencillas 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 esta manera, la legibilidad no se reduce cuando se simplifica el código.

Operador lógico AND

A veces podemos usar el operador lógico AND para simplificar el código

if( falg ){

    someMethod()

}

Puede cambiarse a:

falg && someMethod();

El uso incluye para manejar múltiples condiciones

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

    someMethod()

}

Puede cambiarse a

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

    someMethod()

}

Plan de salida de artículos relacionados con Vue

Recientemente, mis amigos siempre me hacen preguntas relacionadas con Vue, por lo que publicaré 10 artículos relacionados con Vue a continuación, con la esperanza de ser útil para todos. Mantendré una actualización en 7 a 10 días.

1. El proceso de inyección de Vuex en el ciclo de vida de Vue (completado)

2. La reserva de conocimiento necesaria para aprender el código fuente de Vue (completado)

3. Análisis del principio de respuesta de Vue (completado)

4. El proceso de parchear VNodes nuevos y antiguos

5. Cómo desarrollar componentes funcionales y cargar npm

6. Optimiza tu proyecto Vue desde estos aspectos

7. Hablando sobre el desarrollo de enrutamiento de front-end desde el diseño de Vue-Router

8. Cómo utilizar Webpack correctamente en el proyecto

9. Representación del servidor Vue

10. Cómo elegir entre Axios y Fetch

Te sugiero que prestes atención a mi cuenta oficial, puedes recibir los últimos artículos lo antes posible.

Si desea unirse al intercambio grupal, puede escanear el código para unirse al grupo usted mismo: