DEV Community

loading...
Cover image for Métodos básicos de array

Métodos básicos de array

Junior Alves
Updated on ・5 min read

Quando comecei a usar javascript, percebi o quanto é fundamental aprender a manipular arrays, pois passamos a maior parte do tempo trabalhando com eles.

Sem aprender array você praticamente trava no aprendizado, e não conseguirá evoluir no domínio da linguagem

Por isso listei os principais métodos básicos para facilitar nossa vida no dia dia. A ideia é que este post possa servir de “consulta rápida” quando manipularmos um array.

Sumario

O que é um array:

Array é uma sequencia não ordenada de dados, cujo os elementos residem em um local especifico na memória do computador e podem se acessado através de index.
É a melhor forma de evitar criações exageradas de variáveis para armazenar informações de mesmo tipo fazendo assim um melhor controle de memoria.

No javaScript a forma mais comum de declarar um a array é atribuindo ele a uma variável.

const meuArray = [] 
Enter fullscreen mode Exit fullscreen mode

Os colchetes (brackets) é o proprio array.

Para declarar os valores do array, inserimos cada um dos valores dentro dos colchetes separados por virgula.

const meuArray = ['valor1', 'valor2', 3]
Enter fullscreen mode Exit fullscreen mode

É possivel construir arrays com qualquer tipo de valor misturados como strings, numbers e objetos, porem é altamente recomendado que sejam construído arrays com valores que tenham a mesma relação e tipo como no exemplo a baixo.

const frutas = ['banana', 'abacaxi', 'laranja'] // strings

const idades = [20, 10, 30] // "numbers"
Enter fullscreen mode Exit fullscreen mode

índices

Quando um array é criado, cada posição do array é relacionado a um index que por padrão começa em “0”, e aumenta de forma linear.

Ou seja a primeira posição do array tem o index 0, a segunda posição tem o index 1, a terceira posição tem o index 2 e assim por diante.
Portanto para acessarmos o valor “laranja” do array “frutas” basta colocar entre colchete o index da posição em que este valor está.

frutas = ['banana', 'abacaxi', 'laranja']

console.log(frutas[2])

'laranja'
Enter fullscreen mode Exit fullscreen mode

OBS: Muitos confundem a posição do valor com o seu index.

Veja: O valor ‘laranja’ do array ‘frutas’ é o terceiro valor do array, mas está na posição de index 2.

Isso é porque o index de um array começa em “0”. Portanto

frutas = ['banana', 'abacaxi', 'laranja']

console.log(frutas[0])

'banana'
Enter fullscreen mode Exit fullscreen mode

Métodos

Os métodos são as principais ferramentas para manipulação e interação com o array, e é muito importante domina-los.

Segue uma lista com alguns dos métodos mais utilizados.

push

Adiciona um item ao final de um array

frutas = ['laranja', 'abacaxi', 'pera']

frutas.push('limão')

['laranja', 'abacaxi', 'pera', 'limão']
Enter fullscreen mode Exit fullscreen mode

pop

Remove o ultimo item do array

frutas = ['laranja', 'abacaxi', 'pera']

frutas.pop()

['laranja', 'abacaxi']
Enter fullscreen mode Exit fullscreen mode

unshift

Adicionar um item no início do Array

frutas = ['pera', 'limão']

frutas.unshift('morango')

['morango', 'pera', 'limão']
Enter fullscreen mode Exit fullscreen mode

shift

Remover o primeiro item do Array

frutas = ['laranja', 'pera', 'limão']

frutas.shift()

['pera', 'limão']
Enter fullscreen mode Exit fullscreen mode

length

Mostra o tamanho total do array, ou o numero de elementos que o array tem.

frutas = ['banana', 'abacaxi', 'laranja']

console.log(frutas.length)

3
Enter fullscreen mode Exit fullscreen mode

index

Procurar e retorna o indice do array que da match com a pesquisa.

frutas = ['laranja', 'abacaxi', 'pera']

frutas.indexOf('abacaxi')

index 1
Enter fullscreen mode Exit fullscreen mode

splice

É utilizado para remover ou substituir itens do meio do array.
Ele recebe 3 parâmetros:

  • O index inicial da iteração.
  • O numero de elementos a serem removidos a partir do index inicial (contando com ele mesmo).
  • Os Elementos que serão adicionados no lugar dos elementos removidos.
