Três pontos úteis - o resto e a dispersão em JavaScript

Parâmetros de repouso

A sintaxe restante permite nós para representar um número indefinido de argumentos como um array. Veja uma função que soma todos os argumentos passados.

const sum = (...args) => args.reduce((prev, current) => prev + current);

consola.log(soma(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6

Sintaxe de propagação

O operador de dispersão permite-nos expandir objectos iteráveis em elementos individuais. Esta funcionalidade é o oposto do que conseguimos com os restantes parâmetros. Pode ser aplicado a todos os iteráveis, como arrays, objectos, conjuntos, mapas, etc.

const sum = (x, y, z) => x + y + z;
const numbers = [1, 2, 3];

console.log(soma(...números)); // 6

Três pontos em casos de utilização reais

Copiar uma matriz

A sintaxe de propagação vai efetivamente um nível mais profundo ao copiar uma matriz. Um nível significa que o primeiro nível de referências é copiado.

const array0 = [1, [2, 3]];
const array1 = [...array0];

console.log(array1); // [1, [2, 3]]

Criar uma matriz de elementos únicos

Crie o Conjunto que armazena apenas elementos únicos e converta-o de volta para uma matriz.

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

console.log(uniqueElements); // [1, 2, 3]

Concatenar matrizes

const array0 = [1, 2];
const array1 = [3, 4];
const concated = [...array0, ...array1];

console.log(concated); // [1, 2, 3, 4]

Cortar uma matriz

const [firstElement, ...newArray] = [1, 2, 3, 4];

consola.log(primeiroElemento); // 1
console.log(newArray); // [2, 3, 4]

Também podemos remover n primeiros elementos com vírgula.

const [, , , ...newArray] = [1, 2, 3, 4];

console.log(newArray); // [4]

Inserir uma matriz no início de outra matriz

const array0 = [4, 5, 6];
const array1 = [1, 2, 3];
const newArray = [...array1, ...array0];

console.log(newArray); // [ 1, 2, 3, 4, 5, 6 ]

Gerar uma matriz de números de 0 a n

const array = [...Array(10)].map((_, i) => i);

console.log(array); // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Desestruturação de um objeto

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

consola.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

Criar uma cópia de um objeto

let person = {
  nome: 'João',
  idade: 25,
  carteira: {
    soma: 500,
    moeda: 'USD'
  }
};
let personCopy = { ...person };

console.log(personCopy);
// {
// nome: 'João',
// idade: 25,
// carteira: {
// soma: 500,
// moeda: 'USD'
// }
// }

Note-se que a cópia do objeto que é criada é um novo objeto com todas as propriedades do objeto original mas sem nenhuma das suas informações de protótipo.

pessoa.idade = 20;

consola.log(pessoa.idade); // 20
consola.log(pessoaCópia.idade); // 25

Note-se que a sintaxe de propagação cria uma cópia "superficial" do objeto, pelo que a propriedade "wallet" será copiada apenas como uma referência ao sub-objeto original. Para uma clonagem profunda, pode utilizar a abordagem JSON stringify/parse ou o método 'cloneDeep' fornecido pelo Lodash, dependendo da complexidade do seu objeto. Em alguns casos, este método também pode ser útil:

let personCopy = { ...person, wallet = {...person.wallet}}; 

Adicionar condicionalmente propriedades a objectos

Podemos adicionar condicionalmente propriedades a um novo objeto que estamos a criar, utilizando o operador de propagação juntamente com a avaliação de curto-circuito.

const colors = {
  red: '#ff0000',
  verde: '#00ff00',
  blue: '#0000ff'
};
const black = {
  black: '#000000'
};

let extraBlack = false;
let conditionalMerge = {
  ...cores,
  ...(extraBlack ? preto : {})
};

console.log(conditionalMerge);
// {
// vermelho: '#ff0000',
// verde: '#00ff00',
// azul: '#0000ff'
// }

extraBlack = true;
conditionalMerge = {
  ...cores,
  ...(extraBlack ? preto : {})
};

console.log(conditionalMerge);
// {
// vermelho: '#ff0000',
// verde: '#00ff00',
// azul: '#0000ff'
// preto: '#000000'
// }

Dividir uma cadeia de caracteres em caracteres

Isto é semelhante a chamar o método split com uma string vazia como parâmetro.

const split = [...'qwerty'];
console.log(split); // [ 'q', 'w', 'e', 'r', 't', 'y' ]

Ler mais:

3 Desafios comuns do desenvolvimento de produtos de software para empresas em fase de arranque

O melhor tipo de projectos para Java

Como não matar um projeto com más práticas de codificação?