Transformações de arrays em

Sobre Transformações de arrays

Em JavaScript, a classe Array tem muitos métodos integrados poderosos para transformar arrays. Esses métodos tornam muito mais fácil converter um array em outro do que seria usando um simples laço for ou 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 são apresentados a seguir. Uma 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 arrow functions.

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 do original.

filter (puro)

Cria um array filtrando o atual, dada 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 indica como o elemento atual deve ser mesclado ao 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 inicial e um final, cria um subarray a partir do array em que é chamado.

O elemento no índice final não é incluído. Além disso, todos os parâmetros são opcionais: o índice inicial tem valor padrão 0, e o índice final tem valor padrão igual ao 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 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 uma comparação de strings (veja Comparação de conceitos). A ordenação acontece in-place, o que significa que o array original é modificado. sort também retorna esse array modificado, o que é conveniente 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']

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, 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

Com isso, o problema de ordenar números pode ser resolvido 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 uma função de comparação personalizada pode ser usada 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 deve ser estável, mas não há garantias quanto ao desempenho (complexidade de tempo e espaço).