0

[iniciante] Trabalhando com arrays em javascript

Davi Junior
Davi Junior

Há um tempo atrás apareceu na minha timeline do linkedIn uma imagem que mostrava muito resumidamente como várias funções podiam ser utilizadas para manusear dados contidos em um array. Resolvi então escrever esse artigo para mostrar um pouco mais sobre isso e colocar alguns exemplos pra ficar mais fácil o entendimento.


Tudo o que foi escrito aqui tem como base a MDN (Mozilla Developer Network, uma das fontes mais respeitadas de documentação do javascript).


O que são Arrays em javascript?


Arrays são objetos que funcionam como listas no javascript, ou seja, um "amontoado" de dados que podem ou não ser do mesmo tipo. Dentro do array estão separados ordenadamente vários dados que aqui chamaremos de itens, cada item tem um índice, ou seja, uma posição conhecida e através dela podemos acessar qualquer item de um array.


ex:

var frutas = ['banana', 'maçã']
console.log(frutas[0]) //banana


Hoje vamos conhecer alguns metodos desse objeto que são utilizados para manusearmos os dados contidos nele.

Vamos falar sobre: filter, map, find, findIndex, fill, copyWithin, some, every e reduce.


filter():

Talvez o mais conhecido entre eles, o filter recebe uma função callback e a partir dela cria um novo array apenas com os dados que se enquadrem dentro da condição passada na função de retorno.


var estados = ["São Paulo", "Rio de Janeiro", "Espírito Santo", "Minas Gerais"]

var regex = /s/i; //expressão para validar tanto "S" quanto "s"

var estados_com_s = estados.filter(value => value.match(regex))
console.log(estados_com_s) 
// [ 'São Paulo', 'Espírito Santo', 'Minas Gerais' ]


map():

O map percorre todos os itens do array, um por um, executando os comandos escritos na sua função callback, serve para agilizar um processo que seria repetido em todos os itens do array.

var naturals = [1, 3, 4, 5, 6, 7, 8, 9]

var dobrados = naturals.map((item) => item*2)

console.log(dobrados); //[2, 6, 8, 10, 12, 14, 16, 18]


find() e findIndex():

Encontra a primeira ocorrência que satisfaça o que a função de teste passada como parâmetro propuser.

Enquanto o find retorna o item, o findIndex retorna o índice do ítem.


var naturals = [1, 3, 4, 5, 6, 7, 8, 9]


var primeiro_par = naturals.find(item => item%2 == 0)
var index_primeiro_par = naturals.findIndex(item => item%2 == 0)

console.log(primeiro_par) // 4
console.log(index_primeiro_par) // 2


fill():

Preenche o array com o valor dado, essa função recebe três parâmetros, o valor para preencher, o índice onde o preenchimento se inicia e o índice onde o preenchimento acaba.

O início e o fim são opcionais, se eles não forem passados o preenchimento ocorrerá em todos os itens.

Esse método altera o array inicial então é bom lembrar desse detalhe ao utilizá-lo.


var arr_to_fill = [0,0,0,0]


var preenchido = arr_to_fill.fill("javascript");
var preenchido1 = arr_to_fill.fill("teste", 2, 3);
var preenchido2 = arr_to_fill.fill("php", 0, 2);


console.log(preenchido) 
//["javascript","javascript","javascript","javascript"]
console.log(preenchido1)
//["javascript","javascript","teste","teste"]
console.log(preenchido2)
//["php","php","php","teste"]


copyWithin():

Copia itens dentro do próprio array, também recebe três parâmetros, o target, que é onde a cópia vai começar, o inicio (qual o primeiro item a ser copiado) e o fim ()/que na verdade é o primeiro item a não ser copiado).

var arr_copy = [9,0,1,2,3,4,5,6]
console.log(arr_copy);
//[
  9, 0, 1, 2,
  3, 4, 5, 6
]

arr_copy.copyWithin(0, 2, 4)


console.log(arr_copy);
//[
  1, 2, 1, 2,
  3, 4, 5, 6
]
//copiamos os valores dos indices 2 e 3 a partir do target (indice 0)


some() e every():

Os dois verificam se os itens atendem a condição passada e retornam um valor booleano (verdadeiro ou falso), a diferença é que no .some() o retorno é verdadeiro se pelo menos um item atender a condição, já no every() é necessário que todos atendam para que ele retorne como verdadeiro.


var every_true = ["oi", "oi", "oi", "oi"]
var every_false = ["oi", "tchau", "oi", "oi"]


console.log(every_true.every(item => item == "oi")) //true
console.log(every_false.every(item => item == "oi")) //false
console.log(every_false.some(item => item == "tchau")) //true
console.log(every_true.some(item => item == "tchau")) //false


reduce():

Executa uma função (um reducer) para cada elemento do array, armazenando o resultado a cada vez, resultando num único valor de retorno.

A cada iteração o valor é guardado no accumulator e o valor final é o valor dessa variável ao fim de todas as repetições


var reducer = (accumulator , current) => accumulator * current

var array = [1,2,3,4,5,6,7]


console.log(array.reduce(reducer)) //5040


Por hoje é isso! Espero ter ajudado alguém com esse post!

0
0

Comentários (2)

0
⚡Eros Lima

⚡Eros Lima

30/03/2021 01:12

muito bem feito, top Davi e bem explicado parabéns!

1
U

Udinei Silva

29/03/2021 18:40

Legal...Muito obrigado irmão! Show vlw!

Desenvolvedor de ideias.

Brasil