Varios consejos prácticos de optimización de JavaScript que vale la pena conocer

Cómo comenzar rápidamente con VUE3.0: Ingrese al aprendizaje

"Dificultad:?" " Tiempo de lectura recomendado: 5 min "

El video principal

• Una vez que escribimos más de dos funciones if...else

.

• , deberíamos pensar si existe un mejor método de optimización.
• Por ejemplo, ahora necesitamos calcular el precio de la comida en Mai Lao según el nombre, puedes hacer esto.

• Esta forma de escribir hará que el cuerpo de la función tenga muchas declaraciones de juicio condicional. Cuando queramos agregar un producto la próxima vez, necesitamos modificar la lógica en la función y agregar una declaración if...else . abrir y cerrar hasta cierto punto. El principio es que cuando necesitamos agregar una lógica, debemos intentar resolver el cambio en los requisitos extendiendo la entidad de software en lugar de modificar el código existente para completar el cambio.
• Este es un método de optimización muy clásico. Podemos usar una estructura de datos similar a Map para guardar todos los productos. Aquí creamos directamente un objeto para almacenarlo.

• De esta manera, no necesitamos cambiar la lógica de getPrice la próxima vez que necesitemos agregar otro producto. Por supuesto, a más personas aquí les gusta usar foodMap directamente donde se usa. esta idea.
• Entonces algunos estudiantes preguntarán en este momento, ¿qué pasa si no quiero usar solo cadenas para key ? Entonces puedes usar new Map . La idea es similar y se extiende una entidad adicional para almacenar cambios.

Las operaciones de canalización reemplazan los bucles redundantes.

• Existe una lista de alimentos de Mai Moulao.

• Si quisieras encontrar la comida que pertenece al Conjunto 1, ¿cómo la encontrarías?
• Lo anterior es un método que usamos a menudo antes. Obviamente, nuestro reemplazo con filter y map en lugar de bucle for no solo puede simplificar el código, sino que también puede hacer que la semántica sea más clara. La matriz se过滤primero y luego重组.

Buscar reemplaza el bucle redundante

• o el ejemplo anterior. Si queremos encontrar un alimento específico de acuerdo con el valor del atributo en esta matriz de objetos de alimento, surge el uso de find .

incluye reemplaza bucles redundantes

• Similar a los dos detalles anteriores, todas estas son funciones existentes, es decir, funciones integradas que no es necesario que las reescribamos si las utilizamos con habilidad, ahorraremos mucho tiempo.
• Como todos sabemos, un plato de fideos de carne en escabeche Kang Fu Lao Tan consiste en chucrut , fideos , cubos de carne , colillas de cigarrillos y piel de pies . Por eso queremos usar una función para verificar si hay piel de pies en estos fideos. ¿Lo escribimos de forma más concisa?

• De manera similar, no solo se pueden reproducir así el chucrut y los fideos con carne de Kang Fu , sino que todas las operaciones similares para encontrar elementos específicos en una matriz se pueden llamar usando la función includes .

resultado valor de retorno

• Cuando escribimos algunas funciones con valores de retorno, a menudo tenemos dificultades para nombrar la variable de valor de retorno, incluso para algunas funciones largas, no usamos variables sino que return directamente. Este hábito es realmente malo porque necesitamos aclarar la lógica. nuevamente cuando hagamos referencia a este código la próxima vez.
• Por lo general, en una función pequeña, podemos usar result como valor de retorno.

Retorno anticipado

• Sin embargo, el uso result como valor de retorno anterior no se aplica a todas las situaciones. A veces necesitamos finalizar el cuerpo de la función antes de tiempo para evitar que colegas posteriores lean programas redundantes.

• En el siguiente ejemplo, cuando nuestra selectedKey no existe, debemos return inmediatamente, de modo que no necesitemos continuar leyendo el siguiente código, de lo contrario aumentará mucho el costo de lectura al enfrentar funciones más complejas.

Para mantener el objeto intacto

• , a menudo cuando obtenemos los datos devueltos por el backend a través de una solicitud, se procesarán de acuerdo con algunos de los atributos. Si hay pocos atributos que deban procesarse, muchos estudiantes estarán acostumbrados a utilizarlos. primer método.
• Pero, de hecho, este hábito es malo, porque cuando no esté seguro de si esta función necesita agregar atributos de dependencia en el futuro, debe mantener la integridad del objeto. Como mencioné en mi último artículo, aprenda a aceptar los cambios . getDocDetail no se limita a usar icon y content , puede haber atributos como title y date en el futuro, por lo que también podríamos pasar el objeto completo directamente, lo que no solo acortará la lista de parámetros sino que también hará que el código sea más legible.

Uso inteligente de operadores

• Cuando necesitamos crear una nueva variable y, a veces, necesitamos verificar si la variable a la que hace referencia su valor es null o no está definida, podemos usar escritura simple.

Al final de la escritura

• , en primer lugar, me gustaría agradecerles a todos por leer esto. Compartiré este artículo aquí y resumiré algunos métodos de optimización muy básicos, espero que pueda ayudar a todos.

[Tutoriales en vídeo relacionados recomendados: interfaz web]

Los anteriores son los detalles de varios consejos prácticos de optimización de JavaScript que vale la pena conocer. Para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de PHP.