Artigo original: The JavaScript Array Handbook – JS Array Methods Explained with Examples

Na programação, um array é uma coleção de elementos ou itens. Arrays armazenam dados como elementos e os recuperam quando você precisa deles.

A estrutura de dados "array" é vastamente utilizada em todas as linguagens de programação que oferecem suporte para ela.

Neste manual, eu ensinarei para vocês tudo sobre arrays no JavaScript. Vocês aprenderão sobre manipulação de dados complexos, desestruturação (do inglês, destructuring), os métodos de array mais comumente usados e mais.

Por que escrevi este artigo?

Existem muitos artigos excelentes sobre arrays no JavaScript já disponíveis na internet. Então, por que eu escrevi outro artigo sobre o mesmo assunto? Qual é a motivação?

Ao longo dos anos interagindo com meus mentorados, eu percebi que a maioria dos iniciantes precisa de um tutorial que cubra arrays minuciosamente do começo ao fim com exemplos.

Assim, eu decidi criar um artigo cheio de exemplos relevantes. Se você é um iniciante em JavaScript, eu espero que você ache este artigo muito útil.

Porém, mesmo sendo um desenvolvedor experiente, este manual pode ser muito útil para ajudar você a relembrar desses recursos conforme precisar. Eu também estou aprendendo tudo novamente enquanto escrevo a respeito. Vamos lá!

O que é um array em JavaScript?

Um par de colchetes, [], representa um array em JavaScript. Todos os elementos no array são separados por vírgulas, ,.

No JavaScript, arrays podem ser uma coleção de elementos de qualquer tipo. Isso significa que você pode criar um array com elementos de tipo String, Boolean, Number, Object e até mesmo outros Arrays.

Aqui está um exemplo de um array com quatro elementos de tipo distintos: Number, Boolean, String e Object.

const arrayDeTiposMisturados = [100, true, 'freeCodeCamp', {}];

A posição de um elemento no array é conhecida como seu index. No JavaScript, o index (em português, índice) do array começa em 0, aumentando em um a cada elemento.

Então, por exemplo, no array acima o elemento 100 está no índice/index 0, true está no índice 1, 'freeCodeCamp' está no índice 2 e assim por diante.

O número de elementos no array determina seu comprimento ou tamanho (em inglês, length). Por exemplo, o comprimento do array acima é quatro.

Curiosamente, arrays do JavaScript não são de comprimento fixo. Você pode alterar o comprimento a qualquer momento atribuindo um valor numérico positivo. Aprenderemos mais sobre isso em breve.

Como criar um array no JavaScript

Você pode criar um array de diversas formas no JavaScript. A forma mais direta é atribuindo um valor de array a uma variável.

const salada = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

Você também pode usar o construtor Array para criar um array.

const salada = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');

Observação: new Array(2) criará um array de comprimento 2 e nenhum de seus elementos será definido. No entanto, new Array(1,2) criará um array de comprimento 2 e contendo os elementos 1 e 2.

Existem outros métodos, como Array.of() e Array.from(), e o operador spread (...), que também permitem criar arrays. Aprenderemos sobre eles ao longo deste artigo.

Como recuperar elementos de um array no JavaScript

Você pode acessar e recuperar elementos de um array usando seu índice. Você precisa usar a sintaxe de colchetes para acessar os itens do array.

const elemento = array[índice];

Baseado em seus casos de uso, você pode escolher acessar itens de um array um por um em um laço de repetição.

Você pode acessar os elementos usando o índice assim:

const salada = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salada[0]; // '🍅'
salada[2]; // '🥦'
salada[5]; // '🥕'

Você também pode usar o comprimento do array para percorrê-lo em sentido inverso (do fim para o começo) e acessar elementos.

const salada = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const comprimento = salada.length;
salada[comprimento - 1]; // '🥑'
salada[comprimento - 3]; // '🌽'

Você também pode percorrer o array usando um laço for, forEach, ou qualquer outro laço.

const salada = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

