Ar

Arrays em JavaScript

49 exercícios

Sobre Arrays

Em JavaScript, um array é uma estrutura semelhante a uma lista, sem comprimento fixo, que pode conter qualquer tipo de primitivos ou objetos, mesmo tipos mistos. Inclui a propriedade length e também vários métodos úteis para percorrer e alterar o array.

Para criar um array, adiciona elementos entre parênteses retos []. Para ler um valor do array, coloca o índice entre parênteses retos [], depois do identificador. Os índices de um array começam em zero.

Por exemplo:

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names[1];
// => Laura

Os arrays também podem ser criados com a sintaxe de construtor, mas, na maioria dos casos, recomenda-se a sintaxe literal de array.

const names = new Array();
names.push('Jack', 'Laura', 'Paul', 'Megan');

names[1];
// => Laura

Os arrays não podem usar strings como índices de elementos; têm de usar inteiros (number). Definir ou aceder através de valores não inteiros com a notação de parênteses retos (ou com a notação de ponto) não define nem obtém um elemento da própria lista do array; define ou acede antes a uma variável associada à coleção de propriedades do objeto desse array. As propriedades do objeto do array e a lista de elementos do array são coisas separadas, e as operações de percurso e de alteração do array não se podem aplicar a essas propriedades com nome.

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length;
// => 4

// Properties can be set on arrays using bracket ['property'] or
// dot .property notation, and this will affect the length, as
// shown below.

names.magician = 'Elyse';
names.length;
// => 4

// The property shows up when logging the array, making it seem
// that the property is somehow incorporated in the array.

names;
// => ["Jack", "Laura", "Paul", "Megan", magician: "Elyse"]

// However, be aware. Properties added via non-numeric keys are
// NOT part of the array's internal list, and are not traversed
// or mutated when using one of the traversal or mutation
// operations.

names.forEach((name) => console.log(name));
// => Jack
// => Laura
// => Paul
// => Megan

Eliminar itens de um array

Em JavaScript, os arrays são objects normais, e os itens podem ser eliminados com a palavra-chave delete. No entanto, isto não altera o length do array e deixa um buraco empty. Noutras linguagens, isto é semelhante a um array esparso. Os buracos empty são ignorados quando se usam operações de percurso ou de alteração.

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
delete names[1];

names;
// =>  ["Jack", empty, "Paul", "Megan"]

names.length;
// => 4

names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan

Se não quiseres buracos, e se quiseres que o length reflita o número de itens que serão percorridos ou alterados, usa antes splice.

O método splice() altera o conteúdo de um array ao remover ou substituir elementos existentes e/ou ao adicionar novos elementos no local.1

Por exemplo:

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(1, 1);

names;
// =>  ["Jack", "Paul", "Megan"]

names.length;
// => 3

names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan

O comprimento de um array pode ser alterado

A propriedade length de um array está ligada à lista de itens que o array contém. Pode ser alterada. Quando o comprimento aumenta, criam-se buracos empty, que não são considerados ao percorrer ou alterar o array. Quando o comprimento diminui, remove os elementos no fim do array.

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length = 6;

names;
// => ["Jack", "Laura", "Paul", "Megan", empty × 2]

names.length = 2;
// =>  ["Jack", "Laura"]

Verificar se algo é um Array

Como os arrays são objects, typeof names devolve "object". Para verificar se algo é um Array, usa Array.isArray:

const names = ['Jack', 'Laura', 'Paul', 'Megan'];

typeof names;
// => "object"

Array.isArray(names);
// => true

const object = {};
Array.isArray(object);
// => false

Podes ser tentado a usar names instanceof Array, e isso pode funcionar, mas não em todas as circunstâncias. Lê este artigo para mais informações.

Métodos de array

Alguns dos métodos disponíveis em todos os objetos Array podem ser usados para adicionar ou remover elementos do array. Aqui ficam alguns deles:

push

O método push() adiciona um ou mais elementos ao fim de um array e devolve o novo comprimento do array.2

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.push('Jill'); // => 5
names;
// => ['Jack', 'Laura', 'Paul', 'Megan', 'Jill']

pop

O método pop() remove o último elemento de um array e devolve esse elemento. Este método altera o comprimento do array.3

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.pop(); // => 'Megan'
names;
// => ['Jack', 'Laura', 'Paul']

shift

O método shift() remove o primeiro elemento de um array e devolve esse elemento removido. Este método altera o comprimento do array.4

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.shift(); // => 'Jack'
names;
// => ['Laura', 'Paul', 'Megan']

unshift

O método unshift() adiciona um ou mais elementos ao início de um array e devolve o novo comprimento do array.5

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.unshift('Jill'); // => 5
names;
// => ['Jill', 'Jack', 'Laura', 'Paul', 'Megan']

splice

O método splice() altera o conteúdo de um array ao remover ou substituir elementos existentes e/ou ao adicionar novos elementos no local. Este método devolve um array com os elementos eliminados.1

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(2, 1, 'Jill'); // => ['Paul']
names;
// => ['Jack', 'Laura', 'Jill', 'Megan']

  1. splice, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice (consultado a 29 de setembro de 2021) ↩

  2. push, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push (consultado a 29 de setembro de 2021) ↩

  3. pop, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop (consultado a 29 de setembro de 2021) ↩

  4. shift, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift (consultado a 29 de setembro de 2021) ↩

  5. unshift, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift (consultado a 29 de setembro de 2021) ↩

Editar via GitHub A ligação abre numa nova janela ou separador

Aprende Arrays