Matrizes JavaScript

Resumo : neste tutorial, você aprenderá sobre arrays JavaScript e suas operações básicas.

Introdução às matrizes JavaScript

Em JavaScript, um array é uma lista ordenada de valores. Cada valor é chamado de elemento especificado por um índice :

Uma matriz JavaScript possui as seguintes características:

1. Primeiro, um array pode conter valores de tipos mistos. Por exemplo, você pode ter um array que armazene elementos com os tipos number, string, boolean e null.
2. Em segundo lugar, o tamanho de uma matriz é dinâmico e de crescimento automático. Em outras palavras, você não precisa especificar o tamanho do array antecipadamente.

Criando matrizes JavaScript

JavaScript fornece duas maneiras de criar um array. A primeira é usar o Arrayconstrutor da seguinte maneira:

let scores = new Array();Linguagem de código:  JavaScript  ( javascript )

A scores matriz está vazia, o que contém quaisquer elementos.

Se você souber o número de elementos que o array conterá, poderá criar um array com um tamanho inicial conforme mostrado no exemplo a seguir:

let scores = Array(10);Linguagem de código:  JavaScript  ( javascript )

Para criar um array e inicializá-lo com alguns elementos, você passa os elementos como uma lista separada por vírgulas para o Array()construtor.

Por exemplo, o seguinte cria a scoresmatriz que possui cinco elementos (ou números):

let scores = new Array(9,10,8,7,6);Linguagem de código:  JavaScript  ( javascript )

Observe que se você usar o Array()construtor para criar um array e passar um número para ele, você estará criando um array com um tamanho inicial.

No entanto, quando você passa um valor de outro tipo stringpara o Array()construtor, você cria um array com um elemento desse valor. Por exemplo:

let athletes = new Array(3); // creates an array with initial size 3
let scores = new Array(1, 2, 3); // create an array with three numbers 1,2 3
let signs = new Array('Red'); // creates an array with one element 'Red'Linguagem de código:  JavaScript  ( javascript )

JavaScript permite omitir o newoperador ao usar o construtor Array(). Por exemplo, a instrução a seguir cria o  artistsarray.

let artists = Array();Linguagem de código:  JavaScript  ( javascript )

Na prática, você raramente usará o Array()construtor para criar um array.

A maneira mais preferida de criar um array é usar a notação literal de array:

let arrayName = [element1, element2, element3, ...];Linguagem de código:  JavaScript  ( javascript )

A forma literal da matriz usa colchetes []para agrupar uma lista de elementos separados por vírgula.

O exemplo a seguir cria a colorsmatriz que contém elementos de string:

let colors = ['red', 'green', 'blue'];Linguagem de código:  JavaScript  ( javascript )

Para criar um array vazio, você usa colchetes sem especificar nenhum elemento como este:

let emptyArray = [];Linguagem de código:  JavaScript  ( javascript )

Acessando elementos de array JavaScript

Matrizes JavaScript são indexadas com base em zero. Em outras palavras, o primeiro elemento de um array começa no índice 0, o segundo elemento começa no índice 1 e assim por diante.

Para acessar um elemento em uma matriz, você especifica um índice entre colchetes []:

arrayName[index]Linguagem de código:  CSS  ( css )

O seguinte mostra como acessar os elementos do mountainsarray:

let mountains = ['Everest', 'Fuji', 'Nanga Parbat'];

console.log(mountains[0]); // 'Everest'
console.log(mountains[1]); // 'Fuji'
console.log(mountains[2]); // 'Nanga Parbat'Linguagem de código:  JavaScript  ( javascript )

Para alterar o valor de um elemento, você atribui esse valor ao elemento assim:

let mountains = ['Everest', 'Fuji', 'Nanga Parbat'];
mountains[2] = 'K2';

console.log(mountains);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'Everest', 'Fuji', 'K2' ]Linguagem de código:  JSON/JSON com comentários  ( json )

Obtendo o tamanho do array

Normalmente, a lengthpropriedade de um array retorna o número de elementos. O exemplo a seguir mostra como usar a lengthpropriedade:

let mountains = ['Everest', 'Fuji', 'Nanga Parbat'];
console.log(mountains.length); // 3Linguagem de código:  JavaScript  ( javascript )

Operações básicas em arrays

A seguir explicamos algumas operações básicas em arrays. Você aprenderá operações avançadas como map(), filter()e reduce()nos próximos tutoriais.

1) Adicionando um elemento ao final de um array

Para adicionar um elemento ao final de um array, você usa o push()método:

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
seas.push('Red Sea');

console.log(seas); Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea', 'Red Sea' ]Linguagem de código:  JSON/JSON com comentários  ( json )

2) Adicionando um elemento ao início de um array

Para adicionar um elemento ao início de um array, você usa o unshift()método:

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
seas.unshift('Red Sea');

console.log(seas);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'Red Sea', 'Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea' ]Linguagem de código:  JSON/JSON com comentários  ( json )

3) Removendo um elemento do final de um array

Para remover um elemento do final de um array, você usa o pop()método:

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
const lastElement = seas.pop();
console.log(lastElement); Linguagem de código:  JavaScript  ( javascript )

Saída:

Baltic Sea

4) Removendo um elemento do início de um array

Para remover um elemento do início de um array, você usa o shift()método:

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
const firstElement = seas.shift();

console.log(firstElement);Linguagem de código:  JavaScript  ( javascript )

Saída:

Black Sea

5) Encontrar um índice de um elemento no array

Para encontrar o índice de um elemento, você usa o indexOf()método:

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
let index = seas.indexOf('North Sea');

console.log(index); // 2Linguagem de código:  JavaScript  ( javascript )

6) Verifique se um valor é um array

Para verificar se um valor é um array, você usa Array.isArray()o método:

console.log(Array.isArray(seas)); // trueLinguagem de código:  JavaScript  ( javascript )

Resumo

• Em JavaScript, um array é uma lista ordenada de valores. Cada valor é chamado de elemento especificado por um índice.
• Uma matriz pode conter valores de tipos mistos.
• As matrizes JavaScript são dinâmicas, o que significa que aumentam ou diminuem conforme necessário.