Métodos para arrays em javascript — parte 03

OBS: se quiser me ajudar agora pode ler direto do meu site: https://mayconbalves.com.br

Essa é a terceira e última parte sobre alguns métodos que podem nos dar aquela “forcinha” no nosso dia-a-dia. Se ainda leu os dois primeiros artigos, vou deixar ambos aqui!! Parte 01 e Parte 02.

Agora sem mais delongas, bora codar.

filter()

Cria um novo array a com todos os elementos que passarem no teste do filtro

const cars =
[
 {
  name: 'corsa',
  modelo: 'automatico',
  ano: 2005
 },
 {
  name: 'vectra',
  modelo: 'manual',
  ano: 1998
 },
 {
  name: 'voyage',
  modelo: 'automatico',
  ano: 2018
 },
 {
  name: 'gol',
  modelo: 'manual',
  ano: 1996
 }
]
cars.filter(car => {
  if(car.modelo === 'manual') return car
})
// retorno do novo array
[
 {
  name: 'vectra',
  modelo: 'manual',
  ano: 1998
 },
 {
  name: 'gol',
  modelo: 'manual',
  ano: 1996
 }
]

find()

Retorna o valor do primeiro elemento que satisfaça o teste.

const cars =
[
 {
  name: 'corsa',
  modelo: 'automatico',
  ano: 2005
 },
 {
  name: 'vectra',
  modelo: 'manual',
  ano: 1998
 },
 {
  name: 'voyage',
  modelo: 'automatico',
  ano: 2018
 },
 {
  name: 'gol',
  modelo: 'manual',
  ano: 1996
 }
]
cars.find(car => {
  if(car.modelo === 'manual') return car
})
// retorno do novo array
 {
  name: 'vectra',
  modelo: 'manual',
  ano: 1998
 }

forEach()

Esse método executa uma dada função dentro de cada elemento de um array

const numbers = [1, 2, 3, 4, 5]
numbers.forEach(num => {
 return num * 2
})
// 2, 4, 6, 8, 10

map()

Talvez o método que eu mais utilizo ou já utilizei. Ele é bem parecido com o método forEach A grande diferença é que o método map devolve um novo array enquanto o forEach itera sobre o mesmo array.

// usei o mesmo array do find
cars.map(car => car)
// retorna um novo array de carros
const cars =
[
 {
  name: 'corsa',
  modelo: 'automatico',
  ano: 2005
 },
 {
  name: 'vectra',
  modelo: 'manual',
  ano: 1998
 },
 {
  name: 'voyage',
  modelo: 'automatico',
  ano: 2018
 },
 {
  name: 'gol',
  modelo: 'manual',
  ano: 1996
 }
]

reduce()

Ele executa uma função reducer fornecida por você para cada elemento do array. Ele recebe até 4 parâmetros;

acumulador (opcional)
valor atual
index atual
array original

Esse método é extremamente versátil, é um pouco complicado no começo ( pode ser que renda até um artigo só para o reduce, vamos ver né 😃) Ele serve para reduzirmos um array e retornar um valor. Vamos ao exemplo:

const numbers = [1, 2, 3, 4, 5]
numbers.reduce((acc, valorAtual, indexAtual, arrayOriginal) => {
  console.log(acc, 'acc')
  console.log(valorAtual, 'valor atual')
  console.log(indexAtual, 'indexAtual')
  console.log(arrayOriginal, 'arrayOriginal')
  return acc + valorAtual
})
// resultado da nossa redução 15

Acho legal vocês executarem esse código, para ver todos os resultados obtidos por cada valor que o reduce nos fornece. Também podemos passar um valor inicial para o nosso reduce:

const numbers = [1, 2, 3, 4, 5]
numbers.reduce((acc, valorAtuall) => {
  return acc + valorAtual
}, 10) // valor inicial do reduce
// resultado da nossa redução 25

every()

Retorna um valor booleano, dependendo se todos elementos passarem ou não no teste. Lembrando que o método every não modifica o array original 😃

const cars =
[
 {
  name: 'corsa',
  modelo: 'automatico',
  ano: 2005
 },
 {
  name: 'vectra',
  modelo: 'manual',
  ano: 1998
 },
 {
  name: 'voyage',
  modelo: 'automatico',
  ano: 2018
 },
 {
  name: 'gol',
  modelo: 'manual',
  ano: 1996
 }
]
cars.every(car => {
  return car.modelo === 'corsa'
})
// false

some()

Retorna um booleano, se ao menos um elemento passar no teste ele retorna true Assim como o método every ele não altera o array original.

const numbers = [1, 2, 3, 4, 5]
numbers.some(num => num < 10) // true
numbers.some(num => num >10) // false

Bem é isso, espero que tenham gostado, lembrem que qualquer informação que deixei passar, ou se quiserem adicionar qualquer coisa postem nos comentários. Se esse artigo foi útil e puder me pagar um café ficarei feliz. Abraços quentinhos para vocês !!