for(let i=0; i<salada.length; i++) {
  console.log(`Elemento no index ${i} é ${salada[i]}`);
}

Este é o resultado:

Como adicionar elementos a um array no JavaScript

Use o método push() para inserir um elemento em um array. O método push() adiciona um elemento no final do array. Que tal adicionar amendoins na salada, deste modo:

const salada = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salada.push('🥜');

Agora o array salada é:

["🍅", "🍄", "🥦", "🥒", "🌽", "🥕", "🥑", "🥜"]

Perceba que o método push() adiciona um elemento ao final de um array. Se você quiser adicionar um elemento ao início de um array terá que usar o método unshift().

const salada = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salada.unshift('🥜');

Agora, o array salada é:

["🥜", "🍅", "🍄", "🥦", "🥒", "🌽", "🥕", "🥑"]

Como remover elementos de um array no JavaScript

A maneira mais fácil de se remover um único elemento de um array é usando o método pop(). Toda vez que você chama o método pop(), ele remove um elemento do final do array. Então, ele retorna o elemento removido e altera o array original.

const salada = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salada.pop(); // 🥑

console.log(salada); // ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕']

Use o método shift() para remover um elemento do início do array. Assim como o método pop(), shift() retorna o elemento removido e altera o array original.

const salada = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salada.shift(); // 🍅

console.log(salada); // ['🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

Como copiar e clonar um array no JavaScript

Você pode copiar e clonar um array para um novo array usando o método slice(). Perceba que o método slice() não altera o array original. Ao invés disso, ele cria uma cópia rasa (texto em inglês) do array original.

const salada = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const saladaCopia = salada.slice();

console.log(saladaCopia); // ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']

salada === saladaCopia; // retorna false

Alternativamente, você pode usar o operador spread, para criar uma cópia do array. Aprenderemos sobre isso em breve.

Como determinar se um valor é um array no JavaScript

Você pode determinar se um valor é um array usando o método Array.isArray(valor). O método retorna true se o valor passado for um array.

Array.isArray(['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']); // retorna true
Array.isArray('🍅'); // retorna false
Array.isArray({ 'tomate': '🍅'}); // retorna false
Array.isArray([]); // retorna true

Desestruturação de arrays no JavaScript

Com a ECMAScript 6 (ES6), temos algumas novas sintaxes para extrair múltiplas propriedades de um array e atribuí-las diretamente em variáveis. É útil para manter seu código limpo e conciso. Essa nova sintaxe é chamada de sintaxe de desestruturação (em inglês, destructuring).

Este é um exemplo de extração de valores de um array usando a sintaxe de desestruturação:

let [tomate, cogumelo, cenoura] = ['🍅', '🍄', '🥕'];

Agora, você pode usar as variáveis em seu código:

console.log(tomate, cogumelo, cenoura); // Saída: 🍅 🍄 🥕

Para repetir o mesmo processo sem a desestruturação, teríamos que fazer algo parecido com isso:

let vegetais = ['🍅', '🍄', '🥕'];
let tomate = vegetais[0];
let cogumelo = vegetais[1];
let cenoura = vegetais[2];

Portanto, a sintaxe de desestruturação nos poupa de escrever muito código, permitindo um aumento sensível de produtividade.

Como atribuir um valor padrão a uma variável

Você pode atribuir um valor padrão usando desestruturação quando o elemento do array não tem valor ou é undefined.

No exemplo abaixo, atribuímos um valor padrão à variável cogumelo.

let [tomate , cogumelo = '🍄'] = ['🍅'];
console.log(tomate); // '🍅'
console.log(cogumelo); // '🍄'

Como ignorar um valor em um array

Com a desestruturação, você pode ignorar um elemento do array quando mapear para uma variável. Por exemplo, você pode não estar interessado em todos os elementos de um array. Nesse caso, ignorar um valor é útil.

No exemplo abaixo, pulamos o elemento cogumelo. Observe o espaço na declaração de variáveis do lado esquerdo da expressão.

