Cuando comencé a aprender JavaScript, lo primero que hice fue hacer una lista de trucos que me ayudaron a ahorrar tiempo. Los vi en otros programadores, en diferentes sitios y en manuales.
En este artículo, te mostraré 12 excelentes formas de mejorar y acelerar tu código JavaScript. En la mayoría de los casos son universales.
Recordamos: para todos los lectores de "Habr": un descuento de 10 rublos al inscribirse en cualquier curso de Skillbox utilizando el código promocional "Habr".
Skillbox recomienda: Curso práctico .
Filtrar valores únicos
Matrices
El tipo de objeto Set se introdujo en ES6, junto con el operador de extensión..., podemos usarlo para crear una nueva matriz que contenga solo valores únicos.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]En una situación normal, se necesita mucho más código para realizar la misma operación.
Esta técnica funciona para matrices que contienen tipos primitivos: indefinido, nulo, booleano, cadena y número. Si está trabajando con una matriz que contiene objetos, funciones o matrices adicionales, necesitará un enfoque diferente.
Longitud de la matriz de caché en ciclos
CICLOS
Cuando aprendes bucles for, sigues el procedimiento estándar:
for (let i = 0; i < array.length; i++){
console.log(i);
}Sin embargo, con esta sintaxis, el bucle for verifica repetidamente la longitud de la matriz en cada iteración.
A veces esto puede resultar útil, pero en la mayoría de los casos es más eficaz almacenar en caché la longitud de la matriz, lo que requerirá un acceso a ella. Podemos hacer esto definiendo una variable de longitud donde definimos la variable i, así:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}En principio casi igual que el anterior, pero aumentando el tamaño del bucle conseguiremos un importante ahorro de tiempo.
Clasificación de cortocircuito (clasificación McCarthy)
OPERADORES CONDICIONALES
El operador ternario es una forma rápida y eficiente de escribir declaraciones condicionales simples (y a veces no tan simples):
x > 100? “más de 100”: “menos de 100”;
x > 100? (x>200? "más de 200": "entre 100-200"): "menos de 100";
Pero a veces incluso el operador ternario es más complicado de lo necesario. Podemos usar 'y' && y 'o' en su lugar || Operadores booleanos para evaluar determinadas expresiones de una forma aún más concisa. A menudo se le llama "cortocircuito" o "clasificación de cortocircuito".
¿Cómo funciona esto
Digamos que queremos devolver solo una de dos o más condiciones.
El uso de && devolverá el primer valor falso. Si cada operando se evalúa como verdadero, se devolverá la última expresión evaluada.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Usando || devolverá el primer valor verdadero. Si cada operando se evalúa como falso, se devolverá el último valor evaluado.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullejemplo 1
Digamos que queremos devolver la longitud de una variable, pero no sabemos su tipo.
En este caso, puede utilizar if/else para comprobar que foo sea del tipo correcto, pero este método puede ser demasiado largo. Por tanto, es mejor tomar nuestro “cortocircuito”.
return (foo || []).length;Si la variable foo tiene una longitud adecuada, se devolverá. De lo contrario obtendremos 0.
ejemplo 2
¿Ha tenido problemas para acceder a un objeto anidado? Es posible que no sepa si existe un objeto o una de sus subpropiedades, y esto puede generar problemas.
Por ejemplo, queríamos acceder a la propiedad de datos en this.state, pero los datos no se definen hasta que nuestro programa devuelve una solicitud de recuperación.
Dependiendo de dónde lo usemos, llamar a this.state.data puede impedir que la aplicación se inicie. Para resolver el problema, podríamos envolver esto en una expresión condicional:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Una mejor opción sería utilizar el operador "o".
return (this.state.data || 'Fetching Data');No podemos cambiar el código anterior para usar &&. El operador 'Obteniendo datos' && this.state.data devolverá this.state.data independientemente de si no está definido o no.
Cadena opcional
Se podría sugerir el uso de encadenamiento opcional al intentar devolver una propiedad en lo más profundo de una estructura de árbol. Entonces, ¿el símbolo del signo de interrogación? se puede utilizar para recuperar una propiedad solo si no es nula.
Por ejemplo, podríamos refactorizar el ejemplo anterior para obtener this.state.data?...(). Es decir, los datos se devuelven sólo si el valor no es nulo.
O, si importa si el estado está definido o no, podríamos devolver this.state?.data.
Convertir a booleano
CONVERSIÓN DE TIPO
Además de las funciones booleanas normales verdadero y falso, JavaScript también trata todos los demás valores como verdaderos o falsos.
Hasta que se indique lo contrario, todos los valores en JavaScript son verdaderos, excepto 0, "", nulo, indefinido, NaN y, por supuesto, falso. Estos últimos son falsos.
Podemos cambiar fácilmente entre los dos usando el operador !, que también convierte el tipo a booleano.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Convertir a cadena
CONVERSIÓN DE TIPO
Se puede realizar una conversión rápida de un número entero a una cadena de la siguiente manera.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Convertir a entero
CONVERSIÓN DE TIPO
Realizamos la transformación inversa de esta manera.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Este método también se puede utilizar para convertir el tipo de datos booleanos a valores numéricos regulares, como se muestra a continuación:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Puede haber situaciones en las que + se interprete como un operador de concatenación en lugar de un operador de suma. Para evitar esto, debes usar tildes: ~~. Este operador es equivalente a -n-1. Por ejemplo, ~15 es igual a -16.
Usar dos tildes seguidas niega la operación porque - (- - n - 1) - 1 = n + 1 - 1 = n. En otras palabras, ~-16 es igual a 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
Operaciones
A partir de ES7, puedes utilizar el operador de exponenciación ** como abreviatura de potencias. Esto es mucho más rápido que usar Math.pow(2, 3). Parece sencillo, pero este punto está incluido en la lista de técnicas, ya que no se menciona en todas partes.
console.log(2 ** 3); // Result: 8No debe confundirse con el símbolo ^, que se utiliza habitualmente para la exponenciación. Pero en JavaScript este es el operador XOR.
Antes de ES7, el atajo ** solo se podía usar para potencias de base 2 usando el operador de desplazamiento a la izquierda bit a bit <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Por ejemplo, 2 << 3 = 16 equivale a 2 ** 4 = 16.
Flotante a entero
OPERACIONES / CONVERSIÓN DE TIPO
Si necesita convertir un flotante en un número entero, puede usar Math.floor(), Math.ceil() o Math.round(). Pero existe una forma más rápida, para ello usamos |, es decir, el operador OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Comportamiento | Depende en gran medida de si se trata de números positivos o negativos, por lo que este método sólo es adecuado si tiene confianza en lo que está haciendo.
norte | 0 elimina todo lo que está después del separador decimal, truncando el flotante a un número entero.
Puedes obtener el mismo efecto de redondeo usando ~~. Después de la conversión forzada a un número entero, el valor permanece sin cambios.
Eliminar números finales
El operador OR se puede utilizar para eliminar cualquier cantidad de dígitos de un número. Esto significa que no necesitamos convertir tipos como aquí:
let str = "1553";
Number(str.substring(0, str.length - 1));En lugar de eso simplemente escribimos:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Vinculación automática
Clases
Las notaciones de flechas de ES6 se pueden usar en métodos de clase y la vinculación está implícita. ¡Esto significa que puedes decir adiós a expresiones repetitivas como this.myMethod = this.myMethod.bind(this)!
import React, { Component } from React;
export default class App extends Compononent {
constructor(props) {
super(props);
this.state = {};
}
myMethod = () => {
// This method is bound implicitly!
}
render() {
return (
<>
<div>
{this.myMethod()}
</div>
</>
)
}
};Recorte de matriz
Matrices
Si necesita eliminar valores de una matriz, existen métodos más rápidos que splice().
Por ejemplo, si conoce el tamaño de la matriz original, puede anular su propiedad de longitud de la siguiente manera:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Pero existe otro método y uno más rápido. Si lo que te importa es la velocidad, aquí tienes nuestras elecciones:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]Imprimir los últimos valores de una matriz
Matrices
Esta técnica requiere el uso del método slice().
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]Formatear código JSON
JSON
Es posible que ya haya utilizado JSON.stringify. ¿Sabías que ayuda a formatear tu JSON?
El método stringify() toma dos parámetros opcionales: una función de reemplazo, que se puede usar para filtrar el JSON mostrado, y un valor de espacio.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Eso es todo, espero que todas estas técnicas te hayan resultado útiles. ¿Qué trucos conoces? Escríbelos en los comentarios.
Skillbox recomienda:
- Curso práctico de dos años. .
- Curso por Internet .
- curso práctico anual .
Fuente: habr.com