JavaScript: 7 pequenas coisas úteis

O autor da nota, cuja tradução estamos publicando hoje, diz que em JavaScript, como em qualquer outra linguagem de programação, você pode encontrar muitos pequenos truques criados para resolver uma variedade de problemas, simples e bastante complexos. Algumas dessas técnicas são amplamente conhecidas, enquanto outras, não tão comuns, podem surpreender agradavelmente quem não as conhece. Agora, veremos 7 técnicas úteis de programação JavaScript.

1. Obtendo valores exclusivos de matriz

No JavaScript, gerar uma matriz contendo apenas valores exclusivos de outra matriz é provavelmente mais fácil do que você pensa:

var j = [...new Set([1, 2, 3, 3])] // [1, 2, 3] 

Gosto da maneira como esse problema pode ser resolvido usando o operador ... e o tipo de dados Set .

2. Matrizes e valores lógicos

Você já precisou remover valores de uma matriz cuja conversão para um tipo lógico é false ? Por exemplo, esses são valores como 0 , undefined , null , false . Você pode não saber que, para fazer isso, você pode fazer o seguinte:

 myArray   .map(item => {       // ...   })   //       .filter(Boolean); 

Como você pode ver, para se livrar de todos esses valores, basta passar o método Boolean para o array .filter() .

3. Criando objetos verdadeiramente vazios

Estou certo de que você pode criar um objeto que parece vazio usando a sintaxe do literal do objeto: {} . Mas um protótipo ( __proto__ ) será atribuído a esse objeto, ele terá um método hasOwnProperty() e outros métodos de objeto. Para criar um objeto verdadeiramente vazio , que, por exemplo, pode ser usado como um "dicionário", você pode fazer o seguinte:

 let dict = Object.create(null); // dict.__proto__ === "undefined" //        ,           

Um objeto criado dessa maneira não possui propriedades e métodos que não são adicionados pelo programador.

4. Mesclando objetos

Quem escreve em JavaScript sempre precisa criar objetos que incluam o conteúdo de outros objetos. Essa tarefa se tornou especialmente urgente quando as classes apareceram em JavaScript e, em seguida, quando os programadores tiveram que trabalhar com algo como representações programáticas de widgets. Veja como criar um novo objeto com base em vários outros objetos:

 const person = { name: 'David Walsh', gender: 'Male' }; const tools = { computer: 'Mac', editor: 'Atom' }; const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' }; const summary = {...person, ...tools, ...attributes}; /* Object { "computer": "Mac", "editor": "Atom", "eyes": "Blue", "gender": "Male", "hair": "Brown", "handsomeness": "Extreme", "name": "David Walsh", } */ 

O operador ... simplifica bastante a solução da tarefa de mesclar objetos.

5. Parâmetros de função necessários

Definir valores de argumento de função padrão é uma ótima extensão para JavaScript. Mas aqui está como fazer isso para que, sem passar alguns parâmetros necessários, as funções simplesmente se recusem a funcionar:

 const isRequired = () => { throw new Error('param is required'); }; const hello = (name = isRequired()) => { console.log(`hello ${name}`) }; //    ,     name hello(); //     hello(undefined); //        hello(null); hello('David'); 

Diante de nós, há um nível adicional de verificação do que é passado para as funções.

6. Atribuição destrutiva e novos nomes de propriedades extraídas de objetos

A reestruturação é um novo recurso útil do JavaScript, mas, às vezes, as propriedades recuperadas dos objetos precisam receber nomes diferentes daqueles que eles têm nesses objetos. Veja como fazê-lo:

 const obj = { x: 1 }; //      obj.x   x const { x } = obj; //   obj.x     otherName const { x: otherName } = obj; 

Essa técnica é útil nos casos em que você precisa evitar um conflito de nomes ou constantes de variáveis.

7. Analisando Cadeias de Consulta

Por muitos anos, escrevemos expressões regulares para analisar as cadeias de consulta, mas esses tempos já passaram. Agora, para resolver esse problema, você pode usar a maravilhosa API URLSearchParams :

 // ,     "?post=1234&action=edit" var urlParams = new URLSearchParams(window.location.search); console.log(urlParams.has('post')); // true console.log(urlParams.get('action')); // "edit" console.log(urlParams.getAll('action')); // ["edit"] console.log(urlParams.toString()); // "?post=1234&action=edit" console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1" 

Usar a API URLSearchParams muito mais fácil do que resolver as mesmas tarefas usando expressões regulares.

Sumário

O JavaScript moderno está evoluindo muito rapidamente, com várias melhorias úteis constantemente aparecendo nele. Mas melhorar a linguagem não significa que os programadores não precisam pensar no código e procurar soluções eficazes para vários problemas que os confrontam. Esperamos que os pequenos truques de JavaScript de que falamos hoje sejam úteis.

Caros leitores! Você conhece algum truque útil de programação JS? Se sim, compartilhe-os.