let [tomate, , cenoura] = ['🍅', '🍄', '🥕'];

console.log(tomate); // '🍅'
console.log(cenoura); // '🥕'

Desestruturação de arrays aninhados no JavaScript

No JavaScript, arrays podem ser aninhados. Isso significa que um array pode ter outro array como um elemento. O aninhamento de arrays pode ter a profundidade que for necessária.

Por exemplo, vamos criar um array aninhado para frutas. Ele tem algumas frutas e um array de vegetais dentro dele.

let frutas = ['🍈', '🍍', '🍌', '🍉', ['🍅', '🍄', '🥕']];

Como você acessaria a '🥕' do array acima? Novamente, você poderia fazer isso sem desestruturação, deste modo:

const veg = frutas[4]; // retorna o array ['🍅', '🍄', '🥕']
const cenoura = veg[2]; // retorna '🥕'

Como alternativa, você pode utilizar esta sintaxe abreviada:

frutas[4][2]; // retorna '🥕'

Você também pode acessar o item utilizando a sintaxe de desestruturação, assim:

let [,,,,[,,cenoura]] = ['🍈', '🍍', '🍌', '🍉', ['🍅', '🍄', '🥕']];

Como usar a sintaxe de espalhamento (spread) e parâmetros rest no JavaScript

A partir da ES6, nós podemos usar o ... (sim, três pontos consecutivos) como sintaxe de espalhamento e parâmetros rest na desestruturação de arrays.

• Para o parâmetro rest, o ... aparece do lado esquerdo da sintaxe de desestruturação.
• Para a sintaxe de espalhamento, o ... aparece do lado direito da sintaxe de desestruturação.

Como usar o parâmetro rest no JavaScript

Com o parâmetro Rest, podemos mapear os elementos restantes de um array em um novo array. O parâmetro rest deve ser a última variável na sintaxe de desestruturação.

No exemplo abaixo, mapeamos os dois primeiros elementos do array para as variáveis tomate e cogumelo. Os elementos restantes são mapeados para a variável rest usando o .... A variável rest é agora um novo array contendo os elementos que sobraram.

const [tomate, cogumelo, ...rest] = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

console.log(tomate); // '🍅'
console.log(cogumelo); // '🍄'
console.log(rest); // ["🥦", "🥒", "🌽", "🥕", "🥑"]

Como usar o operador de espalhamento (spread) no JavaScript

Com o operador de spread, podemos criar um clone/cópia de um array já existente, assim:

const salada = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

const saladaClonada = [...salada];
console.log(saladaClonada); // ["🍅", "🍄", "🥦", "🥒", "🌽", "🥕", "🥑"]

salada === saladaClonada // false

Casos de uso de desestruturação no JavaScript

Vamos conhecer agora alguns casos de uso interessantes de desestruturação de array, operador spread e parâmetro rest.

Como trocar valores com desestruturação

Podemos trocar o valor de duas variáveis facilmente usando a sintaxe de desestruturação de array.

let primeiro = '😔';
let segundo = '🙂';
[primeiro, segundo] = [segundo, primeiro];

console.log(primeiro);  // '🙂'
console.log(segundo); // '😔'

Como fundir arrays

Podemos fundir (em inglês, merge) dois arrays e criar outro com todos os elementos de ambos. Vamos criar dois arrays, um com algumas carinhas e outro com alguns vegetais.

const emotes = ['🙂', '😔'];
const vegetais = ['🥦', '🥒', '🌽', '🥕'];

Agora, vamos unir estes dois arrays para criar um outro array.

const emotesVegetais = [...emotes, ...vegetais];
console.log(emotesVegetais); // ["🙂", "😔", "🥦", "🥒", "🌽", "🥕"]

Métodos de arrays do JavaScript

Até agora, vimos algumas propriedades e métodos de arrays. Vamos revisar rapidamente alguns deles:

