Convertendo e transformando arrays em JavaScript

Muitas vezes precisamos alterar um array para atender a uma necessidade específica. Por exemplo, pode ser necessário reorganizar os objetos em uma matriz para que ela seja classificada pelo valor de uma propriedade específica ou pode ser necessário mesclar várias matrizes em uma única matriz. Em muitos casos, pode ser necessário transformar completamente uma matriz de objetos em outra matriz de objetos completamente diferentes.

Neste tutorial, você aprenderá sobre as ferramentas fornecidas pelo JavaScript para mesclar, copiar, converter e filtrar matrizes. Antes de começarmos, no entanto, é importante ressaltar que embora eu use os termos “mesclar”, “converter”, “transformar” e “filtrar”, muito raramente esses processos alteram um array existente. Em vez disso, eles criam uma nova matriz que contém os dados mesclados, convertidos, transformados e filtrados, deixando a matriz original em seu formato original e inalterado.

Mesclando Arrays

Talvez você esteja trabalhando com dados provenientes de fontes diferentes ou tenha vários arrays e queira combiná-los em um único array para facilitar o processamento. Independentemente de seus motivos, às vezes você precisa combinar vários arrays em um único array. JavaScript nos dá duas maneiras de combinar arrays. Você pode usar o concat() método ou o operador de propagação (...).

O concat() O método é usado para mesclar dois ou mais arrays e retorna um novo array contendo os elementos dos arrays unidos. A nova matriz será primeiro preenchida pelos elementos no objeto de matriz no qual você chama o método. Ele será então preenchido pelos elementos dos objetos array que você passar para o método. Por exemplo:

1

const array1 = [1, 2, 3];

2

const array2 = [4, 5, 6];

3

const mergedArray = array1.concat(array2);

4

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

Neste código, temos dois arrays, array1 e array2. Mesclamos esses arrays em um novo array chamado mergedArray usando o concat() método, e você pode ver que a matriz resultante contém os elementos [1, 2, 3, 4, 5, 6]. O exemplo abaixo altera o código para que o concat() método é chamado array2:

1

const array1 = [1, 2, 3];

2

const array2 = [4, 5, 6];

3

const mergedArray2 = array2.concat(array1);

4

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

Observe que neste código, os elementos da matriz resultante estão em uma ordem diferente: [4, 5, 6, 1, 2, 3]. Portanto, se a ordem dos elementos for importante para você, certifique-se de usar concat() na ordem desejada.

O operador spread, por outro lado, permite expandir os elementos de uma matriz e pode ser usado em uma nova matriz literal para mesclar matrizes. Por exemplo:

1

const array1 = [1, 2, 3];

2

const array2 = [4, 5, 6];

3

const mergedArray = [...array1, ...array2];

4

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

Aqui, novamente temos duas matrizes, array1 e array2mas nós os mesclamos em um novo array chamado mergedArray usando o operador spread. O resultado final é o mesmo do primeiro concat() exemplo, mas usar essa abordagem dá a você (e aos que estão lendo seu código) uma compreensão mais clara de como o mergedArray é construído e povoado.

Copiando matrizes

Existem várias razões pelas quais você pode querer copiar um array. Você pode querer preservar os dados originais de uma matriz (se forem valores simples) ou evitar quaisquer efeitos colaterais não intencionais de trabalhar ou manipular um objeto de matriz em si. Independentemente do motivo, o JavaScript torna muito fácil criar uma cópia de um array.

Para criar uma cópia de um array, você pode usar o slice() método. Este método retorna um cópia rasa (mais sobre isso depois) da matriz que você chama. Por exemplo:

1

const originalArray = [1, 2, 3, 4, 5];

2

const copiedArray = originalArray.slice();

3

4

console.log(copiedArray); // output: [1, 2, 3, 4, 5]

Este código define um matriz chamada originalArraye criamos uma cópia dele usando o método slice() método sem passar nenhum argumento. O copiedArray O objeto contém os mesmos valores que o original, mas é um objeto de matriz completamente diferente.

Você também pode usar o slice() para extrair uma parte de uma matriz especificando os índices inicial e final.

1

const originalArray = [1, 2, 3, 4, 5];

2

const slicedArray = originalArray.slice(1, 4);

3

4

console.log(slicedArray); // output: [2, 3, 4]

Neste exemplo, criamos um array fatiado que contém os elementos do índice 1 ao índice 3 (o índice final passado para o slice() método não está incluído) da matriz original.