const meuArray = [1, 2, 3, 4, 5, 6]

meuArray.splice(2, 3) 
// O parâmetro 2 é o index inicial da iteração,
// lembrando que o index 2 é o numero 3 deste array.
// O parâmetro 3 é o numero de elementos 
// que serão removidos a partir do index 2.

console.log(meuArray)
[1, 2, 6]
// O resultado mostra que o splice() removeu a partir do
// index 2, 3 elementos do array, contanto com o próprio index 2.
Enter fullscreen mode Exit fullscreen mode

É possivel substituir ou até adicionar elementos no meio do array

const meuArray = [1, 2, 3, 4, 5, 6]

meuArray.splice(1,3, "teste") // index 1 é o numero 2 do array

console.log(meuArray)
[1, "teste", 5, 6] 
// A partir do index 1 (contando com ele mesmo),
// foi removido os indexs 1, 2, 3 e adicionado
// no lugar destes a string "teste".
Enter fullscreen mode Exit fullscreen mode

OBS:
O splice modifica o próprio array, ele não gera um array novo, e por isso não da para atribuir o resultado do splice em uma nova variável.

const novoArray = meuArray.splice(1,3) // isso não funciona

//o novoArray será vazio []
Enter fullscreen mode Exit fullscreen mode

Também é possivel adicionar um novo elemento ao array sem remover nenhum outro, basta passar 0 no segundo parâmetro.

const meuArray = [1, 2, 3, 4, 5, 6]

meuArray.splice(1,0, "teste")

[1, "teste", 2, 3, 4, 5, 6]
Enter fullscreen mode Exit fullscreen mode

includes

Procura um item no array e retorna verdadeiro caso encontre.

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
Enter fullscreen mode Exit fullscreen mode

reverse

Simplesmente reverte as posições de um array.

const numbers = ['one','two','tree','four']

console.log(numbers.reverse())

['four','tree','two','one']
Enter fullscreen mode Exit fullscreen mode

join

Este método é muito utilizado para converter um array em uma string, pois ele junta todos os itens de um array e o retorna em uma string.
Ao chamar o método join() passamos como parâmetro o separador, nesse caso o '-'. Se não for passado nenhum separador, por padrão os elementos serão separados por ','.

const frutas = ['laranja', 'abacaxi', 'pera']

const stringFrutas = fruntas.join('-')

console.log(stringFrutas)

laranja-abacaxi-pera
Enter fullscreen mode Exit fullscreen mode

split

Este método é muito utilizado para transformar strings em um array. Ele faz o contrario do join() dividindo uma string em elementos de um array. Os critérios da divisão são passados como parâmetros.
O domínio de regex é muito útil para utilizar esse método

const name = "joao pedro"

name.split() // ["joao pedro"]

name.split('') // ['j','o','a','o',' ','p','e','d','r','o']

name.split(" ") // ["joao", "pedro"]
Enter fullscreen mode Exit fullscreen mode

O split também recebe como segundo argumento um delimitador, podendo assim criar arrays apenas com partes de uma string.

Veja um uso legal para os estes métodos aninhados em uma string

const name = "pedro"

const reverte = name.split('').reverse().join('')

console.log(reverte)

// ordep - revertemos as letras do nome pedro

Enter fullscreen mode Exit fullscreen mode

some

O método some() compara cada elemento do array com uma condição. E retorna verdadeiro quando a condição for satisfeita.
A condição é passada como parâmetro em uma função. O some() percorrerá o array aplicando a condição para cada elemento.

const meuArray = [1,2,3,4,5]

meuArray.some(element => element === 5)

true
Enter fullscreen mode Exit fullscreen mode

No exemplo acima, passamos uma função que testará se o valor é igual a 5. O some() percorrerá o array e passará para nossa função cada elemento do array na variável “element”, que por sua vez comparará o valor do element com o valor 5 testando assim a nossa condição. Uma vez satisfeita a condição ele retorna true.
É importante saber que já na primeira vez que a condição for satisfeita, o loop para, e retorna verdadeiro ignorando o resto do array.

Estes são os métodos básicos de manipulação de array. em breve adicionarei a este artigo os métodos (slice, splice, object.keys, sort, map, filter, reduce).

Discussion (0)