• push() – Insere um elemento no final do array.
• unshift() – Insere um elemento no início do array.
• pop() – Remove um elemento no final do array.
• shift() – Remove um elemento no início do array.
• slice() – Cria uma cópia rasa de um array.
• Array.isArray() – Determina se um elemento é um array.
• length – Determina o tamanho (comprimento) de um array.

Agora, vamos conhecer outros métodos de array importantes do JavaScript com exemplos.

Como criar, remover, atualizar e acessar arrays no JavaScript

Nesta seção, vamos aprender sobre métodos que podem ser usados para criar um array, remover elementos para deixar o array vazio, acessar elementos do array e mais.

O método concat()

O método concat() une um ou mais arrays e retorna um único array concatenado. Este é um método imutável, portanto, ele não altera os arrays já existentes.

Vamos concatenar dois arrays.

const primeiro = [1, 2, 3];
const segundo = [4, 5, 6];

const concatenado = primeiro.concat(segundo);

console.log(concatenado); // [1, 2, 3, 4, 5, 6]
console.log(primeiro); // [1, 2, 3]
console.log(segundo); // [4, 5, 6]

Usando o método concat() podemos combinar qualquer número de arrays com esta sintaxe:

array.concat(arr1, arr2,..,..,..,arrN);

Aqui está um exemplo:

const primeiro = [1, 2, 3];
const segundo = [4, 5, 6];
const terceiro = [7, 8, 9];

const concatenado = primeiro.concat(segundo, terceiro);

console.log(concatenado); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

O método join()

O método join() junta todos os elementos do array usando um separador e retorna uma string. O separador padrão usado para juntar os elementos é a  vírgula, ,.

const emotes = ['🙂', '😍', '🙄', '😟'];

const juntos = emotes.join();
console.log(juntos); // "🙂,😍,🙄,😟"

Você pode usar o separador que quiser para juntar os elementos. Este é um exemplo de junção dos elementos com um separador customizado:

const emotes = ['🙂', '😍', '🙄', '😟'];
const juntos = emotes.join('<=>');
console.log(juntos); // "🙂<=>😍<=>🙄<=>😟"

Invocar o método join() em um array vazio retorna uma string vazia:

[].join() // retorna ""

O método fill()

O método fill() preenche um array com um valor estático. Você pode alterar todos os elementos para um valor estático ou alterar apenas alguns itens selecionados. Note que o método fill() altera o array original.

const cores = ['vermelho', 'azul', 'verde'];

cores.fill('rosa');
console.log(cores); // ["rosa", "rosa", "rosa"]

Este é um exemplo onde alteramos apenas os últimos dois elementos do array usando o método fill():

const cores = ['vermelho', 'azul', 'verde'];

cores.fill('rosa', 1,3); // ["vermelho", "rosa", "rosa"]

Neste caso, o primeiro argumento do método fill() é o valor que usaremos para alterar os elementos. O segundo argumento é o índice inicial a ser alterado, começando em 0. O último argumento determina onde parar de preencher. O seu valor máximo é cores.length (comprimento do array).

Confira esta thread do Twitter para ver um uso prático do método fill().

Você também pode considerar útil este projeto de demonstração.

O método includes()

Você pode verificar a presença de um elemento em um array usando o método includes(). Se o elemento é encontrado, o método retorna true. Caso contrário, retorna false.

const nomes = ['tom', 'alex', 'bob', 'john'];

nomes.includes('tom'); // retorna true
nomes.includes('july'); // retorna false

O métodoindexOf()

Você pode precisar conhecer a posição (índice) de um elemento em um array. Você pode usar o método indexOf() para conseguir isso. Este método retorna o índice da primeira ocorrência de um elemento no array. Se o elemento não for encontrado, o método indexOf() retorna -1.

const nomes = ['tom', 'alex', 'bob', 'john'];

nomes.indexOf('alex'); // retorna 1
nomes.indexOf('rob'); // retorna -1

Existe outro método chamado lastIndexOf() que permite descobrir o índice da última ocorrência de um elemento no array. Assim como indexOf(), lastIndexOf() também retorna -1 se o elemento não for encontrado.

