Matrizes JavaScript

Índice

    Mostrar índice

Um array é uma variável especial que pode conter mais de um valor:

const cars = ["Saab", "Volvo", "BMW"];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Por que usar matrizes?

Se você tiver uma lista de itens (uma lista de nomes de carros, por exemplo), armazenar o carros em variáveis únicas poderiam ficar assim:

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";

No entanto, e se você quiser percorrer os carros e encontrar um específico? E se você não tivesse 3 carros, mas 300?

A solução é uma matriz!

Uma matriz pode conter muitos valores sob um único nome, e você pode acesse os valores referindo-se a um número de índice.

Criando uma matriz

Usar um array literal é a maneira mais fácil de criar um array JavaScript.

Sintaxe:

const array_name = [item1, item2, ...];      

É uma prática comum declarar arrays com a palavra-chave const.

Saiba mais sobre const com arrays no capítulo: JS Array Const.

Exemplo

const cars = ["Saab", "Volvo", "BMW"];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Espaços e quebras de linha não são importantes. Uma declaração pode abranger várias linhas:

Exemplo

const cars = [
  "Saab",
    "Volvo",
    "BMW"
];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = [
  "Saab",
  "Volvo",
  "BMW"
];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Você também pode criar um array e depois fornecer os elementos:

Exemplo

const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Usando a palavra-chave JavaScript nova

O exemplo a seguir também cria um Array e atribui valores a ele:

Exemplo

const cars = new Array("Saab", "Volvo", "BMW");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Os dois exemplos acima fazem exatamente o mesmo.

Não há necessidade de usar new Array().

Para simplicidade, legibilidade e velocidade de execução, use o método literal de array.

Acessando Elementos do Array

Você acessa um elemento de array referindo-se ao número do índice:

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Observação: os índices de array começam com 0.

[0] é o primeiro elemento. [1] é o segundo elemento.

Alterando um elemento de array

Esta instrução altera o valor do primeiro elemento em cars:

cars[0] = "Opel";

Exemplo

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Convertendo um array em uma string

O método JavaScript toString() converte um array em um sequência de valores de matriz (separados por vírgula).

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Resultado:

Banana,Orange,Apple,Mango

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

Acesse o array completo

Com JavaScript, o array completo pode ser acessado referindo-se ao array nome:

Exemplo

const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Matrizes são objetos

Matrizes são um tipo especial de objetos. O operador typeof em JavaScript retorna "objeto" para matrizes.

Porém, arrays JavaScript são melhor descritos como arrays.

Arrays usam números para acessar seus “elementos”. Nisso exemplo, pessoa[0] retorna João:

Variedade :

const person = ["John", "Doe", 46];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Arrays use numbers to access its elements.</p>

<p id="demo"></p>

<script>
const person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>

</body>
</html>

Os objetos usam nomes para acessar seus "membros". Neste exemplo, person.firstName retorna João:

Objeto:

const person = {firstName:"John", lastName:"Doe", age:46};

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>

<p>JavaScript uses names to access object properties.</p>
<p id="demo"></p>

<script>
const person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = person.firstName;
</script>

</body>
</html>

Elementos da matriz podem ser objetos

Variáveis JavaScript podem ser objetos. Matrizes são tipos especiais de objetos.

Por causa disso, você pode ter variáveis de diferentes tipos no mesma matriz.

Você pode ter objetos em um Array. Você pode ter funções em um Array. Você pode tem matrizes em um Array:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Propriedades e métodos de array

A verdadeira força dos arrays JavaScript são as propriedades integradas do array e métodos:

cars.length   // Returns the number of elements
cars.sort()   // Sorts the array

Os métodos de array serão abordados nos próximos capítulos.

A propriedade do comprimento

A propriedade length de um array retorna o comprimento de um array (o número de array elementos).

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property returns the length of an array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>

</body>
</html>

A propriedade length é sempre um a mais que o índice mais alto da matriz.

Acessando o primeiro elemento da matriz

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits[0];
</script>

</body>
</html>

Acessando o último elemento da matriz

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits[fruits.length-1];
</script>

</body>
</html>

Elementos da matriz em loop

Uma maneira de percorrer um array é usar um loop for:

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text 
  += "</ul>";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Looping an Array</h2>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Você também pode usar a função Array.forEach():

Exemplo

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

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
  
