Cuando comencé a aprender JavaScript, lo primero que hice fue hacer una lista de trucos que me ayudaron a ahorrar tiempo. Los espié en otros programadores, en diferentes sitios y en manuales.
En este artículo, le mostraré 12 excelentes maneras de mejorar y acelerar su código JavaScript. En la mayoría de los casos, son universales.
Le recordamos: para todos los lectores de "Habr": un descuento de 10.000 rublos al registrarse en cualquier curso de Skillbox con el código de promoción "Habr".
Skillbox recomienda: Curso práctico "Mobile Developer PRO" .
Filtrado de valor único
Matrices
El tipo del objeto Set se introdujo en ES6, junto con ..., el operador de propagació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);
En una situación normal, se necesita mucho más código para realizar la misma operación.
Este truco 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.
La longitud del caché en ciclos.
CICLOS
Cuando aprenda para bucles, siga el procedimiento estándar:
for (let i = 0; i < array.length; i++){ console.log(i); }
Sin embargo, con esta sintaxis, el bucle for vuelve a verificar la longitud de la matriz en cada iteración.
Esto a veces puede ser útil, pero en la mayoría de los casos es más eficiente almacenar en caché la longitud de la matriz, lo que requerirá un acceso único a ella. Podemos hacer esto definiendo una longitud variable, donde establecer la variable i, por ejemplo, así:
for (let i = 0, length = array.length; i < length; i++){ console.log(i); }
En principio, es casi lo mismo que antes, pero con un aumento en el tamaño del ciclo, obtendremos ahorros de tiempo significativos.
Clasificación de cortocircuito (clasificación de McCarthy)
OPERADORES CONDICIONALES
El operador ternario es una forma rápida y eficiente de escribir declaraciones condicionales simples (y a veces no muy simples):
x> 100? "Mayor que 100": "menor que 100";
x> 100? (x> 200? "más de 200": "entre 100-200"): "menos de 100";
Pero a veces incluso un operador ternario es más complicado de lo requerido. En cambio, podemos usar 'y' && y 'o' || operadores lógicos para evaluar algunas expresiones de una manera aún más concisa. A menudo se le llama "cortocircuito" o "evaluación de cortocircuito".
Como funcionaDigamos que queremos devolver solo una de dos o más condiciones.
Usar && 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);
Usando || devolverá el primer valor verdadero. Si cada operando se evalúa como falso, se devolverá el último valor calculado.
let one = 1, two = 2, three = 3; console.log(one || two || three);
Ejemplo 1Digamos que queremos devolver la longitud a una variable, pero no sabemos su tipo.
En este caso, puede usar if / else para verificar que foo es un tipo adecuado, pero este método puede ser demasiado largo. Por lo tanto, es mejor tomar nuestro "corto circuito".
return (foo || []).length;
Si la variable foo tiene una longitud adecuada, se devolverá. De lo contrario, obtenemos 0.
Ejemplo 2¿Has 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 devuelva una consulta para la selección.
Dependiendo de dónde lo usemos, una llamada a this.state.data puede evitar 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 opción más adecuada sería utilizar el operador "o".
return (this.state.data || 'Fetching Data');
No podemos cambiar el código anterior para usar &&. La instrucción 'Obteniendo datos' && this.state.data devolverá this.state.data si está indefinido o no.
Cadena opcionalPuede sugerir el uso de la cadena opcional cuando intente devolver una propiedad a una estructura de árbol. Entonces, ¿un símbolo de signo de interrogación? se puede usar para recuperar una propiedad solo si no es nula.
Por ejemplo, podríamos refactorizar el ejemplo anterior obteniendo this.state.data? .. (). Es decir, los datos se devuelven solo si el valor no es nulo.
O, si es importante si el estado está definido o no, podríamos devolver this.state? .Data.
Convertir a booleano
TIPO DE CONVERSIÓN
Además de las funciones lógicas habituales verdadero y falso, JavaScript también trata todos los demás valores como verdadero o falso.
A menos que se especifique lo contrario, todos los valores en JavaScript son verdaderos, con la excepción de 0, "", nulo, indefinido, NaN y, por supuesto, falso. Los últimos son falsos.
Podemos cambiar fácilmente entre los dos utilizando el operador!, Que también convierte el tipo a lógico.
const isTrue = !0; const isFalse = !1; const alsoFalse = !!0; console.log(isTrue);
Convertir a cadena
TIPO DE CONVERSIÓN
Una conversión rápida de un entero a una cadena se puede hacer de la siguiente manera.
const val = 1 + ""; console.log(val);
Conversión a entero
TIPO DE CONVERSIÓN
Realizamos la transformación inversa de la siguiente manera.
let int = "15"; int = +int; console.log(int);
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);
Puede haber situaciones en las que + se interpretará como un operador de concatenación en lugar de una suma. Para evitar esto, use tildes: ~~. Este operador es equivalente a la expresión -n-1. Por ejemplo, ~ 15 es -16.
El uso de dos tildes en una fila niega la operación, porque - (- - n - 1) - 1 = n + 1 - 1 = n. En otras palabras, ~ -16 es 15.
const int = ~~"15" console.log(int);
<Potencias rápidas
Operaciones
Comenzando con ES7, puede usar el operador de exponenciación ** como abreviatura de grados. Esto es mucho más rápido que usar Math.pow (2, 3). Parece simple, pero este momento está incluido en la lista de recepciones, ya que no se menciona en todas partes.
console.log(2 ** 3);
No lo confunda con el símbolo ^, que generalmente se usa para exponenciación. Pero en JavaScript, este es el operador XOR.
Antes de ES7, la abreviatura ** solo podía aplicarse para grados con 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 es equivalente a la expresión 2 ** 4 = 16.
Entero flotante
OPERACIONES / TIPOS DE TRANSFORMACIÓN
Si necesita convertir un flotante en un entero, puede usar Math.floor (), Math.ceil () o Math.round (). Pero hay una forma más rápida, para esto usamos |, es decir, el operador OR.
console.log(23.9 | 0);
Comportamiento | depende en gran medida de si se trata de números positivos o negativos, por lo que este método solo es adecuado si tiene confianza en lo que está haciendo.
n | 0 elimina todo después del separador decimal, truncando el número de coma flotante a un entero.
Puede obtener el mismo efecto de redondeo usando ~~. Después de la conversión forzada a un número entero, el valor permanece sin cambios.
Eliminamos los números finalesEl operador OR se puede usar para eliminar cualquier número 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 cambio, simplemente escribimos:
console.log(1553 / 10 | 0)
Enlace automático
Clases
Las puntas de flecha ES6 se pueden usar en métodos de clase, y el enlace está implícito. ¡Gracias a esto, puede decir adiós a expresiones duplicadas 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 = () => {
Recorte de matriz
Matrices
Si necesita eliminar valores de una matriz, entonces hay 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);
Pero hay otro método, y más rápido. Si la velocidad es importante para usted, entonces esta es nuestra elección:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array = array.slice(0, 4); console.log(array);
Salida de los últimos valores de la 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));
Formato de código JSON
Json
Es posible que ya haya usado JSON.stringify. ¿Sabes que ayuda a formatear tu JSON?
El método stringify () acepta dos parámetros opcionales: la función de reemplazo, que se puede usar para filtrar el JSON mostrado, y el espacio de valores.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
Eso es todo, espero que todos estos trucos hayan sido útiles. ¿Y qué trucos sabes? Escríbelos en los comentarios.
Skillbox recomienda: