Manipulação de Array: Entendendo os Métodos de Array em JavaScript

O que são Arrays em JavaScript? Arrays JavaScript são tipos de dados que podem armazenar uma coleção de elementos. Esses elementos podem ser de qualquer tipo de dados, incluindo números, strings e objetos. Arrays em JavaScript são dinâmicos, o que significa que você pode adicionar ou remover elementos deles depois de terem sido criados.

Neste tutorial, veremos todos os métodos de array do JavaScript e como eles são aplicados na prática.

Tipos de métodos Array

Existem vários métodos para manipular arrays JavaScript. Alguns desses métodos são:

1. concat()

Este método é usado para mesclar dois ou mais arrays. Ele não modifica os arrays originais, mas retorna um novo array que contém os elementos dos arrays originais.

Aqui está um exemplo de como `concat()` pode ser usado em JavaScript:

 const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const array3 = [7, 8, 9]; const mergedArray = array1.concat(array2, array3); // mergedArray is [1, 2, 3, 4, 5, 6, 7, 8, 9]

No exemplo acima, array1, array2 e array3 são todos mesclados em um único array chamado `mergedArray`. `concat()` recebe qualquer número de arrays como argumentos e retorna um novo array que contém todos os elementos dos arrays originais.

Você também pode usar `concat()` para mesclar arrays com valores não array. Por exemplo:

 const array1 = [1, 2, 3]; const mergedArray = array1.concat(4, 5, 6); // mergedArray is [1, 2, 3, 4, 5, 6]

Nesse caso, os valores 4, 5 e 6 são adicionados ao final de array1 para criar o `mergedArray`.

Observe que `concat()` não modifica os arrays originais. Em vez disso, ele cria uma nova matriz que contém os elementos das matrizes originais. Se você quiser modificar um array no lugar, você pode usar o método `push()`.

2. junte-se()

Este método é usado para juntar todos os elementos de um array em uma string. É necessário um parâmetro separador opcional, que especifica o caractere a ser usado para separar os elementos do array na string resultante. Se nenhum separador for fornecido, os elementos serão separados por uma vírgula.

Aqui está um exemplo de como `join()` pode ser usado em JavaScript:

 const array = ['apple', 'banana', 'orange']; const fruitString = array.join(); // fruitString is 'apple,banana,orange' const array = [1, 2, 3]; const numberString = array.join('-'); // numberString is '1-2-3'

No primeiro exemplo, os elementos do array são unidos em uma única string com uma vírgula como separador. No segundo exemplo, os elementos da matriz são unidos em uma única string com um hífen como separador.

Você também pode usar `join()` em um array de arrays para criar uma string de arrays aninhados:

 const array = [[1, 2], [3, 4], [5, 6]]; const nestedArrayString = array.join('-'); // nestedArrayString is '1,2-3,4-5,6'

Note que `join()` não modifica o array original. Ele cria uma nova string que contém os elementos do array. Se você quiser modificar o array no lugar, você pode usar o método `splice()`.

3. pop()

Este método é usado para remover o último elemento de uma matriz e retorná-lo. Ele modifica o array original.

Aqui está um exemplo de como `pop()` pode ser usado em JavaScript:

 const array = [1, 2, 3, 4, 5]; const lastElement = array.pop(); // lastElement is 5 // array is [1, 2, 3, 4]

Neste exemplo, o método `pop()` remove o último elemento (5) do array e o atribui à variável `lastElement`. A matriz é então modificada para remover o último elemento, deixando-o com um comprimento de 4.

Você também pode usar `pop()` em combinação com outros métodos de array, como `push()` para adicionar elementos ao final do array:

 const array = [1, 2, 3]; array.push(4); array.pop(); // array is [1, 2, 3]

Neste exemplo, o método `push()` adiciona o elemento 4 ao final do array, e então o método `pop()` o remove novamente, deixando o array inalterado.

Note que se o array estiver vazio, `pop()` retorna indefinido.

 const array = []; const element = array.pop(); // element is undefined

4. empurre ()

Este método é usado para adicionar um ou mais elementos ao final de uma matriz. Ele modifica o array original e retorna o novo comprimento do array.

Aqui está um exemplo de como push() pode ser usado em JavaScript:

 const array = [1, 2, 3]; const newLength = array.push(4, 5, 6); // array is [1, 2, 3, 4, 5, 6] // newLength is 6

Neste exemplo, o método push() adiciona os elementos 4, 5 e 6 ao final da matriz e retorna o novo comprimento da matriz (6). A matriz é então modificada para incluir esses elementos.

Você também pode usar push() para adicionar um array de elementos ao final de outro array:

 const array = [1, 2, 3]; const newLength = array.push([4, 5, 6]); // array is [1, 2, 3, [4, 5, 6]] // newLength is 4

Neste exemplo, o método push() adiciona a matriz [4, 5, 6] como um único elemento ao final da matriz e retorna o novo comprimento da matriz (4).

Observe que push() modifica o array original. Se quiser criar um novo array que inclua os elementos do array original, você pode usar o método concat().

5. shift()

Este método é usado para remover o primeiro elemento de uma matriz e retorná-lo. Ele modifica o array original.

Aqui está um exemplo de como shift() pode ser usado em JavaScript:

 const array = [1, 2, 3, 4, 5]; const firstElement = array.shift(); // firstElement is 1 // array is [2, 3, 4, 5]

Neste exemplo, o método shift() remove o primeiro elemento (1) da matriz e o atribui à variável firstElement. A matriz é então modificada para remover o primeiro elemento, deixando-o com um comprimento de 4.

Você também pode usar shift() em combinação com outros métodos de array, como unshift() para adicionar elementos ao início do array:

 const array = [1, 2, 3]; array.unshift(0); array.shift(); // array is [1, 2, 3]

Neste exemplo, o método unshift() adiciona o elemento 0 ao início do array e, em seguida, o método shift() o remove novamente, deixando o array inalterado.

Observe que se a matriz estiver vazia, shift() retornará indefinido.

 const array = []; const element = array.shift(); // element is undefined

6. unshift()

Este método é usado para adicionar um ou mais elementos ao início de uma matriz. Ele modifica o array original e retorna o novo comprimento do array.

Aqui está um exemplo de como unshift() pode ser usado em JavaScript:

 const array = [1, 2, 3]; const newLength = array.unshift(4, 5, 6); // array is [4, 5, 6, 1, 2, 3] // newLength is 6

Neste exemplo, o método unshift() adiciona os elementos 4, 5 e 6 ao início da matriz e retorna o novo comprimento da matriz (6). A matriz é então modificada para incluir esses elementos no início.

Você também pode usar unshift() para adicionar um array de elementos ao início de outro array:

 const array = [1, 2, 3]; const newLength = array.unshift([4, 5, 6]); // array is [[4, 5, 6], 1, 2, 3] // newLength is 4

Neste exemplo, o método unshift() adiciona a matriz [4, 5, 6] como um único elemento ao início da matriz e retorna o novo comprimento da matriz (4).

Observe que unshift() modifica o array original. Se quiser criar um novo array que inclua os elementos do array original, você pode usar o método concat().

7. fatia()

Este método é usado para extrair uma seção de um array e retornar um novo array. Ele não modifica o array original. O método slice usa dois parâmetros opcionais: um índice inicial e um índice final.

Se o índice inicial não for especificado, o padrão será o início da matriz. Se o índice final não for especificado, o padrão será o final da matriz.

Aqui está um exemplo de como slice() pode ser usado em JavaScript:

 const array = [1, 2, 3, 4, 5]; const slice = array.slice(1, 3); // slice is [2, 3] // array is [1, 2, 3, 4, 5] (unchanged)

Neste exemplo, o método slice() extrai os elementos nos índices 1 e 2 (2 e 3) do array e os retorna em um novo array chamado slice. A matriz original não é modificada.

Você também pode usar slice() com um único argumento, que indica o índice inicial:

 const array = [1, 2, 3, 4, 5]; const slice = array.slice(2); // slice is [3, 4, 5] // array is [1, 2, 3, 4, 5] (unchanged)

Neste caso, o método slice() extrai todos os elementos do array começando do índice 2 (inclusive) até o final do array.

Você também pode usar índices negativos com slice(), que indica a posição do elemento em relação ao final do array:

 const array = [1, 2, 3, 4, 5]; const slice = array.slice(-2); // slice is [4, 5] // array is [1, 2, 3, 4, 5] (unchanged)

Nesse caso, o método slice() extrai os dois últimos elementos do array.

Observe que se o índice inicial for maior que o índice final, slice() retornará uma matriz vazia.

8. emenda()

O método splice() em JavaScript é usado para adicionar ou remover elementos de um array e retornar os elementos removidos como um novo array. Ele modifica o array original.

O método splice() usa pelo menos dois argumentos: um índice inicial e uma contagem de exclusão. O índice inicial é o índice no qual a emenda começa e a contagem de exclusão é o número de elementos a serem removidos.

Aqui está um exemplo de como splice() pode ser usado para remover elementos de um array:

 const array = [1, 2, 3, 4, 5]; const removedElements = array.splice(1, 2); // removedElements is [2, 3] // array is [1, 4, 5]