const nomes = ['tom', 'alex', 'bob', 'tom'];

nomes.indexOf('tom'); // retorna 0
nomes.lastIndexOf('tom'); // retorna 3

O método reverse()

Como o nome sugere, o método reverse() inverte as posições dos elementos do array de maneira que o último elemento é movido para a primeira posição e o primeiro elemento é movido para a última posição.

const nomes = ['tom', 'alex', 'bob'];

nomes.reverse(); // retorna ["bob", "alex", "tom"]

O método reverse() modifica o array original.

O método sort()

O método sort() é, provavelmente, um dos métodos de array mais usados. O sort() padrão converte os elementos do array em strings e então os ordena. A ordenação padrão é ascendente. O método sort() altera o array original.

const nomes = ['tom', 'alex', 'bob'];

nomes.sort(); // retorna ["alex", "bob", "tom"]

O método sort() aceita como argumento opcional uma função de comparação. Você pode escrever uma função de comparação e passar para o método sort() para sobrescrever o comportamento de ordenação padrão.

Vamos agora ordenar um array de números em ordem ascendente e descendente usando uma função de comparação:

const numeros = [23, 5, 100, 56, 9, 13, 37, 10, 1]

Primeiro, vamos invocar o método sort() padrão e verificar o resultado:

numeros.sort();

Agora, o array ordenado é [1, 10, 100, 13, 23, 37, 5, 56, 9]. Este não é o resultado que esperávamos. Porém, isto acontece porque o método sort() padrão converte os elementos em strings e, então, os compara baseado no valores de unidade de código UTF-16.

Para resolver isso, vamos escrever uma função de comparação. Aqui está uma para ordem ascendente:

function comparaAscendente(a, b){
  return (a-b);
}

Agora, passamos esta função para o método sort():

numeros.sort(comparaAscendente); // retorna [1, 5, 9, 10, 13, 23, 37, 56, 100]

/* 

Também poderíamos escrever o código deste modo,


numeros.sort(function(a, b) {
  return (a-b);
});

Ou, usando uma arrow function,

numeros.sort((a, b) => (a-b));

*/

Para ordem descendente, faça isto:

numeros.sort((a, b) => (b-a));

Confira este repositório do GitHub para mais exemplos e dicas sobre ordenação.

O método splice()

O método splice() permite adicionar, atualizar e remover elementos em um array. Este método pode ser um pouco confuso no começo, mas, assim que aprender o uso correto, conseguirá entender.

O propósito principal do método splice() é excluir elementos do array. O método retorna um array dos elementos excluídos e modifica o array original. Você, contudo, também pode adicionar e substituir elementos usando este método.

Para adicionar um elemento usando o método splice(), precisamos passar a posição onde queremos adicionar, quantos elementos excluir a partir daquela posição e o elemento a ser adicionado.

No exemplo abaixo, adicionamos um elemento zack no índice 1 sem excluir nenhum elemento.

const nomes = ['tom', 'alex', 'bob'];

nomes.splice(1, 0, 'zack');

console.log(nomes); // ["tom", "zack", "alex", "bob"]

Observe o exemplo a seguir. Nele, removemos um elemento no índice 2 (terceiro elemento) e adicionamos um novo elemento, zack. O método splice() retorna um array com o elemento excluído, bob.

const nomes = ['tom', 'alex', 'bob'];

const excluidos = nomes.splice(2, 1, 'zack');

console.log(excluidos); // ["bob"]
console.log(nomes); // ["tom", "alex", "zack"]

Confira esta thread do Twitter para aprender como o método splice() permite criar um array vazio.

Métodos estáticos de arrays no JavaScript

No JavaScript, arrays possuem três métodos estáticos. Já abordamos o método Array.isArray(). Vamos conhecer os outros dois agora.

O método Array.from()

Vamos usar um simples trecho de código HTML que contém uma div e alguns elementos em uma lista:

