Desenvolvimento – 7 truques úteis no JavaScript.

B2BHost

6 anos atrás

Blog B2B Host | Desenvolvimento – 7 truques úteis no JavaScript.

Desenvolvimento WEB – Assim como em todas as outras linguagens de programação, o JavaScript tem dezenas de truques para realizar tarefas fáceis e difíceis.

Alguns truques são amplamente conhecidos, enquanto outros são suficientes para explodir sua mente. Vamos dar uma olhada em sete truques no JavaScript que você pode começar a usar hoje!

Obter valores exclusivos de uma matriz

Obter uma matriz de valores exclusivos provavelmente é mais fácil do que você pensa:

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

Matriz e Booleana

Precisar filtrar valores Falsos (0, undefined, null, false, etc.) para fora de uma matriz? Você pode não ter conhecido esse truque:

myArray
    .map(item => {
        // ...
    })
    // Get rid of bad values
    .filter(Boolean);

Crie objetos vazios

Claro que você pode criar um objeto que parece vazio com { }, mas esse objeto ainda tem um proto e os hasOwnProperty usuais e outros objetos. Não há absolutamente nenhuma chave ou método nesse:

let dict = Object.create(null);

// dict.__proto__ === "undefined"
// No object properties exist until you add them

Mesclar Objetos

A necessidade de mesclar vários objetos em JavaScript sempre existiu, especialmente quando começamos a criar classes e widgets com opções. Esses três pontos tornaram a tarefa muito mais fácil:

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",
}
*/

Requer parâmetros de função

Ser capaz de definir valores padrão para argumentos de função foi uma adição incrível ao JavaScript, mas confira este truque para exigir que os valores sejam passados para um determinado argumento:

const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// This will throw an error because no name is provided
hello();

// This will also throw an error
hello(undefined);

// These are good!
hello(null);
hello('David');

Aliases de Destruição

A destruição é uma adição muito bem-vinda ao JavaScript, mas às vezes preferimos nos referir a essas propriedades com outro nome, para que possamos aproveitar os aliases. Isso é muito útil para evitar conflitos de nomenclatura com variáveis existentes:

const obj = { x: 1 };

// Grabs obj.x as { x }
const { x } = obj;

// Grabs obj.x as as { otherName }
const { x: otherName } = obj;

Obter parâmetros da string de consulta

Durante anos, escrevemos expressões regulares brutas para obter valores de string de consulta, mas esses dias acabaram – digite a incrível URLSearchParams API:

// Assuming "?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"

Muito mais fácil do que costumávamos brigar!

O JavaScript mudou muito ao longo dos anos, atualmente é a velocidade das melhorias de idioma que estamos vendo. Apesar da dinâmica variável do JavaScript, ainda precisamos empregar alguns truques decentes; guarde estes truques na sua caixa de ferramentas para quando precisar deles!

Quais são seus truques em JavaScript favoritos? Compartilhe conosco!

Tem algo a dizer sobre este artigo? Comente abaixo ou compartilhe conosco no Facebook, Twitter ou no nosso LinkedIn.