O que é uma cópia rasa?

Uma cópia superficial refere-se à criação de um novo objeto ou array que é uma cópia do objeto ou coleção original, mas apenas no primeiro nível. Em outras palavras, uma cópia rasa duplica a estrutura do objeto original, mas não os objetos ou elementos contidos nele.

Quando você cria uma cópia superficial de um array, o novo array terá seu próprio conjunto de referências aos mesmos objetos ou elementos do array original. Isso significa que, se a matriz original contiver valores simples (por exemplo, números, strings ou booleanos), a cópia superficial criará efetivamente uma nova matriz com os mesmos valores. No entanto, se a matriz original contiver objetos ou outros tipos de referência (como outras matrizes ou objetos), a cópia superficial copiará apenas as referências a esses objetos – não os próprios objetos. Como resultado, quaisquer alterações feitas nos objetos dentro da matriz original também serão refletidas na cópia superficial e vice-versa, pois ainda se referem aos mesmos objetos na memória.

Em contraste, uma cópia profunda cria um novo objeto ou coleção que é uma cópia completa e independente do objeto ou coleção original, incluindo todos os objetos ou elementos aninhados. Isso significa que as alterações feitas nos objetos dentro da matriz original não afetarão a cópia profunda e vice-versa, pois eles têm seu próprio conjunto de objetos na memória.

Aqui está um exemplo para ilustrar a diferença:

1

const originalArray = [1, 2, { a: 3 }];

2

const shallowCopy = originalArray.slice();

3

const deepCopy = JSON.parse(JSON.stringify(originalArray));

4

5

originalArray[2].a = 4;

6

7

console.log(shallowCopy); // output: [1, 2, { a: 4 }]

8

console.log(deepCopy); // output: [1, 2, { a: 3 }]

Neste exemplo, o shallowCopy reflete as alterações feitas no array original, enquanto o deepCopy permanece inalterado.

Convertendo Arrays em Strings

Arrays são uma construção de programação e muitas vezes precisamos converter o array em uma string. Talvez precisemos apresentar o conteúdo de um array para o usuário. Talvez precisemos serializar o conteúdo de uma matriz em um formato diferente de JSON.

Usando o join() método, você pode converter uma matriz em uma string. Por padrão, os elementos são separados por vírgula, mas você pode especificar um separador personalizado passando uma string como argumento para o join() método. Por exemplo:

1

const fruitArray = ['apple', 'banana', 'cherry'];

2

const fruitString = fruitArray.join(', ');

3

4

console.log(fruitString); // output: "apple, banana, cherry"

Neste exemplo, temos um array chamado fruitArraye nós o convertemos em uma string usando o método join() método com um separador personalizado — uma vírgula seguida por um espaço.

Um exemplo mais útil de uso join() é gerar uma string de consulta de URL de uma matriz que contém parâmetros de string de consulta de URL, conforme mostrado aqui:

1

const queryParamsArray = [

2

  'search=JavaScript',

3

  'page=1',

4

  'sort=relevance',

5

];

6

7

const queryString = queryParamsArray.join('&');

8

9

const url = 'https://example.com/api?' + queryString;

10

console.log(url); // output: "https://example.com/api?search=JavaScript&page=1&sort=relevance"

Neste código, temos um array chamado queryParamsArray que contém um conjunto de parâmetros de string de consulta. Usamos então o join() método para concatenar os elementos da matriz com o & delimitador para formar uma string de consulta. Por fim, construímos a URL completa anexando a string de consulta à URL base.

A geração de sequências de parâmetros de consulta de URL é um caso de uso comum para usar join(). No entanto, em vez de strings simples e predefinidas, conforme mostrado neste exemplo, você trabalharia com uma matriz de objetos complexos que teria de transformar em uma matriz de strings que poderiam ser unidas.

Arrays transformadores

A capacidade de transformar um array é um dos recursos mais úteis e poderosos do JavaScript. Como mencionei anteriormente neste tutorial, você não está realmente transformando um array — você está criando um novo array que contém os objetos ou valores transformados. A matriz original não é modificada.

Para transformar uma matriz, você usa o map() método. Ele aceita uma função de retorno de chamada como argumento e executa essa função para cada elemento da matriz.

1

map(function (currentElement[, index, array]));

A função callback pode aceitar os três argumentos a seguir:

