Transformações de arrays em

Sobre Transformações de arrays

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, ou seja, não modificam o array original. Em vez disso, devolvem um novo. Outros métodos, no entanto, manipulam o array sobre o qual são chamados e não devolvem o array modificado.

Abaixo apresentam-se alguns dos métodos mais usados para transformar arrays. Encontras 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 verdadeiro se o elemento deve ser mantido e falso 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 incorporado no 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 de início e um de fim, cria um sub-array a partir do array sobre o qual é chamado.

O elemento no índice final não será incluído. Além disso, todos os parâmetros são opcionais: o índice de início é, por omissão, 0, e o índice final é, por omissã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. Recebe 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 omissão, o sort ordena os elementos de um array convertendo-os primeiro em strings e aplicando depois a comparação de strings (vê conceito de comparação). A ordenação acontece in-place, o que significa que o array original é modificado. O sort também devolve esse array modificado, o que é conveniente 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']

const arr = [3, 1, 2, 10];
arr.sort();
// => [1, 10, 2, 3]
// Because the string '10' comes before '2' in dictionary order.

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 se deve manter a mesma

Assim, o problema de ordenar números resolve-se passando a função de comparação correta.

const arr = [3, 1, 2, 10];
arr.sort((a, b) => a - b);
// => [1, 2, 3, 10]
// "a - b" is negative when b is greater than a, positive when
// a is greater than b and 0 when they are equal.

Aqui está 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 } ]

Desde 2019, a especificação da linguagem determina que a ordenação tem de ser estável, mas não há garantias quanto ao desempenho (complexidade temporal e espacial).