Quando comecei a aprender JavaScript, a primeira coisa que fiz foi fazer uma lista de truques que me ajudaram a economizar tempo. Eu os descobri em outros programadores, em diferentes sites e em manuais.
Neste artigo, mostrarei 12 ótimas maneiras de melhorar e acelerar seu código JavaScript. Na maioria dos casos eles são universais.
Lembramos: para todos os leitores de "Habr" - um desconto de 10 rublos ao se inscrever em qualquer curso Skillbox usando o código promocional "Habr".
A Skillbox recomenda: curso prático .
Filtrando valores exclusivos
MATRIZ
O tipo de objeto Set foi introduzido no ES6, junto com o... operador spread, podemos usá-lo para criar um novo array que contém apenas valores únicos.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Em uma situação normal, é necessário muito mais código para realizar a mesma operação.
Esta técnica funciona para arrays contendo tipos primitivos: indefinido, nulo, booleano, string e número. Se estiver trabalhando com um array contendo objetos, funções ou arrays adicionais, você precisará de uma abordagem diferente.
Comprimento da matriz de cache em ciclos
CICLOS
Ao aprender loops for, você segue o procedimento padrão:
for (let i = 0; i < array.length; i++){
console.log(i);
}No entanto, com esta sintaxe, o loop for verifica repetidamente o comprimento do array a cada iteração.
Às vezes isso pode ser útil, mas na maioria dos casos é mais eficiente armazenar em cache o comprimento do array, o que exigirá um acesso a ele. Podemos fazer isso definindo uma variável de comprimento onde definimos a variável i, assim:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Em princípio, quase igual ao anterior, mas aumentando o tamanho do loop obteremos uma economia significativa de tempo.
Classificação de curto-circuito (classificação McCarthy)
OPERADORES CONDICIONAIS
O operador ternário é uma maneira rápida e eficiente de escrever instruções condicionais simples (e às vezes nem tão simples):
x> 100? “mais de 100”: “menos de 100”;
x> 100? (x>200? "mais de 200": "entre 100-200"): "menos de 100";
Mas às vezes até o operador ternário é mais complicado do que o necessário. Podemos usar 'and' && e 'or' em vez disso || Operadores booleanos para avaliar determinadas expressões de forma ainda mais concisa. Muitas vezes é chamado de "curto-circuito" ou "classificação de curto-circuito".
Как это работает
Digamos que queremos retornar apenas uma de duas ou mais condições.
Usar && retornará o primeiro valor falso. Se cada operando for avaliado como verdadeiro, a última expressão avaliada será retornada.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Usando || retornará o primeiro valor verdadeiro. Se cada operando for avaliado como falso, o último valor avaliado será retornado.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullExemplo 1
Digamos que queremos retornar o comprimento de uma variável, mas não sabemos o seu tipo.
Nesse caso, você pode usar if/else para verificar se foo é do tipo correto, mas esse método pode ser muito longo. Portanto, é melhor aproveitar o nosso “curto-circuito”.
return (foo || []).length;Se a variável foo tiver um comprimento adequado, ela será retornada. Caso contrário, obteremos 0.
Exemplo 2
Você teve problemas para acessar um objeto aninhado? Talvez você não saiba se um objeto ou uma de suas subpropriedades existe e isso pode causar problemas.
Por exemplo, queríamos acessar a propriedade data em this.state, mas os dados não são definidos até que nosso programa retorne uma solicitação de busca.
Dependendo de onde o usamos, chamar this.state.data pode impedir a inicialização do aplicativo. Para resolver o problema, poderíamos agrupar isso em uma expressão condicional:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Uma opção melhor seria usar o operador “ou”.
return (this.state.data || 'Fetching Data');Não podemos alterar o código acima para usar &&. O operador 'Fetching Data' && this.state.data retornará this.state.data independentemente de ser indefinido ou não.
Corrente opcional
Pode-se sugerir o uso de encadeamento opcional ao tentar retornar uma propriedade profundamente em uma estrutura em árvore. Então, o símbolo do ponto de interrogação? pode ser usado para recuperar uma propriedade somente se ela não for nula.
Por exemplo, poderíamos refatorar o exemplo acima para obter this.state.data?..(). Ou seja, os dados serão retornados somente se o valor não for nulo.
Ou, se importa se o estado está definido ou não, poderíamos retornar this.state?.data.
Converter para booleano
CONVERSÃO DE TIPO
Além das funções booleanas normais, verdadeiro e falso, o JavaScript também trata todos os outros valores como verdadeiros ou falsos.
Até indicação em contrário, todos os valores em JavaScript são verdadeiros, exceto 0, "", nulo, indefinido, NaN e, claro, falso. Estes últimos são falsos.
Podemos alternar facilmente entre os dois usando o operador !, que também converte o tipo em booleano.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Converter em string
CONVERSÃO DE TIPO
Uma conversão rápida de um número inteiro em uma string pode ser feita da seguinte maneira.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Converter para inteiro
CONVERSÃO DE TIPO
Realizamos a transformação reversa assim.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Este método também pode ser usado para converter o tipo de dados booleano em valores numéricos regulares, conforme mostrado abaixo:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Pode haver situações em que + será interpretado como um operador de concatenação em vez de um operador de adição. Para evitar isso, você deve usar tils: ~~. Este operador é equivalente a -n-1. Por exemplo, ~15 é igual a -16.
Usar dois tils seguidos anula a operação porque - (- - n - 1) - 1 = n + 1 - 1 = n. Em outras palavras, ~-16 é igual a 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Poderes Rápidos
OPERAÇÕES
A partir do ES7, você pode usar o operador de exponenciação ** como uma abreviação para potências. Isso é muito mais rápido do que usar Math.pow(2, 3). Parece simples, mas este ponto está incluído na lista de técnicas, pois não é mencionado em todos os lugares.
console.log(2 ** 3); // Result: 8Não deve ser confundido com o símbolo ^, comumente usado para exponenciação. Mas em JavaScript este é o operador XOR.
Antes do ES7, o atalho ** só podia ser usado para potências de base 2 usando o operador bit a bit left shift <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Por exemplo, 2 << 3 = 16 é equivalente a 2 ** 4 = 16.
Flutuar para número inteiro
OPERAÇÕES / CONVERSÃO DE TIPO
Se precisar converter um float em um inteiro, você pode usar Math.floor(), Math.ceil() ou Math.round(). Mas existe uma forma mais rápida, para isso utilizamos |, ou seja, o operador OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Comportamento | depende muito se você está lidando com números positivos ou negativos; portanto, esse método só é adequado se você estiver confiante no que está fazendo.
n | 0 remove tudo após o separador decimal, truncando o float para um número inteiro.
Você pode obter o mesmo efeito de arredondamento usando ~~. Após a conversão forçada para um número inteiro, o valor permanece inalterado.
Removendo números finais
O operador OR pode ser usado para remover qualquer número de dígitos de um número. Isso significa que não precisamos converter tipos como aqui:
let str = "1553";
Number(str.substring(0, str.length - 1));Em vez disso, simplesmente escrevemos:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Vinculação automática
AULAS
As notações de seta ES6 podem ser usadas em métodos de classe e a ligação está implícita. Isso significa que você pode dizer adeus a expressões 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>
</>
)
}
};Corte de matriz
MATRIZ
Se você precisar retirar valores de um array, existem métodos mais rápidos que splice().
Por exemplo, se você souber o tamanho do array original, poderá substituir sua propriedade length da seguinte maneira:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Mas existe outro método, e mais rápido. Se velocidade é o que importa para você, aqui estão nossas escolhas:
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]Imprimindo o(s) último(s) valor(es) de um array
MATRIZ
Esta técnica requer 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]Formatando código JSON
JSON
Você já deve ter usado JSON.stringify. Você sabia que ajuda a formatar seu JSON?
O método stringify() usa dois parâmetros opcionais: uma função substituta, que pode ser usada para filtrar o JSON exibido, e um valor de espaço.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Só isso, espero que todas essas técnicas tenham sido úteis. Que truques você conhece? Escreva-os nos comentários.
A Skillbox recomenda:
- Curso prático de dois anos .
- Curso online .
- curso de ano prático .
Fonte: habr.com