Neste exemplo, o método splice() remove os elementos nos índices 1 e 2 (2 e 3) da matriz e os retorna em uma nova matriz chamada removeElements. A matriz original é modificada para remover esses elementos.

Você também pode usar splice() para adicionar elementos a um array:

 const array = [1, 2, 3]; const removedElements = array.splice(1, 0, 4, 5, 6); // removedElements is [] // array is [1, 4, 5, 6, 2, 3]

Nesse caso, o método splice() adiciona os elementos 4, 5 e 6 à matriz no índice 1 e a contagem de exclusão é 0, portanto, nenhum elemento é removido. A matriz original é modificada para incluir esses elementos.

Você também pode usar splice() para adicionar e remover elementos ao mesmo tempo:

 const array = [1, 2, 3, 4, 5]; const removedElements = array.splice(1, 2, 6, 7); // removedElements is [2, 3] // array is [1, 6, 7, 4, 5]

Neste exemplo, o método splice() remove os elementos nos índices 1 e 2 (2 e 3) da matriz e adiciona os elementos 6 e 7 nos mesmos índices. A matriz original é modificada para incluir os elementos adicionados e remover os elementos removidos.

Observe que, se o índice inicial for maior que o comprimento do array, splice() não adiciona ou remove nenhum elemento, mas simplesmente retorna um array vazio.

9. reverso ()

Este método é usado para inverter a ordem dos elementos em uma matriz. Ele modifica o array original.

Aqui está um exemplo de como reverse() pode ser usado em JavaScript:

 const array = [1, 2, 3, 4, 5]; array.reverse(); // array is [5, 4, 3, 2, 1]

Neste exemplo, o método reverse() inverte a ordem dos elementos na matriz, de modo que o primeiro elemento se torne o último e o último elemento se torne o primeiro.

Você também pode usar reverse() em uma matriz de objetos:

 const array = [{id: 1}, {id: 2}, {id: 3}]; array.reverse(); // array is [{id: 3}, {id: 2}, {id: 1}]

Nesse caso, o método reverse() inverte a ordem dos objetos no array.

Observe que reverse() modifica o array original. Se você quiser criar um novo array que seja o inverso do array original, você pode usar os métodos slice() e reverse() juntos:

 const array = [1, 2, 3, 4, 5]; const reversedArray = array.slice().reverse(); // reversedArray is [5, 4, 3, 2, 1] // array is [1, 2, 3, 4, 5] (unchanged)

Neste exemplo, o método slice() cria uma cópia rasa do array, e o método reverse() inverte os elementos na cópia, deixando o array original inalterado.

10. sort()

Este método é usado para classificar os elementos de uma matriz no local. Ele pode usar uma função de comparação opcional como parâmetro, que permite especificar um algoritmo de classificação personalizado. Se nenhuma função de comparação for fornecida, os elementos serão classificados em ordem crescente de acordo com seus pontos de código Unicode.

Aqui está um exemplo de como sort() pode ser usado em JavaScript:

 const array = [5, 2, 4, 1, 3]; array.sort(); // array is [1, 2, 3, 4, 5]

Neste exemplo, o método sort() classifica os elementos do array em ordem crescente.

Você também pode usar sort() com uma função de comparação como argumento para especificar uma ordem de classificação personalizada:

 const array = [{name: 'John'}, {name: 'Jane'}, {name: 'Bob'}]; array.sort((a, b) => a.name.localeCompare(b.name)); // array is [{name: 'Bob'}, {name: 'Jane'}, {name: 'John'}]

Nesse caso, o método sort() classifica os objetos na matriz com base em suas propriedades de nome usando o método localeCompare(). Observe que sort() modifica o array original.

Também por padrão, sort() converte os elementos da matriz em strings e os classifica com base em seus valores de ponto Unicode. Isso pode levar a resultados inesperados para valores não string. Por exemplo:

 const array = [10, 5, 8, 1, 7]; array.sort(); // array is [1, 10, 5, 7, 8]

Nesse caso, o método sort() converte os números em strings antes de classificá-los, portanto, a matriz resultante não está em ordem numérica. Para classificar a matriz em ordem numérica, você pode usar uma função de comparação como argumento para sort():

 const array = [10, 5, 8, 1, 7]; array.sort((a, b) => a - b); // array is [1, 5, 7, 8, 10]

Se você deseja classificar os elementos de uma matriz em ordem decrescente, pode usar a seguinte função de comparação como argumento para sort():

 const array = [5, 2, 4, 1, 3]; array.sort((a, b) => b - a); // array is [5, 4, 3, 2, 1]

Conclusão

Esses são apenas alguns dos muitos métodos disponíveis para trabalhar com arrays em JavaScript. Eu espero que isso ajude! Deixe-me saber se você tem alguma dúvida.