12 truques com JavaScript que não estão na maioria dos tutoriais

Quando comecei a estudar JavaScript, meu primeiro passo foi elaborar uma lista de truques que me ajudavam a economizar tempo. Peguei essas dicas de outros programadores, em diferentes sites e manuais.

Neste artigo, vou mostrar 12 ótimas maneiras de melhorar e acelerar seu código JavaScript. Na maioria dos casos, elas são universais.

Lembramos: para todos os leitores do «Habr» — desconto de 10.000 rublos na inscrição em qualquer curso Skillbox com o código promocional «Habr».

A Skillbox recomenda: Curso Prático ‘Desenvolvedor Móvel PRO’.

Filtragem de valores únicos

MATRIZES

O tipo de objeto Set foi introduzido no ES6, juntamente com ... O operador spread nos permite criar uma nova matriz que contém apenas valores únicos.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // Resultado: [1, 2, 3, 5]

Em uma situação normal, seria necessário muito mais código para realizar a mesma operação.

Esse truque funciona para arrays que contêm tipos primitivos: undefined, null, boolean, string e number. Se você estiver lidando com um array que contém objetos, funções ou arrays aninhadas, será necessário um abordagem diferente.

Comprimento do array em loops

LOOPS

Quando você estuda o for 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 do array em cada iteração.

Às vezes, isso pode ser útil, mas na maioria das vezes é mais eficiente armazenar o comprimento do array, o que requer apenas uma única chamada. Podemos fazer isso definindo uma variável length, onde definimos a variável i, assim:

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

Basicamente, quase a mesma coisa que acima, mas ao aumentar o tamanho do loop, teremos uma economia significativa de tempo.

Avaliação de curto-circuito (avaliação de McCarthy)

OPERADORES CONDICIONAIS

O operador ternário é uma maneira rápida e eficaz de escrever simples (e às vezes não tão simples) declarações condicionais:

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é mesmo o operador ternário é mais complicado do que o necessário. Em vez disso, podemos usar os operadores lógicos 'and' && e 'or' || para avaliar algumas expressões de maneira ainda mais concisa. Isso geralmente é chamado de "curto-circuito" ou "avaliação de curto-circuito".

Como funciona

Digamos que queremos retornar apenas uma das duas ou mais condições.

O uso de && retornará o primeiro valor false. Se cada operando for avaliado como true, o último valor computado será retornado.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Resultado: 3

console.log(0 && null); // Resultado: 0

O uso de || permitirá retornar o primeiro valor true. Se cada operando for avaliado como false, o último valor computado será retornado.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Resultado: 1

console.log(0 || null); // Resultado: null

Exemplo 1

Digamos que queremos retornar o length da variável, mas não sabemos seu tipo.

Nesse caso, podemos usar if/else para verificar se foo é do tipo correto, mas esse método pode ser muito longo. Portanto, é melhor usar nosso 'curto-circuito'.

return (foo || []).length;

Se a variável foo tiver um length adequado, esse valor será retornado. Caso contrário, receberemos 0.

Exemplo 2

Você teve problemas para acessar um objeto aninhado? Você pode não saber se o objeto ou uma de suas propriedades existe, e isso pode causar problemas.

Por exemplo, quisemos acessar a propriedade data em this.state, mas data não está definida até que nosso programa retorne uma solicitação de busca.

Dependendo de onde a usamos, a chamada this.state.data pode impedir que o aplicativo seja iniciado. Para resolver o problema, poderíamos envolver isso em uma expressão condicional:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Buscando Dados';
}

Uma opção mais adequada seria usar o operador 'or'.

return (this.state.data || 'Buscando Dados');

Não podemos modificar o código acima para usar &&. O operador 'Buscando Dados' && this.state.data retornará this.state.data independentemente de ser undefined ou não.

Encadeamento opcional

Pode-se sugerir o uso do encadeamento opcional ao tentar retornar uma propriedade em uma estrutura de árvore profunda. Assim, o símbolo de interrogação? pode ser usado para extrair uma propriedade apenas se não for nula (null).

Por exemplo, poderíamos refatorar o exemplo acima para obter this.state.data?.. (). Ou seja, data é retornado apenas se o valor não for null.

Ou, se for importante saber se state está definido ou não, poderíamos retornar this.state?.data.

Conversão para Boolean

CONVERSÃO DE TIPOS

Além das funções lógicas comuns true e false, o JavaScript também considera todos os outros valores como truthy ou falsy.

A menos que indicado de outra forma, todos os valores em JavaScript são truthy, exceto 0, «», null, undefined, NaN e, claro, false. Estes últimos são falsy.

Podemos alternar facilmente entre esses valores, utilizando o operador !, que também converte o tipo para booleano.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Resultado: true
console.log(typeof true); // Resultado: "boolean"

Conversão para string

CONVERSÃO DE TIPOS

