"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Desbloqueie o poder do JavaScript: dicas e técnicas profissionais

Desbloqueie o poder do JavaScript: dicas e técnicas profissionais

Publicado em 31/10/2024
Navegar:702

Unlock the Power of JavaScript: Pro Tips and Techniques

1. Use desestruturação para trocar variáveis

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

Por que: fornece uma maneira limpa e de uma linha de trocar valores de variáveis ​​sem uma variável temporária.

2. Use literais de modelo para interpolação de strings

const name = "Alice";
console.log(`Hello, ${name}!`); // Hello, Alice!

Por que: torna a concatenação de strings mais legível e menos propensa a erros do que os métodos tradicionais.

3. Use o operador de coalescência nulo (??) para valores padrão

const value = null;
const defaultValue = value ?? "Default";
console.log(defaultValue); // "Default"

Por que: fornece uma maneira concisa de lidar com valores nulos ou indefinidos, distinguindo-se de valores falsos como 0 ou string vazia.

4. Use encadeamento opcional (?.) para acesso seguro à propriedade

const obj = { nested: { property: "value" } };
console.log(obj?.nested?.property); // "value"
console.log(obj?.nonexistent?.property); // undefined

Por que: evita erros ao acessar propriedades aninhadas que podem não existir, reduzindo a necessidade de verificações detalhadas.

5. Use o operador spread (...) para manipulação de array

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

Por quê: simplifica as operações de array, como combinar, copiar ou adicionar elementos, tornando o código mais conciso e legível.

6. Use Array.from() para criar arrays a partir de objetos semelhantes a array

const arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 };
const newArray = Array.from(arrayLike);
console.log(newArray); // ["a", "b", "c"]

Por quê: converte facilmente objetos semelhantes a array ou iteráveis ​​em arrays verdadeiros, permitindo o uso de métodos de array.

7. Use Object.entries() para facilitar a iteração de objetos

const obj = { a: 1, b: 2, c: 3 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}

Por que: fornece uma maneira limpa de iterar chaves e valores de um objeto simultaneamente.

8. Use Array.prototype.flat() para nivelar arrays aninhados

const nestedArray = [1, [2, 3, [4, 5]]];
console.log(nestedArray.flat(2)); // [1, 2, 3, 4, 5]

Por que: simplifica o trabalho com matrizes aninhadas, achatando-as até uma profundidade especificada.

9. Use async/await para um código assíncrono mais limpo

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

Por quê: faz com que o código assíncrono pareça e se comporte mais como código síncrono, melhorando a legibilidade e o tratamento de erros.

10. Use Set para valores exclusivos em uma matriz

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Por quê: fornece uma maneira eficiente de remover duplicatas de um array sem loop manual.

11. Use Object.freeze() para criar objetos imutáveis

const frozenObj = Object.freeze({ prop: 42 });
frozenObj.prop = 100; // Fails silently in non-strict mode
console.log(frozenObj.prop); // 42

Por que: evita modificações em um objeto, útil para criar constantes ou garantir a integridade dos dados.

12. Use Array.prototype.reduce() para transformações poderosas de array

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // 15

Por que: permite que operações complexas de array sejam executadas em uma única passagem, geralmente com mais eficiência do que loops.

13. Use o operador lógico AND (&&) para execução condicional

const isTrue = true;
isTrue && console.log("This will be logged");

Por que: fornece uma maneira curta de executar código somente se uma condição for verdadeira, sem uma instrução if explícita.

14. Use Object.assign() para mesclar objetos

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = Object.assign({}, obj1, obj2);
console.log(merged); // { a: 1, b: 3, c: 4 }

Por quê: simplifica a mesclagem de objetos, útil para combinar objetos de configuração ou criar cópias de objetos com substituições.

15. Use Array.prototype.some() e Array.prototype.every() para array

checking
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.some(n => n > 3)); // true
console.log(numbers.every(n => n > 0)); // true

Por que: fornece maneiras concisas de verificar se algum ou todos os elementos de uma matriz atendem a uma condição, evitando loops explícitos.

16. Use console.table() para melhor registro de dados tabulares

const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 28 },
];
console.table(users);

Por que: Melhora a legibilidade dos dados registrados em formato tabular, especialmente útil para matrizes de objetos.

17. Use Array.prototype.find() para obter o primeiro elemento correspondente

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(n => n > 3);
console.log(found); // 4

Por que: encontra com eficiência o primeiro elemento em uma matriz que satisfaz uma condição, interrompendo a iteração quando encontrada.

18. Use Object.keys(), Object.values() e Object.entries() para objeto

manipulation
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // ["a", "b", "c"]
console.log(Object.values(obj)); // [1, 2, 3]
console.log(Object.entries(obj)); // [["a", 1], ["b", 2], ["c", 3]]

Por que: fornece maneiras fáceis de extrair e trabalhar com propriedades e valores de objetos, úteis para muitas operações de objetos.

19. Use a API internacional para internacionalização

const number = 123456.789;
console.log(new Intl.NumberFormat('de-DE').format(number)); // 123.456,789

Por que: simplifica a formatação de números, datas e strings de acordo com regras específicas de localidade sem implementação manual.

20. Use Array.prototype.flatMap() para mapear e nivelar em uma única etapa

const sentences = ["Hello world", "How are you"];
const words = sentences.flatMap(sentence => sentence.split(" "));
console.log(words); // ["Hello", "world", "How", "are", "you"]

Por que: combina operações de mapeamento e nivelamento de forma eficiente, útil para transformações que produzem resultados aninhados.

Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/ratan_3511/top-20-javascript-tricks-and-tips-for-developers-16b9?1 Se houver alguma violação, entre em contato com [email protected] para excluir isto
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3