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 = []
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]
É 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"
í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'
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'
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']
pop
Remove o ultimo item do array
frutas = ['laranja', 'abacaxi', 'pera']
frutas.pop()
['laranja', 'abacaxi']
unshift
Adicionar um item no início do Array
frutas = ['pera', 'limão']
frutas.unshift('morango')
['morango', 'pera', 'limão']
shift
Remover o primeiro item do Array
frutas = ['laranja', 'pera', 'limão']
frutas.shift()
['pera', 'limão']
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
index
Procurar e retorna o indice do array que da match com a pesquisa.
frutas = ['laranja', 'abacaxi', 'pera']
frutas.indexOf('abacaxi')
index 1
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.
É 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".
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 []
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]
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
reverse
Simplesmente reverte as posições de um array.
const numbers = ['one','two','tree','four']
console.log(numbers.reverse())
['four','tree','two','one']
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
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"]
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
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
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).
Top comments (0)