Métodos para arrays em javascript parte 03

A música tende a ser uma expressão dos nossos momentos mais obscuros. David Gilmour.

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 me mandem mensagem. Se esse artigo foi útil ficarei feliz. Abraços quentinhos para vocês!!