A conversão rápida de um número inteiro para string pode ser feita da seguinte maneira.

const val = 1 + "";
 
console.log(val); // Resultado: "1"
console.log(typeof val); // Resultado: "string"

Conversão para inteiro

CONVERSÃO DE TIPOS

A conversão inversa é feita assim.

let int = "15";
int = +int;
 
console.log(int); // Resultado: 15
console.log(typeof int); // Resultado: "number"

Este método também pode ser utilizado para converter valores do tipo booleano em valores numéricos comuns, como mostrado abaixo:

console.log(+true);  // Retorno: 1
console.log(+false); // Retorno: 0

Podem haver situações em que + será interpretado como operador de concatenação, e não de soma. Para evitar isso, é recomendável usar til (~). Este operador é equivalente à expressão -n-1. Por exemplo, ~ 15 resulta em -16.

O uso de duas tildes consecutivas anula a operação, porque — (- — n — 1) — 1 = n + 1 — 1 = n. Em outras palavras, ~ -16 resulta em 15.

const int = ~~"15"
console.log(int); // Resultado: 15
console.log(typeof int); // Resultado: "number"

<Quick Powers

OPERAÇÕES

A partir do ES7, pode-se usar o operador de exponenciação ** como uma forma abreviada para potências. Isso é muito mais rápido do que usar Math.pow (2, 3). Embora pareça simples, este ponto está incluído na lista de truques, pois não é mencionado em todo lugar.

console.log(2 ** 3); // Resultado: 8

Não deve ser confundido com o símbolo ^, que geralmente é usado para exponenciação. Mas em JavaScript, este é o operador XOR.

Até o ES7, a abreviação ** podia ser aplicada apenas a potências com base 2 usando o operador de deslocamento à esquerda <<:

Math.pow(2, n);
2 << (n - 1);
2**n;

Por exemplo, 2 << 3 = 16 é equivalente à expressão 2 ** 4 = 16.

Float para inteiro

OPERAÇÕES / CONVERSÃO DE TIPOS

Se necessário, para converter float em inteiro, pode-se usar Math.floor(), Math.ceil() ou Math.round(). Mas existe um caminho mais rápido, utilizando |, ou seja, o operador OR.

console.log(23.9 | 0);  // Resultado: 23
console.log(-23.9 | 0); // Resultado: -23

O comportamento depende amplamente de se você está lidando com números positivos ou negativos, portanto, esse método é adequado apenas se você tiver confiança no que está fazendo.

n | 0 remove tudo que vem após o separador decimal, truncando o número de ponto flutuante para um 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 de fechamento

O operador OR pode ser usado para remover qualquer quantidade 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, basta escrever:

console.log(1553 / 10   | 0)  // Resultado: 155
console.log(1553 / 100  | 0)  // Resultado: 15
console.log(1553 / 1000 | 0)  // Resultado: 1

Vinculação automática

CLASSES

As expressões flecha ES6 podem ser usadas em métodos de classe, e isso implica vinculação. Com isso, você pode dizer adeus a expressões repetitivas, como this.myMethod = this.myMethod.bind(this)!

importar React, { Componente } de React;
 
exportar padrão class App estende Componente {
  construtor(props) {
    super(props);
    this.state = {};
  }
 
  meuMétodo = () => {
    // Este método é ligado implicitamente!
  }
 
  renderizar() {
    retornar (
      <>
        <div>
          {this.meuMétodo()}
        </div>
      </>
    )
  }
};

Corte de array

MATRIZES

Se você precisa remover valores de um array, existem métodos mais rápidos do que splice().

Por exemplo, se você conhece o tamanho do array original, pode redefinir sua propriedade length da seguinte forma:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;

console.log(array); // Resultado: [0, 1, 2, 3]

Mas há outro método, que é mais rápido. Se a velocidade é importante para você, aqui está nossa escolha:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);

console.log(array); // Resultado: [0, 1, 2, 3]

Saída do último valor (valores) do array

MATRIZES
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)); // Resultado: [9]
console.log(array.slice(-2)); // Resultado: [8, 9]
console.log(array.slice(-3)); // Resultado: [7, 8, 9]

Formatação de código JSON

JSON

Você pode já ter usado JSON.stringify. Sabia que ele ajuda a formatar seu JSON?

O método stringify() aceita dois parâmetros opcionais: uma função replacer, que pode ser usada para filtrar o JSON exibido, e o valor space.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));

// Resultado:
// '{
//     "alpha": A,
//     "beta": B
// }'

E isso é tudo, espero que todas as técnicas mencionadas tenham sido úteis. Quais truques você conhece? Escreva-os nos comentários.

A Skillbox recomenda:

• Curso Prático de Dois Anos Eu sou um desenvolvedor web PRO.
• Curso online «Desenvolvedor C# do zero».
• Curso prático de um ano "Desenvolvedor PHP do zero ao PRO".

Fonte: habr.com