Cando comecei a aprender JavaScript, o primeiro que fixen foi facer unha lista de trucos que me axudaron a aforrar tempo. Vineinos doutros programadores, en diferentes sitios e en manuais.
Neste artigo, mostrareiche 12 excelentes formas de mellorar e acelerar o teu código JavaScript. Na maioría dos casos son universais.
Recordámolo: para todos os lectores de "Habr" - un desconto de 10 rublos ao inscribirse en calquera curso de Skillbox usando o código promocional "Habr".
Skillbox recomenda: Curso práctico .
Filtrando valores únicos
MATRICES
O tipo de obxecto Establecer introduciuse en ES6, xunto co..., operador spread, podemos usalo para crear unha nova matriz que conteña só valores únicos.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Nunha situación normal, necesítase moito máis código para realizar a mesma operación.
Esta técnica funciona para matrices que conteñen tipos primitivos: indefinido, nulo, booleano, cadea e número. Se estás a traballar cunha matriz que contén obxectos, funcións ou matrices adicionais, necesitarás un enfoque diferente.
Lonxitude da matriz de caché en ciclos
CICLOS
Cando aprendes bucles for, segues o procedemento estándar:
for (let i = 0; i < array.length; i++){
console.log(i);
}Non obstante, con esta sintaxe, o bucle for comproba repetidamente a lonxitude da matriz en cada iteración.
Ás veces, isto pode ser útil, pero na maioría dos casos é máis eficiente almacenar na caché a lonxitude da matriz, o que requirirá un acceso a ela. Podemos facelo definindo unha variable de lonxitude onde definimos a variable i, así:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}En principio, case o mesmo que o anterior, pero aumentando o tamaño do bucle conseguiremos un importante aforro de tempo.
Clasificación de curtocircuíto (Clasificación McCarthy)
OPERADORES CONDICIONADOS
O operador ternario é unha forma rápida e eficiente de escribir declaracións condicionais sinxelas (e ás veces non tan sinxelas):
x> 100? "máis de 100": "menos de 100";
x> 100? (x>200? "máis de 200": "entre 100 e 200"): "menos de 100";
Pero ás veces mesmo o operador ternario é máis complicado do necesario. Podemos usar "e" && e "ou" no seu lugar || Operadores booleanos para avaliar certas expresións dun xeito aínda máis conciso. A miúdo chámase "curtocircuíto" ou "calificación de curtocircuíto".
Chat isto
Digamos que queremos devolver só unha das dúas ou máis condicións.
Usar && devolverá o primeiro valor falso. Se cada operando é verdadeiro, devolverase a última expresión avaliada.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Usando || devolverá o primeiro valor verdadeiro. Se cada operando é falso, devolverase o último valor avaliado.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullExemplo 1
Digamos que queremos devolver a lonxitude dunha variable, pero non sabemos o seu tipo.
Neste caso, pode usar if/else para comprobar que foo é o tipo correcto, pero este método pode ser demasiado longo. Polo tanto, é mellor levar o noso "curtocircuíto".
return (foo || []).length;Se a variable foo ten unha lonxitude adecuada, devolverase. En caso contrario, obteremos 0.
Exemplo 2
Tivo problemas para acceder a un obxecto anidado? Quizais non saibas se existe un obxecto ou unha das súas subpropiedades, e isto pode provocar problemas.
Por exemplo, queriamos acceder á propiedade de datos en this.state, pero os datos non se definen ata que o noso programa devolve unha solicitude de recuperación.
Dependendo de onde o usemos, chamar a this.state.data pode impedir que se inicie a aplicación. Para resolver o problema, poderíamos envolver isto nunha expresión condicional:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Unha mellor opción sería usar o operador "or".
return (this.state.data || 'Fetching Data');Non podemos cambiar o código anterior para usar &&. O operador "Obtención de datos" && this.state.data devolverá this.state.data independentemente de que estea indefinido ou non.
Cadena opcional
Pódese suxerir usar o encadeamento opcional cando se intenta devolver unha propiedade profundamente nunha estrutura de árbore. Entón, o símbolo do signo de interrogación? pódese usar para recuperar unha propiedade só se non é nula.
Por exemplo, poderiamos refactorizar o exemplo anterior para obter este.state.data?..(). É dicir, só se devolven datos se o valor non é nulo.
Ou, se importa se o estado está definido ou non, poderiamos devolver this.state?.data.
Converter a booleano
CONVERSIÓN DE TIPOS
Ademais das funcións booleanas normais verdadeiro e falso, JavaScript tamén trata todos os demais valores como verdadeiros ou falsos.
Ata que se indique o contrario, todos os valores en JavaScript son verdadeiros excepto 0, "", nulo, indefinido, NaN e, por suposto, falso. Estes últimos son falsos.
Podemos cambiar facilmente entre os dous usando o operador !, que tamén converte o tipo en booleano.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Converter en cadea
CONVERSIÓN DE TIPOS
Unha conversión rápida dun número enteiro a unha cadea pódese facer do seguinte xeito.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Converter a número enteiro
CONVERSIÓN DE TIPOS
Realizamos a transformación inversa así.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Este método tamén se pode usar para converter o tipo de datos booleano en valores numéricos normais, como se mostra a continuación:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Pode haber situacións nas que + se interprete como un operador de concatenación e non como un operador de adición. Para evitar isto, debes usar tildes: ~~. Este operador é equivalente a -n-1. Por exemplo, ~15 é igual a -16.
Usar dúas tildes seguidas nega a operación porque - (- - n - 1) - 1 = n + 1 - 1 = n. Noutras palabras, ~-16 é igual a 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERACIÓNS
A partir de ES7, podes usar o operador de exponenciación ** como abreviatura de potencias. Isto é moito máis rápido que usar Math.pow(2, 3). Parece sinxelo, pero este punto está incluído na lista de técnicas, xa que non se menciona en todas partes.
console.log(2 ** 3); // Result: 8Non se debe confundir co símbolo ^, que se usa habitualmente para a exponenciación. Pero en JavaScript este é o operador XOR.
Antes de ES7, o atallo ** só se podía usar para potencias de base 2 usando o operador de desprazamento á esquerda <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Por exemplo, 2 << 3 = 16 é equivalente a 2 ** 4 = 16.
Flotar a número enteiro
OPERACIÓNS / CONVERSIÓN DE TIPOS
Se precisa converter un flotante nun número enteiro, pode usar Math.floor(), Math.ceil() ou Math.round(). Pero hai un xeito máis rápido, para iso usamos |, é dicir, o operador OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Comportamento | depende en gran medida de se está a tratar con números positivos ou negativos, polo que este método só é adecuado se confía no que está a facer.
n | 0 elimina todo despois do separador decimal, truncando o flotante a un número enteiro.
Podes obter o mesmo efecto de redondeo usando ~~. Despois da conversión forzada a un número enteiro, o valor permanece inalterado.
Eliminando os números finais
O operador OR pódese usar para eliminar calquera número de díxitos dun número. Isto significa que non necesitamos converter tipos como aquí:
let str = "1553";
Number(str.substring(0, str.length - 1));En cambio, 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
As notacións de frechas ES6 pódense usar nos métodos de clase e a vinculación está implícita. Isto significa que podes despedirte de expresións 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>
</>
)
}
};Recortar unha matriz
MATRICES
Se precisa eliminar valores dunha matriz, hai métodos máis rápidos que splice().
Por exemplo, se coñeces o tamaño da matriz orixinal, podes anular a súa propiedade de lonxitude do seguinte xeito:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Pero hai outro método, e máis rápido. Se a velocidade é o que che importa, aquí tes as nosas opcións:
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 o último valor(s) dunha matriz
MATRICES
Esta técnica require o uso do 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]Formato de código JSON
JSON
É posible que xa utilizaches JSON.stringify. Sabías que axuda a formatar o teu JSON?
O método stringify() toma dous parámetros opcionais: unha función de substitución, que se pode usar para filtrar o JSON mostrado, e un valor de espazo.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Iso é todo, espero que todas estas técnicas fosen útiles. Que trucos coñeces? Escríbeas nos comentarios.
Skillbox recomenda:
- Curso práctico de dous anos .
- Curso en liña .
- Curso práctico anual .
Fonte: www.habr.com