Capítulo 5 Array ........................................................................................

75

5.1 Fundamentos .....................................................................................................75

5.1.1 Array associativo .........................................................................................76

5.2 Propriedades do objeto Array ..............................................................................76

5.2.1 constructor .................................................................................................77

5.2.2 prototype ....................................................................................................77

5.2.3 length .........................................................................................................77

5.3 Métodos do objeto Array ....................................................................................77

5.3.1 [Link](param) ...................................................................................77

5.3.2 concat(arr1 [, arr2, ... arrN]) .......................................................................77

5.3.3 join([separador]) ..........................................................................................78

5.3.4 indexOf(el [,inicio]) .....................................................................................78

5.3.5 lastIndexOf(el [,inicio]) ...............................................................................79

5.3.6 keys() ..........................................................................................................79

5.3.7 includes(elemento [,inicio]) ..........................................................................79

5.3.8 shift() .........................................................................................................80

5.3.9 pop() ..........................................................................................................80

5.3.10 unshift(elemento [,elemento1, ..., elementoN]) ............................................80

5.3.11 push(elemento [,elemento1, ..., elementoN]) ................................................80

5.3.12 splice(posição [,qde, elemento1..., elementoN]) ...........................................80

5.3.13 valueOf() ...................................................................................................81

5.3.14 copyWithin(index [,inicio [,fim]]) ...............................................................81

