Joel Oliveira

Posted on Mar 7, 2023 • Edited on Apr 22, 2023 • Originally published at joeldorosarioo.dev

Conhecendo os métodos de Arrays no JavaScript

#braziliandevs #javascript #webdev #beginners

O que é Array em JavaScript?

Um Array (também conhecido como matriz) armazena uma coleção de elementos, que podem ser de diferentes tipos de dados, tais como números, strings, booleans e objetos. Os elementos dentro de um array são acessados através de um índice, que começa em 0 para o primeiro elemento do array.

Embora seja possível armazenar diferentes tipos de dados em um único array no JavaScript, é recomendado que usemos apenas um tipo de dado por array. Isso ajuda a manter a organização dos dados e torna mais fácil a manipulação dos elementos dentro do array.

Podemos declarar arrays de duas maneiras diferentes.

new Array

const fruits = new Array("Apple", "Banana");

Literal Notation

const fruits = ["Apple", "Banana"];

Métodos de Array

Agora, vamos entender os métodos de um array dentro do JavaScript e como usá-los.

Map()

O método .map() permite executar uma função de callback para cada elemento dentro do array.

const list = [1, 2, 3, 4, 5];
list.map((item) => item * 2); // Output: [2, 4, 6, 8, 10]

Filter()

O método .filter() retorna uma cópia superficial com todos os elementos que passaram no teste implementado pela função fornecida.

const list = [1, 2, 3, 4, 5];
list.filter((item) => item % 2 === 0); // Output: [2, 4]

Push()

Adiciona um novo ou mais elementos ao final do array e retorna o novo comprimento.

const list = [1, 2, 3, 4, 5];
list.push(6); // Output: 6
console.log(list); // Output: [1, 2, 3, 4, 5, 6]

Pop()

Remove o último elemento do array e retorna esse elemento.

const list = [1, 2, 3, 4, 5];
list.pop(); // Output: 5
console.log(list); // Output: [1, 2, 3, 4]

Unshift()

Adiciona um novo ou mais elementos ao inicio do array e retorna o novo comprimento.

const list = [1, 2, 3, 4, 5];
list.unshift(0); // Output: 6
console.log(list); // Output: [0, 1, 2, 3, 4, 5]

Shift()

Remove o primeiro elemento do array e retorna esse elemento.

const list = [1, 2, 3, 4, 5];
list.shift(); // Output: 1
console.log(list); // Output: [2, 3, 4, 5]

Splice()

O método .splice() é um método de uso geral para alterar o conteúdo de uma array removendo, substituindo ou adicionando elementos em posições especificadas da array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits); // Output: ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango']

Slice()

O método .slice() retorna uma cópia superficial com todos os elementos selecionados. Este método recebe dois argumentos, o índice inicial e o índice final da seleção. O índice final é opcional, e se não for especificado, o método seleciona todos os elementos a partir do índice inicial até o final do array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.slice(1)); // Output: ["Orange", "Apple", "Mango"]
console.log(fruits.slice(1, 3)); // Output: ["Orange", "Apple"]

IndexOf()

O método .indexOf() retorna o índice de um determinado elemento ou retorna -1 se este elemento não estiver presente no array.

const list = [1, 2, 3, 4, 5];
list.indexOf(3); // Output: 2
list.indexOf(6); // Output: -1

Reduce()

O método .reduce() executa uma função de callback para cada elemento do array, retornando o resultado final do cálculo de todos os elementos.

const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item); // Output: 15

Includes()

Retorna true se o elemento fornecido estiver presente no array.

const list = [1, 2, 3, 4, 5];
list.includes(3); // Output: true
list.includes(6); // Output: false

Sort()

O método .sort() ordena os elementos do array. A ordem padrão é crescente, construída na conversão dos elementos em strings e, em seguida, comparando suas sequências de valores de unidades de código UTF-16.

const array = ['D', 'B', 'A', 'C'];
array.sort(); // Output: ['A', 'B', 'C', 'D']

const list = [4, 1, 3, 2, 10];
list.sort(); // Output: [1, 10, 2, 3, 4]
list.sort((a, b) => a - b); // Output: [1, 2, 3, 4, 10]

Reverse()

Inverte a ordem dos elementos.

const list = [1, 2, 3, 4, 5];
list.reverse();
console.log(list) // Output: [5, 4, 3, 2, 1]

Find()

Retorna o primeiro elemento do array que satisfaz a função de teste fornecida. Se nenhum valor satisfizer a função de teste, undefined será retornado.

const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // Output: 3
list.find((el) => el === 6); // Output: undefined

FindIndex()

O método .findIndex() retorna o índice de um determinado elemento ou retorna -1 se este elemento não estiver presente no array.

A principal diferença entre .indexOf() e findIndex são os parâmetros dessas funções:

.indexOf() espera um valor como primeiro parâmetro. Isso o torna uma boa escolha para encontrar o índice em arrays de tipos primitivos, como strings, numbers, ou booleans.
.findIndex() espera uma função de callback como primeiro parâmetro. Isso faz com quê este método seja uma boa escolha para buscar o índice em arrays de tipos não primitivos (por exemplo, objetos) ou se sua condição de localização for mais complexa do que apenas um valor.

const list = [5, 12, 8, 130, 44];
list.findIndex((element) => element > 13); // Output: 3

const array = [{ id: 12 }, { id: 34 }, { id: 78 }, { id: 88 }];

array.findIndex((element) => element.id === 78); // Output: 2

Join()

Une todos os elementos de um array em uma string.

const list = [1, 2, 3, 4, 5];
list.join(', '); // Output: "1, 2, 3, 4, 5"

Some()

Retorna true se pelo menos um elemento do array passar no teste implementado pela função fornecida.

const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // Output: true
list.some((el) => el === 6); // Output: false

Every()

Retorna true se todos os elementos do array passarem no teste implementado pela função fornecida.

const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // Output: false

const list = [2, 4, 6, 8, 10];
list.every((el) => el % 2 === 0); // Output: true

At()

Retorna o elemento no índice especificado.

const list = [5, 12, 8, 130, 44];

let index = 2;
console.log(`Using an index of ${ index } the item returned is ${ list.at(index) }.`); // Output: "Using an index of 2 the item returned is 8"

index = -2;
console.log(`Using an index of ${ index } item returned is ${ list.at(index) }.`); // Output: "Using an index of -2 item returned is 130"

Flat()

Retorna um novo array com todos os elementos do sub-array concatenados nele recursivamente até a profundidade especificada.

const list = [1, 2, [3, 4, [5, 6]]];
list.flat(Infinity); // Output: [1, 2, 3, 4, 5, 6]

Em resumo, um array em JavaScript é uma coleção de elementos acessados por índices que podem ser de diferentes tipos de dados. Embora seja possível armazenar diferentes tipos de dados em um único array, é recomendado usar apenas um tipo de dado para manter a organização dos dados. Existem vários métodos disponíveis em JavaScript para manipular arrays, como map(), filter(), push(), pop(), unshift(), shift(), splice(), slice(), indexOf(), reduce(), includes() e sort(). Cada método executa uma operação específica em um array e ajuda a tornar a manipulação de dados mais fácil e eficiente.