<div id="main">
  <ul>
    <ol type="1">
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ol>
  </ul> 
</div>

Agora, vamos consultar o DOM usando o método getElementsByTagName().

document.getElementsByTagName('li');

Esse método retorna uma HTMLCollection:

Então, é como um array. Agora, vamos percorrer esse elemento usando forEach:

document.getElementsByTagName('li').forEach(() => {
 // Faça algo aqui...
})

Consegue adivinhar qual é o resultado? É um erro como esse:

Por quê? Porque a HTMLCollection não é um array, mas sim um objeto semelhante a um array. Portanto, você não pode percorrê-lo usando forEach.

Este é um caso onde você deve usar o método Array.from(). Ele converte o objeto semelhante a um array em um array para que você possa realizar todas as operações de array nele.

const collection = Array.from(document.getElementsByTagName('li'))

Assim, collection como um array é representado deste modo:

O método Array.of()

O método Array.of() cria um array usando qualquer número de elementos de qualquer tipo.

Array.of(2, false, 'test', {'nome': 'Alex'})

O resultado será este:

Métodos de iteração de arrays no JavaScript

Agora, vamos aprender sobre métodos de iteração de arrays. Esses métodos são muitos úteis para iterar através de arrays (percorrê-los) e realizar computações, tomar decisões, filtrar itens e mais.

Até agora, não vimos nenhum exemplo de array de objetos. Nesta seção, vamos usar o seguinte array de objetos para explicar e demonstrar os métodos abaixo.

Este array contém a informação de alguns estudantes inscritos em vários cursos pagos:

let estudantes = [
   {
      'id': 001,
      'primeiro_nome': 'Alex',
      'sobrenome': 'B',
      'sexo': 'M',
      'casado': false,
      'idade': 22,
      'pago': 250,  
      'cursos': ['JavaScript', 'React']
   },
   {
      'id': 002,
      'primeiro_nome': 'Ibrahim',
      'sobrenome': 'M',
      'sexo': 'M',
      'casado': true,
      'idade': 32,
      'pago': 150,  
      'cursos': ['JavaScript', 'PWA']
   },
   {
      'id': 003,
      'primeiro_nome': 'Rubi',
      'sobrenome': 'S',
      'sexo': 'F',
      'casado': false,
      'idade': 27,
      'pago': 350,  
      'cursos': ['Blogging', 'React', 'UX']
   },
   {
      'id': 004,
      'primeiro_nome': 'Zack',
      'sobrenome': 'F',
      'sexo': 'M',
      'casado': true,
      'idade': 36,
      'pago': 250,  
      'cursos': ['Git', 'React', 'Branding']
   } 
];

Vamos começar. Todos os métodos de iteração de array recebem uma função como argumento. Você precisa especificar a lógica para iterar e aplicar a essa função.

O método filter()

O método filter() cria um array com todos os elementos que satisfazem a condição definida na função. Vamos encontrar qual dos estudantes é do sexo feminino. Então, a condição do filtro será que o sexo deve ser igual a 'F'.

const estudantesDoSexoFeminino = estudantes.filter((elemento, indice) => {
  return elemento.sexo === 'F';
})

console.log(estudantesDoSexoFeminino);

O resultado será:

Está correto. A estudante de nome Rubi é a única estudante do sexo feminino que temos até agora.

O método map()

O método map() cria um array através da iteração dos elementos e aplicando a lógica que fornecemos na função passada como argumento. Vamos criar um array de nomes completos dos estudantes a partir do array de estudantes.

const nomesCompletos = estudantes.map((elemento, indice) => {
  return {'nomeCompleto': elemento['primeiro_nome'] + ' ' + elemento['sobrenome']}
});

console.log(nomesCompletos);

O resultado será:

Aqui, podemos ver um novo array de objetos com a propriedade nomeCompleto, que é computado usando as propriedades primeiro_nome e sobrenome de cada objeto de estudante.

O método reduce()