5.3.15 fill(el [,inicio [,fim]) ....................................................................................82

5.3.16 every(fn(el, [index [,arr]) [,thisValue]) .........................................................83

5.3.17 some(fn(el [,index[,arr]] [,thisValue]) ..........................................................83

5.3.18 find(fn(el, [index[,arr]) [,thisValue]) ............................................................83

5.3.19 findIndex(fn(el, [index[,arr]) [,thisValue]) ...................................................84

5.3.20 filter(fn(el, [index[,arr]) [,thisValue]) ...........................................................84

5.3.21 map(fn(el, [index[,arr]) [,thisValue]) ...........................................................84

5.3.22 forEach(fn(el, [index], [arr]), [thisValue]).....................................................84

5.3.23 reduce(fn(acc, valorAtual[,index[,arr]) [,valorInicial]) .................................85

5.3.24 reduceRight(fn(acumulador, valorAtual[,index[,arr]) [,valorInicial]) ............86

5.3.25 reverse() ....................................................................................................86

5.3.26 slice(inicio [,fim])

......................................................................................86 5.3.27
sort([fnComparadora]) ...............................................................................87

5.3.28 toString() ..................................................................................................88

5.4 Atribuição via desestruturação (Destructuring assignment) .................................88

5.1 Fundamentos

Um Array em JavaScript é um objeto global usado para armazenar uma coleção

ordenada de dados. Os elementos de um array são acessados por um índice numérico
que começa em 0.

5.1.1 Array associativo

Em JavaScript, os arrays são numericamente indexados. Embora seja possível adicionar

propriedades a um array usando chaves de string (tornando-o "associativo"), essa
prática é desencorajada. Para coleções de dados com chaves de string, é mais
apropriado usar um Object ou um Map, que foram projetados para essa finalidade.

• Exemplo (prática não recomendada):

JavaScript

const frutas = ["maçã", "banana"];

frutas["cor"] = "amarelo"; // Adicionando uma propriedade associativa

[Link](frutas); // Saída: [ 'maçã', 'banana', cor: 'amarelo' ]

[Link]([Link]); // Saída: 2 (a propriedade associativa não afeta o tamanho)

5.2 Propriedades do objeto Array

5.2.1 constructor

A propriedade constructor retorna a função que criou a instância do array.

• Exemplo:

JavaScript

const arr = [1, 2, 3];

[Link]([Link]); // Saída: [Function: Array]

5.2.2 prototype

A propriedade prototype permite adicionar novas propriedades e métodos ao objeto

Array, que estarão disponíveis para todas as instâncias de array.

• Exemplo:

JavaScript

[Link] = function() {

return `O array tem ${[Link]} elementos.`;

};

const numeros = [1, 2, 3];

[Link]([Link]()); // Saída: O array tem 3 elementos.

5.2.3 length

A propriedade length retorna o número de elementos no array. Você também pode

usá-la para redimensionar o array.

• Exemplo:

JavaScript

const nomes = ["Ana", "Pedro", "Luiz"];

[Link]([Link]); // Saída: 3

[Link] = 2; // Reduz o array

[Link](nomes); // Saída: [ 'Ana', 'Pedro' ]

5.3 Métodos do objeto Array

5.3.1 [Link](param)

Verifica se o valor passado é um array.

• Exemplo:

JavaScript

[Link]([Link]([1, 2])); // Saída: true

[Link]([Link]({})); // Saída: false

5.3.2 concat(arr1 [, arr2, ... arrN])

Combina dois ou mais arrays e retorna um novo array.

• Exemplo:

JavaScript

const arr1 = [1, 2];

const arr2 = [3, 4];

const combinado = [Link](arr2);

[Link](combinado); // Saída: [1, 2, 3, 4]

5.3.3 join([separador])

Junta todos os elementos de um array em uma string. O separador padrão é a vírgula.

• Exemplo:

JavaScript

const nomes = ["Ana", "João", "Maria"];

[Link]([Link](" - ")); // Saída: "Ana - João - Maria"

5.3.4 indexOf(el [,inicio])

Retorna o primeiro índice em que um elemento pode ser encontrado no array. Retorna
-1 se o elemento não estiver presente.

• Exemplo:

JavaScript

const frutas = ["maçã", "banana", "laranja", "banana"];

[Link]([Link]("banana")); // Saída: 1

5.3.5 lastIndexOf(el [,inicio])

Retorna o último índice em que um elemento pode ser encontrado.

• Exemplo:

JavaScript

const frutas = ["maçã", "banana", "laranja", "banana"];

[Link]([Link]("banana")); // Saída: 3

5.3.6 keys()

Retorna um novo objeto Iterator que contém as chaves (índices) de cada elemento do
array.

• Exemplo:

JavaScript

const arr = ["a", "b"];

const chaves = [Link]();

for (const chave of chaves) {

[Link](chave);

}
// Saída: 0, 1

5.3.7 includes(elemento [,inicio])

Verifica se um array inclui um determinado elemento. Retorna true ou false.

• Exemplo:

JavaScript

const numeros = [1, 2, 3];

[Link]([Link](2)); // Saída: true

5.3.8 shift()

Remove o primeiro elemento do array e retorna esse elemento. O array original é

modificado.

• Exemplo:

JavaScript

const arr = [1, 2, 3];

const primeiroElemento = [Link]();

[Link](primeiroElemento); // Saída: 1

[Link](arr); // Saída: [2, 3]

5.3.9 pop()

Remove o último elemento do array e retorna esse elemento. O array original é

modificado.

• Exemplo:

JavaScript

const arr = [1, 2, 3];

const ultimoElemento = [Link]();

[Link](ultimoElemento); // Saída: 3

[Link](arr); // Saída: [1, 2]

5.3.10 unshift(elemento [,elemento1, ..., elementoN])

Adiciona um ou mais elementos no início do array e retorna o novo tamanho do array.

• Exemplo:

JavaScript
const arr = [2, 3];

[Link](1, 0);

[Link](arr); // Saída: [0, 1, 2, 3]

5.3.11 push(elemento [,elemento1, ..., elementoN])

Adiciona um ou mais elementos no final do array e retorna o novo tamanho.

• Exemplo:

JavaScript

const arr = [1, 2];

[Link](3, 4);

[Link](arr); // Saída: [1, 2, 3, 4]

5.3.12 splice(posição [,qde, elemento1..., elementoN])

Um método muito versátil que pode adicionar, remover ou substituir elementos em

um array.

• posição: O índice de onde a alteração deve começar.

• qde: O número de elementos a serem removidos.

• elemento1...: Elementos a serem adicionados.

• Exemplo (remover e adicionar):

JavaScript

const frutas = ["maçã", "banana", "laranja"];

[Link](1, 1, "morango"); // Remove 'banana' e adiciona 'morango'

[Link](frutas); // Saída: ['maçã', 'morango', 'laranja']

5.3.13 valueOf()

Retorna o valor primitivo do objeto array, que é o próprio array.

• Exemplo:

JavaScript

const arr = [1, 2];

[Link]([Link]() === arr); // Saída: true

5.3.14 copyWithin(index [,inicio [,fim]])

Copia uma sequência de elementos dentro do array para uma posição de destino.

• Exemplo:

JavaScript

const arr = [1, 2, 3, 4, 5];

[Link](0, 3); // Copia elementos a partir do índice 3 para o índice 0

[Link](arr); // Saída: [4, 5, 3, 4, 5]

5.3.15 fill(el [,inicio [,fim])

Preenche todos os elementos de um array com um valor estático, a partir de um índice

de início até um de fim.

• Exemplo:

JavaScript

const arr = [1, 2, 3];

[Link](0, 1, 2); // Preenche o índice 1 com 0

[Link](arr); // Saída: [1, 0, 3]

5.3.16 every(fn(el, [index [,arr]) [,thisValue])

Testa se todos os elementos no array passam no teste implementado pela função

fornecida.

• Exemplo:

JavaScript

const numeros = [10, 20, 30];

const todosMaioresQue5 = [Link](el => el > 5);

[Link](todosMaioresQue5); // Saída: true

5.3.17 some(fn(el [,index[,arr]] [,thisValue])

Testa se pelo menos um elemento no array passa no teste implementado pela função
fornecida.

• Exemplo:

JavaScript

const numeros = [1, 2, 3];

const algumMaiorQue2 = [Link](el => el > 2);

[Link](algumMaiorQue2); // Saída: true

5.3.18 find(fn(el, [index[,arr]) [,thisValue])

Retorna o valor do primeiro elemento no array que satisfaz a função de teste.

• Exemplo:

JavaScript

const usuarios = [{id: 1, nome: "Ana"}, {id: 2, nome: "Pedro"}];

const usuarioEncontrado = [Link](user => [Link] === 2);

[Link](usuarioEncontrado); // Saída: { id: 2, nome: 'Pedro' }

5.3.19 findIndex(fn(el, [index[,arr]) [,thisValue])

Retorna o índice do primeiro elemento no array que satisfaz a função de teste.

• Exemplo:

JavaScript

const usuarios = [{id: 1, nome: "Ana"}, {id: 2, nome: "Pedro"}];

const indexEncontrado = [Link](user => [Link] === 2);

[Link](indexEncontrado); // Saída: 1

5.3.20 filter(fn(el, [index[,arr]) [,thisValue])

Cria um novo array com todos os elementos que passam no teste da função fornecida.

• Exemplo:

JavaScript

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

const pares = [Link](el => el % 2 === 0);

[Link](pares); // Saída: [2, 4, 6]

5.3.21 map(fn(el, [index[,arr]) [,thisValue])

Cria um novo array aplicando uma função a cada elemento do array original.

• Exemplo:

JavaScript

const numeros = [1, 2, 3];

const dobrados = [Link](el => el * 2);

[Link](dobrados); // Saída: [2, 4, 6]

5.3.22 forEach(fn(el, [index], [arr]), [thisValue])

Executa uma função para cada elemento do array. Não retorna um novo array.

• Exemplo:

JavaScript

const nomes = ["Ana", "Pedro"];

[Link](nome => [Link](`Olá, ${nome}`));

// Saída: Olá, Ana, Olá, Pedro

5.3.23 reduce(fn(acc, valorAtual[,index[,arr]) [,valorInicial])

Executa uma função em cada elemento do array para "reduzi-lo" a um único valor. O
acc (acumulador) mantém o resultado da iteração anterior.

• Exemplo (somar todos os elementos):

JavaScript

const numeros = [1, 2, 3, 4];

const soma = [Link]((acumulador, valorAtual) => acumulador + valorAtual,

0);

[Link](soma); // Saída: 10

5.3.24 reduceRight(fn(acumulador, valorAtual[,index[,arr]) [,valorInicial])

Funciona da mesma forma que reduce, mas processa os elementos do array da direita
para a esquerda.

• Exemplo:

JavaScript

const palavras = ["o", "mundo", "Olá"];

const frase = [Link]((acumulador, valorAtual) => acumulador + " " +

valorAtual);

[Link](frase); // Saída: Olá mundo o

5.3.25 reverse()

Inverte a ordem dos elementos de um array no local.

• Exemplo:
JavaScript

const numeros = [1, 2, 3];

[Link]();

[Link](numeros); // Saída: [3, 2, 1]

5.3.26 slice(inicio [,fim])

Retorna uma cópia rasa (shallow copy) de uma porção do array para um novo array,
sem modificar o original.

• Exemplo:

JavaScript

const frutas = ["maçã", "banana", "laranja", "morango"];

const porcao = [Link](1, 3);

[Link](porcao); // Saída: ['banana', 'laranja']

5.3.27 sort([fnComparadora])

Ordena os elementos de um array no local. Por padrão, ele os ordena como strings.
Para números, é necessário fornecer uma função de comparação.

• Exemplo (ordenação numérica):

JavaScript

const numeros = [10, 5, 20];

[Link]((a, b) => a - b); // Ordena de forma crescente

[Link](numeros); // Saída: [5, 10, 20]

5.3.28 toString()

Converte um array em uma string de valores separados por vírgula.

• Exemplo:

JavaScript

const numeros = [1, 2, 3];

[Link]([Link]()); // Saída: "1,2,3"

5.4 Atribuição via desestruturação (Destructuring assignment)

É uma sintaxe que permite desempacotar valores de arrays ou propriedades de objetos
em variáveis distintas, de forma mais fácil e legível.

• Exemplo (desestruturação de array):

JavaScript

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

const [cor1, cor2, cor3] = cores;

[Link](cor1); // Saída: vermelho

[Link](cor2); // Saída: verde

[Link](cor3); // Saída: azul