function 
  myFunction(value) {
  
 text += "<li>" + value + "</li>";
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>

<p>Call a function for each array element:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

document.getElementById("demo").innerHTML = text;

function myFunction(value) {
  text += "<li>" + value + "</li>";
} 
</script>

</body>
</html>

Adicionando Elementos de Matriz

A maneira mais fácil de adicionar um novo elemento a um array é usando o método push():

Exemplo

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");  // Adds a new element (Lemon) to fruits

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>

<p>The push method appends a new element to an array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits.push("Lemon");
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

Um novo elemento também pode ser adicionado a um array usando a propriedade length:

Exemplo

const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon";  // Adds "Lemon" to fruits

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>The length property provides an easy way to append new elements to an array without using the push() method.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits[fruits.length] = "Lemon";
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

AVISO!
<p>Adicionar elementos com índices altos pode criar "buracos" indefinidos em um array:

Exemplo

const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";  // Creates undefined "holes" in fruits

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Adding elements with high indexes can create undefined "holes" in an array.</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";

let fLen = fruits.length;
let text = "";
for (i = 0; i < fLen; i++) {
  text += fruits[i] + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Matrizes Associativas

Muitas linguagens de programação oferecem suporte a arrays com índices nomeados.

Matrizes com índices nomeados são chamadas associativas matrizes (ou hashes).

JavaScript não suporta arrays com índices nomeados.

Em JavaScript, arrays sempre usam índices numerados.

Exemplo

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;    // Will return 3
person[0];        // Will return "John"

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

AVISO!!
Se você usar índices nomeados, o JavaScript redefinirá o array para um objeto.

Depois disso, alguns métodos e propriedades de array produzirão resultados incorretos. resultados.

Exemplo:

const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length;     // Will return 0
person[0];         // Will return undefined

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>If you use a named index when accessing an array, JavaScript will redefine the array to a standard object, and some array methods and properties will produce undefined or incorrect results.</p>

<p id="demo"></p>

<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

A diferença entre matrizes e objetos

Em JavaScript, arrays usam índices numerados.

Em JavaScript, objetos usam índices nomeados.

Arrays são um tipo especial de objeto, com índices numerados.

Quando usar matrizes. Quando usar objetos.

  • JavaScript não oferece suporte a matrizes associativas.

  • Você deve usar objetos quando quiser que os nomes dos elementos sejam strings (texto).

  • Você deve usar arrays quando quiser que os nomes dos elementos sejam números.

JavaScript nova matriz()

JavaScript possui um construtor de array integrado new Array().

Mas você pode usar [] com segurança.

Essas duas instruções diferentes criam um novo array vazio chamado points:

const points = new Array();
const points = [];

Essas duas instruções diferentes criam um novo array contendo 6 números:

const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Creating an Array</h2>

<p>Avoid using new Array(). Use [] instead.</p>

<p id="demo"></p>

<script>
//const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

A palavra-chave new pode produzir alguns resultados inesperados:

// Create an array with three elements:
const points = new Array(40, 100, 1);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Create an Array with three elements.</p>

<p id="demo"></p>

<script>
var points = new Array(40, 100, 1);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

// Create an array with two elements:
const points = new Array(40, 100);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Create an Array with two elements.</p>

<p id="demo"></p>

<script>
var points = new Array(40, 100);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

// Create an array with one element ???
const points = new Array(40);  

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Avoid using new Array().</p>

<p id="demo"></p>

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

Um erro comum

const points = [40];

não é o mesmo que:

const points = new Array(40);
// Create an array with one element:
const points = [40];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Create an Array with one element.</p>

<p id="demo"></p>

<script>
var points = [40];
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

// Create an array with 40 undefined elements:
const points = new Array(40);  

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Avoid using new Array().</p>

<p id="demo"></p>

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

Como reconhecer uma matriz

Uma pergunta comum é: Como posso saber se uma variável é um array?

O problema é que o operador JavaScript typeof retorna "objeto":

const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The typeof Operator</h2>

<p>The typeof operator, when used on an array, returns object:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = typeof fruits;
</script>

</body>
</html>

O operador typeof retorna object porque um array JavaScript é um objeto.

Solução 1:

Para resolver este problema ECMAScript 5 (JavaScript 2009) definiu um novo método Array.isArray():

Array.isArray(fruits);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The isArray() Method</h2>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = Array.isArray(fruits);
</script>

</body>
</html>

Solução 2:

O operador instanceof retorna verdadeiro se um objeto for criado por um determinado construtor:

const fruits = ["Banana", "Orange", "Apple"];
    
fruits instanceof Array;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The instanceof Operator</h2>

<p>The instanceof operator returns true when used on an array:</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits instanceof Array;
</script>

</body>
</html>

Referência completa de array

Para uma referência completa do Array, acesse:

Referência completa de array JavaScript.

A referência contém descrições e exemplos de todos os Array propriedades e métodos.