O método reduce() aplica uma função reducer em cada elemento do array e retorna um valor de saída. Vamos aplicar uma função reducer no array estudantes para calcular o valor total pago por todos os estudantes.

const total = estudantes.reduce(
   (acumulador, estudante, indiceAtual, array) => {
      acumulador = acumulador + estudante.pago;
      return (acumulador);
   }, 
0);

console.log(total); // 1000

No código acima,

• Inicializamos acumulador com valor 0.
• Aplicamos o método reduce em cada um dos objetos de estudantes. Acessamos a propriedade pago e somamos seu valor ao acumulador.
• Retornamos o valor final de acumulador.

O método some()

O método some() retorna um valor booleano(true/false) de acordo com a existência de pelo menos um elemento no array que atenda às condições da função. Vamos checar se existe algum estudante com idade menor que 30.

let existeEstudanteAbaixoDe30 = estudantes.some((elemento, indice) => {
  return elemento.idade < 30;
});

console.log(existeEstudanteAbaixoDe30); // true

Podemos ver que existe pelo menos um estudante com menos de 30 anos.

O método find()

Usando o método some(), vimos que existe um estudante com idade abaixo de 30. Vamos descobrir quem é este estudante.

Para fazer isso, usaremos o método find(). Ele retorna o primeiro elemento encontrado no array que satisfaça a condição na função.

Arrays têm outro método parecido, findIndex(), que retorna o índice do elemento que encontaríamos com o método find(). Se nenhum elemento satisfaz a condição, o método findIndex() retorna -1.

No exemplo abaixo, passamos uma função para o método find(), que verifica a idade de cada estudante e retorna aquele que satisfaz a condição (idade < 30).

const estudante = estudantes.find((elemento, indice) => {
  return elemento.idade < 30;
});

console.log(estudante);

O resultado é:

Como podemos ver, Alex é o estudante que tem 22 anos de idade. Nós o encontramos.

O método every()

O método every() detecta se todos os elementos do array satisfazem a condição passada na função. Vamos descobrir se todos os estudantes se inscreveram em pelo menos dois cursos.

const peloMenosDoisCursos = estudantes.every((elemento, indice) => {
  return elemento.cursos.length >= 2;
});

console.log(peloMenosDoisCursos); // true

Como esperado, o resultado é true.

Métodos de array propostos

Em maio de 2021, o ECMAScript recebeu a proposta de um método, o método at(). Este método já foi aprovado e pode ser usado sem restrições.

O método at()

O método permite acessar os elementos de um array usando um número de índice negativo.  Anteriormente, acessar elementos a partir do final do array era possível usando a propriedade length. Com o método at(), é possível acessar os elementos usando tanto número negativos quanto positivos como índice usando apenas um método.

const lanchesQueGosto = ['🥖', '🍔', '🍟', '🍕', '🌭', '🥪', '🌮', '🍿'];

lanchesQueGosto.at(0); // 🥖
lanchesQueGosto.at(3); // 🍕
lanchesQueGosto.at(-1); // 🍿
lanchesQueGosto.at(-5); // 🍕
lanchesQueGosto.at(-8); // 🥖
lanchesQueGosto.at(10); // undefined

Uma pequena demonstração do uso de at():

Confira este repositório do GitHub para ver exemplos de uso de at().

Antes de terminarmos

Espero que tenha achado este artigo útil e que ajude você a compreender arrays em JavaScript com mais clareza. Pratique os exemplos várias vezes para adquirir prática com eles. Você pode encontrar todos os exemplos de código no meu repositório do GitHub.

Conecte-se com o autor. Ele é bastante ativo no Twitter (@tapasadhikary).

Você também pode gostar destes artigos do autor (em inglês):

• Why do you need to know about Array-like Objects?
• 5 useful tips about the JavaScript array sort method
• Ways to Empty an Array in JavaScript and the Consequences
• Build your JavaScript Muscles with map, reduce, filter and other array iterators
• Why do you need to know about the JavaScript Array at() method