Quando comecei a aprender JavaScript, a primeira coisa que fiz foi fazer uma lista de truques que me ajudaram a economizar tempo. Eu os espiei em outros programadores, em sites diferentes 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 que: para todos os leitores de "Habr" - um desconto de 10.000 rublos ao se inscrever em qualquer curso Skillbox usando o código promocional "Habr".
A Skillbox recomenda: Curso prático "Mobile Developer PRO" .
Filtragem de valor exclusivo
ARRAYS
O tipo do objeto Set foi introduzido no ES6, junto com ..., o operador spread, podemos usá-lo para criar uma nova matriz que contém apenas valores exclusivos.
const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray);
Em uma situação normal, é necessário muito mais código para executar a mesma operação.
Esse truque funciona para matrizes que contêm tipos primitivos: indefinido, nulo, booleano, string e número. Se você estiver trabalhando com uma matriz contendo objetos, funções ou matrizes adicionais, precisará de uma abordagem diferente.
O comprimento do cache em ciclos
CICLOS
Quando você aprende para loops, segue o procedimento padrão:
for (let i = 0; i < array.length; i++){ console.log(i); }
No entanto, com essa sintaxe, o loop for verifica novamente o comprimento da matriz a cada iteração.
Às vezes, isso pode ser útil, mas na maioria dos casos é mais eficiente armazenar em cache o comprimento da matriz, o que exigirá um único acesso a ela. Podemos fazer isso definindo um comprimento variável, onde definir a variável i, por exemplo, assim:
for (let i = 0, length = array.length; i < length; i++){ console.log(i); }
Em princípio, é quase o mesmo que acima, mas com um aumento no tamanho do ciclo, obteremos uma economia de tempo significativa.
Classificação de curto-circuito (classificação McCarthy)
OPERADORES CONDICIONAIS
O operador ternário é uma maneira rápida e eficiente de escrever declarações condicionais simples (e às vezes não muito simples):
x> 100? “Maior que 100”: “menor que 100”;
x> 100? (x> 200? "mais de 200": "entre 100-200"): "menos de 100";
Mas às vezes até um operador ternário é mais complicado do que o necessário. Em vez disso, podemos usar 'e' && e 'ou' || operadores lógicos para avaliar algumas expressões de maneira ainda mais concisa. É freqüentemente chamado de “curto-circuito” ou “avaliação de curto-circuito”.
Como isso funcionaDigamos que desejemos retornar apenas uma das 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);
Usando || retornará o primeiro valor verdadeiro. Se cada operando for avaliado como falso, o último valor calculado será retornado.
let one = 1, two = 2, three = 3; console.log(one || two || three);
Exemplo 1Digamos que queremos retornar o comprimento para uma variável, mas não sabemos seu tipo.
Nesse caso, você pode usar if / else para verificar se foo é um tipo adequado, mas esse método pode ser muito longo. Portanto, é melhor tomar nosso "curto-circuito".
return (foo || []).length;
Se a variável foo tiver um comprimento adequado, ela será retornada. Caso contrário, obtemos 0.
Exemplo 2Você teve problemas para acessar um objeto aninhado? Você pode não saber se existe um objeto ou uma de suas subpropriedades e isso pode levar a 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 consulta para a seleção.
Dependendo de onde o usamos, uma chamada para this.state.data pode impedir que o aplicativo seja iniciado. Para resolver o problema, podemos agrupar isso em uma expressão condicional:
if (this.state.data) { return this.state.data; } else { return 'Fetching Data'; }
Uma opção mais adequada seria usar o operador "ou".
return (this.state.data || 'Fetching Data');
Não podemos alterar o código acima para usar &&. A instrução 'Fetching Data' && this.state.data retornará this.state.data, indefinida ou não.
Cadeia opcionalVocê pode sugerir o uso da cadeia opcional ao tentar retornar uma propriedade profundamente em uma estrutura de árvore. Então, um símbolo de ponto de interrogação? pode ser usado para recuperar uma propriedade apenas se não for nula.
Por exemplo, podemos refatorar o exemplo acima obtendo this.state.data? .. (). Ou seja, os dados serão retornados apenas se o valor não for nulo.
Ou, se for importante se o estado está definido ou não, poderíamos retornar this.state? .Data.
Converta em Booleano
CONVERSÃO DE TIPO
Além das funções lógicas usuais true e false, o JavaScript também trata todos os outros valores como verdade ou falsidade.
A menos que especificado de outra forma, todos os valores em JavaScript são verdadeiros, com exceção de 0, "", nulo, indefinido, NaN e, é claro, falso. Os últimos são falsos.
Podemos alternar facilmente entre os dois usando o! Operator, que também converte o tipo em lógico.
const isTrue = !0; const isFalse = !1; const alsoFalse = !!0; console.log(isTrue);
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);
Conversão para inteiro
CONVERSÃO DE TIPO
Realizamos a transformação inversa da seguinte maneira.
let int = "15"; int = +int; console.log(int);
Este método também pode ser usado para converter o tipo de dados booleano booleano em valores numéricos regulares, conforme mostrado abaixo:
console.log(+true);
Pode haver situações em que + será interpretado como um operador de concatenação em vez de adição. Para evitar isso, use tildes: ~~. Este operador é equivalente à expressão -n-1. Por exemplo, ~ 15 é -16.
O uso de duas classes consecutivas nega a operação, porque - (- - n - 1) - 1 = n + 1 - 1 = n. Em outras palavras, ~ -16 é 15.
const int = ~~"15" console.log(int);
<Poderes rápidos
OPERAÇÕES
A partir do ES7, você pode usar o operador de exponenciação ** como uma abreviação de graus. Isso é muito mais rápido do que usar Math.pow (2, 3). Parece simples, mas esse momento está incluído na lista de recepções, pois não é mencionado em todos os lugares.
console.log(2 ** 3);
Não confunda com o símbolo ^, que geralmente é usado para exponenciação. Mas em JavaScript, este é o operador XOR.
Antes do ES7, a abreviação ** só podia ser aplicada a graus com base 2 usando o operador de deslocamento à esquerda bit a bit <<:
Math.pow(2, n); 2 << (n - 1); 2**n;
Por exemplo, 2 << 3 = 16 é equivalente à expressão 2 ** 4 = 16.
Inteiro flutuante
OPERAÇÕES / TRANSFORMANDO TIPOS
Se você precisar converter um float em um número inteiro, poderá usar Math.floor (), Math.ceil () ou Math.round (). Mas há uma maneira mais rápida, para isso usamos |, ou seja, o operador OR.
console.log(23.9 | 0);
Comportamento depende em grande parte 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 depois do separador decimal, truncando o número de ponto flutuante para um número inteiro.
Você pode obter o mesmo efeito de arredondamento usando ~~. Após a conversão forçada em um número inteiro, o valor permanece inalterado.
Removemos os números finaisO 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)
Link automático
CLASSES
As pontas de seta do ES6 podem ser usadas nos métodos de classe e a ligação está implícita. Graças a isso, você pode se despedir de duplicar expressões 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 = () => {
Corte de matriz
ARRAYS
Se você precisar remover valores de uma matriz, existem métodos mais rápidos que o splice ().
Por exemplo, se você souber o tamanho da matriz 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);
Mas há outro método, e mais rápido. Se a velocidade é importante para você, aqui está a nossa escolha:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array = array.slice(0, 4); console.log(array);
Último valor (es) da matriz de saída
ARRAYS
Essa 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));
Formatação de código JSON
Json
Você já pode ter usado o JSON.stringify. Você sabia que isso ajuda a formatar seu JSON?
O método stringify () aceita dois parâmetros opcionais: a função substituta, que pode ser usada para filtrar o JSON exibido e o espaço de valor.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
Só isso, espero que todos esses truques tenham sido úteis. E quais truques você conhece? Escreva-os nos comentários.
A Skillbox recomenda: