Encantamentos transformadores de Elyse

Em JavaScript, a classe Array tem muitos métodos nativos poderosos para transformar arrays. Esses métodos tornam muito mais fácil converter um array em outro do que seria com um simples laço for ou com uma manipulação mais direta.

Alguns métodos são puros, ou seja, não modificam o array original. Em vez disso, retornam um novo array. Outros métodos, porém, manipulam o array em que são chamados e não retornam o array modificado.

Alguns dos métodos mais usados para transformar arrays estão apresentados abaixo. A lista completa dos métodos disponíveis está na documentação da MDN.

map (puro)

Crie um novo array transformando cada elemento de acordo com uma função passada como argumento. Essas funções de callback costumam ser escritas como funções arrow.

let arr = [1, 2, 3, 4];

const newArr = arr.map((value) => value - 1);
console.log(newArr);
// => [0, 1, 2, 3]
console.log(arr);
// => [1, 2, 3, 4]

Vale notar que o array resultante sempre terá o mesmo comprimento que o original.

filter (puro)

Cria um array filtrando o atual, a partir de uma função de filtragem (que retorna true se o elemento deve ser mantido e false se deve ser removido).

let arr = [1, 2, 3, 4];

arr.filter((value) => value % 2 === 0);
// => [2, 4]

reduce (puro)

Reduz o array a um único valor usando uma função que recebe um acumulador e o elemento atual do array como parâmetros. Essa função diz como o elemento atual deve ser combinado com o acumulador e retorna o acumulador que será usado na próxima iteração.

let arr = [1, 2, 3, 4];

// Get the sum of elements
arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// => 10

// Classify the numbers by whether they are odd or not
arr.reduce(
  (accumulator, currentValue) => {
    if (currentValue % 2 === 0) {
      accumulator.even.push(currentValue);
    } else {
      accumulator.odd.push(currentValue);
    }

    return accumulator;
  },
  { even: [], odd: [] },
);
// => { even: [2, 4], odd: [1, 3] }

reverse

Inverte os elementos de um array.

const arr = [1, 2, 3, 4];

arr.reverse();
// => [4, 3, 2, 1]

Esse método modifica o array em que é chamado.

slice (puro)

Dado um índice de início e um de fim, cria um subarray a partir do array passado como parâmetro.

O elemento no índice de fim não será incluído. Além disso, todos os parâmetros são opcionais: o índice de início é 0 por padrão, e o índice de fim é o comprimento do array por padrão.

const arr = [1, 2, 3, 4];

arr.slice(1, 2); // [2]
arr.slice(1); // [2, 3, 4]
// You can also use negative numbers, that represent the indexes
// starting from the end of the array
arr.slice(-2); // [3, 4]

splice

Remove ou substitui e/ou adiciona novos elementos de um array.

Ele recebe os seguintes parâmetros:

• o índice do elemento onde começar a modificar o array
• o número de elementos a excluir
• os elementos a inserir no array (opcional)

splice retorna os elementos que foram removidos.

const arr = ['1', '2', '5', '6'];

// Insert an element at index 2
arr.splice(2, 0, '3');
console.log(arr);
// => ['1', '2', '3', '5', '6']

// Remove 2 elements, starting at index 3 and insert 2 elements
const removed = arr.splice(3, 2, '4', '5');
console.log(removed);
// => ['5', '6']
console.log(arr);
// => ['1', '2', '3', '4', '5']

// Remove 1 element at index 1
arr.splice(1, 1);
console.log(arr);
// => ['1', '3', '4', '5']

sort

Por padrão, sort ordena os elementos de um array primeiro convertendo-os em strings e depois aplicando a comparação de strings (veja conceito de comparação). A ordenação acontece no local, o que significa que o array original é modificado. sort também retorna esse array modificado, o que é útil se você quiser encadear outros métodos a ele.

const arr = ['c', 'a', 'z', 'b'];
const result = arr.sort();
console.log(result);
// => ['a', 'b', 'c', 'z']
console.log(arr);
// => ['a', 'b', 'c', 'z']

Para personalizar o comportamento da ordenação, você pode passar uma função de comparação como argumento. A própria função de comparação é chamada com dois argumentos, que são dois elementos do array. Ela então precisa retornar o seguinte:

• um número negativo se o primeiro argumento deve ser ordenado antes do segundo
• um número positivo se o primeiro argumento deve ser ordenado depois do segundo
• 0 se a ordem dos elementos deve permanecer a mesma

Veja um exemplo de como usar uma função de comparação personalizada para ordenar um array de objetos.

const arr = [
  { name: 'Lydia', age: 7 },
  { name: 'Anne', age: 34 },
  { name: 'Holger', age: 59 },
];

arr.sort((item1, item2) => {
  if (item1.name < item2.name) {
    return -1;
  }
  if (item1.name > item2.name) {
    return 1;
  }
  return 0;
});
// => [ { name: 'Anne', age: 34 }, { name: 'Holger', age: 59 },
// { name: 'Lydia', age: 7 } ]