• currentElement: o elemento atual para transformar (obrigatório)
• index: o índice do elemento atual (opcional)
• array: a matriz o map() método é chamado (opcional)

O valor de retorno da função callback é então armazenado como um elemento no novo array. Por exemplo:

1

const numbers = [1, 2, 3, 4, 5];

2

3

function square(number) {

4

  return number * number;

5

}

6

7

const squaredNumbers = numbers.map(square);

8

9

console.log(squaredNumbers); // output: [1, 4, 9, 16, 25]

Neste código, temos um array chamado numberse declaramos uma função chamada square que recebe um número como entrada e retorna o quadrado desse número. Nós passamos o square função para numbers.map() para criar um novo array, chamado squaredNumbersque contém os valores ao quadrado dos números originais.

Mas vamos ver um exemplo que cria uma string de consulta de URL a partir de uma matriz de objetos. A matriz original conterá objetos que têm param (para o nome do parâmetro) e value (para o valor do parâmetro) propriedades.

1

const queryParams = [

2

  { param: 'search', value: 'JavaScript' },

3

  { param: 'page', value: 1 },

4

  { param: 'sort', value: 'relevance' },

5

];

6

7

function createParams(obj) {

8

  return obj.param + '=' + obj.value;

9

}

10

11

const queryStringArray = queryParams.map(createParams);

12

13

const queryString = queryStringArray.join('&');

14

15

const url = 'https://example.com/api?' + queryString;

16

console.log(url); // output: "https://example.com/api?search=JavaScript&page=1&sort=relevance"

Neste exemplo, temos um array chamado queryParams que contém objetos que queremos converter em uma string de consulta. Declaramos uma função chamada createParams que aceita um objeto como entrada e retorna uma string no formato “param=value“. Em seguida, criamos uma nova matriz chamada queryStringArray aplicando o createParams função para cada objeto na matriz original usando o map() método.

Em seguida nós join() o queryStringArray para criar a string de consulta final, usando o & delimitador para separar cada par parâmetro=valor e, em seguida, construímos a URL completa anexando a string de consulta à URL base.

Usando o map() O método é uma parte vital do trabalho com arrays, mas às vezes só precisamos trabalhar com alguns elementos dentro de um array.

Matrizes de filtragem

O filter() O método permite criar uma nova matriz que contém apenas os elementos que satisfazem uma determinada condição. Isso é obtido passando uma função de retorno de chamada para o filter() método que testa cada elemento no array original. Se a função de retorno de chamada retornar true, o elemento é incluído na nova matriz; se voltar falseo elemento é excluído.

A função callback usa a mesma assinatura que o map() função de retorno de chamada do método:

1

filter(function(currentElement[, index, array]));

O currentElement parâmetro é obrigatório, mas index e array são opcionais. Por exemplo:

1

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

2

3

function isEven(number) {

4

  return number % 2 === 0;

5

}

6

7

const evenNumbers = numbers.filter(isEven);

8

9

console.log(evenNumbers); // output: [2, 4, 6, 8, 10]

Neste exemplo, temos um array chamado numbers. Declaramos uma função chamada isEven que recebe um número como entrada e retorna true se o número for par (ou seja, divisível por 2) ou false de outra forma. Criamos um novo array chamado evenNumbers filtrando o array original usando o isEven funcionar como a função de retorno de chamada para o filter() método. O resultado evenNumbers array contém apenas os números pares do array original.

O filter() O método é uma ferramenta poderosa para processar matrizes, permitindo extrair facilmente dados relevantes ou criar subconjuntos de uma matriz com base em critérios específicos.

Conclusão

Arrays são um dos objetos mais versáteis e úteis em JavaScript porque temos as ferramentas para mesclar, copiar, converter, transformar e filtrá-los facilmente. Cada uma dessas técnicas atende a um propósito específico e você pode combiná-las de várias maneiras para manipular e processar matrizes com eficácia em seus aplicativos JavaScript. Ao entender e aplicar esses métodos, você estará mais bem equipado para lidar com uma ampla gama de desafios de programação que envolvem o trabalho com arrays.

À medida que você continua a desenvolver suas habilidades em JavaScript, lembre-se de praticar o uso desses métodos de matriz e explorar outras funções de matriz integradas disponíveis na linguagem. Isso ajudará você a se tornar mais proficiente em JavaScript e permitirá que você escreva um código mais eficiente, limpo e de fácil manutenção. Codificação feliz!