Os encantamentos transformadores de Elyse

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

Alguns métodos são puros, o que significa que não modificam o array original. Devolvem um novo array. Outros métodos, no entanto, manipulam o array sobre o qual são chamados e não devolvem o array modificado.

Abaixo apresentamos alguns dos métodos mais usados para transformar arrays. Encontra a lista completa dos métodos disponíveis na documentação da MDN.

map (puro)

Cria um novo array transformando cada elemento de acordo com uma função passada como argumento. Estas funções de callback são muitas vezes 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 a pena notar que o array resultante terá sempre o mesmo comprimento que o original.

filter (puro)

Cria um array filtrando o atual, dada uma função de filtragem (que devolve 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. Esta função indica como o elemento atual deve ser combinado com o acumulador e devolve o acumulador que será usado na iteração seguinte.

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]

Este método modifica o array sobre o qual é chamado.

slice (puro)

Dado um índice inicial e um índice final, cria um sub-array a partir do array recebido como parâmetro.

O elemento no índice final não é incluído. Além disso, todos os parâmetros são opcionais: o índice inicial tem como predefinição 0 e o índice final tem como predefinição o comprimento do array.

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, substitui e/ou adiciona novos elementos de um array.

Aceita os seguintes parâmetros:

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

O splice devolve 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 predefinição, o sort ordena os elementos de um array convertendo-os primeiro em strings e aplicando depois uma comparação de strings (ver Comparação de conceitos). A ordenação acontece in-place, o que significa que o array original é modificado. O sort também devolve esse array modificado, o que é útil se quiseres encadear outros métodos a seguir.

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, podes 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. Depois, tem de devolver 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 igual

Eis 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 } ]