Métodos de matriz JavaScript

Índice

Os métodos estão listados na ordem em que aparecem nesta página do tutorial

Array length
Array toString()
Array pop()
Array push()
Array shift()
Array unshift()
Array join()
Array delete()
Array concat()
Array flat()
Array splice()
Array slice()

Comprimento da matriz JavaScript

A propriedade length retorna o comprimento (tamanho) de um array:

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = 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>

Matriz JavaScript `toString()`

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>

O método join() também une todos os elementos do array em uma string.

Ele se comporta exatamente como toString(), mas além disso você pode especificar o separador:

Exemplo

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

Resultado:

Banana * Orange * Apple * Mango

Experimente você mesmo →

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

<p>The join() method joins array elements into a string.</p>
<p>It this example we have used " * " as a separator between the elements:</p>

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

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

</body>
</html>

Estourando e empurrando

Ao trabalhar com arrays, é fácil remover elementos e adicionar novos elementos.

Isto é o que é estourar e empurrar:

Retirar itens fora de um array ou empurrar itens em um array.

Matriz JavaScript `pop()`

O método pop() remove o último elemento de um array:

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

Experimente você mesmo →

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

<p>The pop() method removes the last element from an array.</p>

<p id="demo1"></p>
<p id="demo2"></p>

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

</body>
</html>

O método pop() retorna o valor que foi "exibido":

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();

Experimente você mesmo →

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

<p>The pop() method returns the value that was "popped out":</p>

<p id="demo1"></p>
<p id="demo2"></p>

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

</body>
</html>

Matriz JavaScript `push()`

O método push() adiciona um novo elemento a um array (no final):

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

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>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

O método push() retorna o novo comprimento do array:

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");

Experimente você mesmo →

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

<p>The push() method returns the new array length:</p>

<p id="demo1"></p>
<p id="demo2"></p>

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

document.getElementById("demo1").innerHTML = fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Elementos de mudança

Shifting é equivalente a popping, mas trabalhar no primeiro elemento em vez de o último.

Matriz JavaScript `shift()`

O método shift() remove o primeiro elemento do array e "muda" todos outros elementos para um índice inferior.

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

Experimente você mesmo →

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

<p>The shift() method removes the first element of an array (and "shifts" the other elements to the left):</p>

<p id="demo1"></p>
<p id="demo2"></p>

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

</body>
</html>

O método shift() retorna o valor que foi "deslocado":

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>
<p>The shift() method returns the element that was shifted out.</p>

<p id="demo1"></p>
<p id="demo2"></p>

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

</body>
</html>

Matriz JavaScript `unshift()`

O método unshift() adiciona um novo elemento a um array (no início) e "unshifts" elementos mais antigos:

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

Experimente você mesmo →

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

<p>The unshift() method adds new elements to the beginning of an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

O método unshift() retorna o novo comprimento do array:

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

Experimente você mesmo →

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

<p>The unshift() method returns the length of the new array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Alterando Elementos

Os elementos do array são acessados usando seu número de índice:

Os índices da matriz começam com 0:

[0] é o primeiro elemento do array
[1] é o segundo
[2] é o terceiro ...

Exemplo

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

Experimente você mesmo →

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

<p>Array elements are accessed using their index number:</p>

<p id="demo1"></p>
<p id="demo2"></p>

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

</body>
</html>

Comprimento da matriz JavaScript

A propriedade length fornece uma maneira fácil de anexar um novo elemento a um array:

Exemplo

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

Experimente você mesmo →

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

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

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[fruits.length] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Matriz JavaScript `delete()`

Aviso !

Os elementos da matriz podem ser excluídos usando o operador JavaScript delete.

Usar delete deixa buracos indefinidos no variedade.

Use pop() ou shift().

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The delete Method</h2>

<p>Deleting elements leaves undefined holes in an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

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

document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];

delete fruits[0];

document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];
</script>

</body>
</html>

Mesclando (Concatenando) Matrizes

O método concat() cria um novo array mesclando (concatenando) matrizes existentes:

Exemplo (mesclando duas matrizes)

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];

const myChildren = myGirls.concat(myBoys);

Experimente você mesmo →

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

<p>The concat() method merges (concatenates) arrays:</p>

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

<script>
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);

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

</body>
</html>

O método concat() não altera os arrays existentes. Ele sempre retorna um novo array.

O método concat() pode receber qualquer número de argumentos de array:

Exemplo (mesclagem de três matrizes)

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

Experimente você mesmo →

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

<p>The concat() method merges (concatenates) arrays:</p>

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

<script>
const array1 = ["Cecilie", "Lone"];
const array2 = ["Emil", "Tobias", "Linus"];
const array3 = ["Robin", "Morgan"];

const myChildren = array1.concat(array2, array3); 

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

</body>
</html>

O método concat() também pode receber strings como argumentos:

Exemplo (mesclando uma matriz com valores)

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");

Experimente você mesmo →

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

<p>The concat() method can merge string values to arrays:</p>

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

<script>
const myArray = ["Emil", "Tobias", "Linus"];
const myChildren = myArray.concat("Peter"); 
document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

Achatando um array

Achatar uma matriz é o processo de reduzir a dimensionalidade de uma matriz.

O método flat() cria um novo array com elementos de submatriz concatenados em uma profundidade especificada.

Exemplo

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();

Experimente você mesmo →

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

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

<script>
const myArr = [[1,2],[3,4],[5,6]];

const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

Suporte ao navegador

JavaScript Array flat() é compatível com todos os navegadores modernos desde janeiro de 2020:


Chrome 69	Edge 79	Firefox 62	Safari 12	Opera 56
Sep 2018	Jan 2020	Sep 2018	Sep 2018	Sep 2018

Matrizes de emenda e fatiamento

O método splice() adiciona novos itens a um array.

O método slice() corta um pedaço de um array.

Matriz JavaScript `splice()`

O método splice() pode ser usado para adicionar novos itens a um array:

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

Experimente você mesmo →

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

<p>The splice() method adds new elements to an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

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

fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

O primeiro parâmetro (2) define a posição onde novos elementos devem ser adicionado (emendado).

O segundo parâmetro (0) define quantos elementos devem ser removido.

O resto dos parâmetros ("Lemon" , "Kiwi") definem os novos elementos a serem adicionado.

O método splice() retorna um array com os itens deletados:

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

Experimente você mesmo →

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

<p>The splice() method adds new elements to an array, and returns an array with the deleted elements (if any):</p>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array:<br> " + fruits;
let removed = fruits.splice(2, 2, "Lemon", "Kiwi"); 
document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
document.getElementById("demo3").innerHTML = "Removed Items:<br> " + removed; 
</script>

</body>
</html>

Usando `splice()` para remover elementos

Com uma configuração inteligente de parâmetros, você pode usar splice() para remover elementos sem sair "buracos" na matriz:

Exemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);

Experimente você mesmo →

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

<p>The splice() methods can be used to remove array elements:</p>

<p id="demo1"></p>
<p id="demo2"></p>

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

</body>
</html>

O primeiro parâmetro (0) define a posição onde os novos elementos devem ser adicionado (emendado).

O segundo parâmetro (1) define quantos elementos devem ser removido.

O resto dos parâmetros são omitidos. Nenhum novo elemento será adicionado.

Matriz JavaScript `slice()`

O método slice() divide um pedaço de um array em um novo variedade.

Este exemplo corta uma parte de um array começando no elemento 1 do array ("Laranja"):

Exemplo

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>
<p>Slice out a part of an array starting from array element 1 ("Orange"):</p>

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

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

Observação

O método slice() cria um novo array.

O método slice() não remove nenhum elemento do array de origem.

Este exemplo corta uma parte de um array começando no elemento 3 do array ("Maçã"):

Exemplo

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);

Experimente você mesmo →

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

<p>Slice out a part of an array starting from array element 3 ("Apple")</p>

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

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

O método slice() pode receber dois argumentos como slice(1, 3).

O método então seleciona elementos do argumento inicial e até (mas não incluindo) o argumento final.

Exemplo

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

Experimente você mesmo →

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

<p>When the slice() method is given two arguments, it selects array elements from the start argument, and up to (but not included) the end argument:</p>

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

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

Se o argumento final for omitido, como nos primeiros exemplos, o slice() O método corta o resto do array.

Exemplo

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);

Experimente você mesmo →

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

<p>Slice out a part of an array starting from array element 2 ("Lemon"):</p>

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

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

`toString()` automático

JavaScript converte automaticamente um array em uma string separada por vírgula quando um valor primitivo é esperado.

Este é sempre o caso quando você tenta gerar um array.

Esses dois exemplos produzirão o mesmo resultado:

Exemplo

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

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>

Exemplo

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

Experimente você mesmo →

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

<p>JavaScript automatically converts an array to a comma separated string when a simple value is expected:</p>

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

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

</body>
</html>

Observação

Todos os objetos JavaScript possuem um método toString().

Encontrando valores máximos e mínimos em uma matriz

Não há funções integradas para encontrar o valor mais alto ou valor mais baixo em uma matriz JavaScript.

Você aprenderá como resolver esse problema na próxima capítulo deste tutorial.

Classificando matrizes

A classificação de matrizes é abordada no próximo capítulo deste tutorial.

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.

Métodos de matriz JavaScript

Índice

Comprimento da matriz JavaScript

Exemplo

Matriz JavaScript toString()

Exemplo

Exemplo

Estourando e empurrando

Matriz JavaScript pop()

Exemplo

Exemplo

Matriz JavaScript push()

Exemplo

Exemplo

Elementos de mudança

Matriz JavaScript shift()

Exemplo

Exemplo

Matriz JavaScript unshift()

Exemplo

Exemplo

Alterando Elementos

Exemplo

Comprimento da matriz JavaScript

Exemplo

Matriz JavaScript delete()

Aviso !

Exemplo

Mesclando (Concatenando) Matrizes

Exemplo (mesclando duas matrizes)

Exemplo (mesclagem de três matrizes)

Exemplo (mesclando uma matriz com valores)

Achatando um array

Exemplo

Suporte ao navegador

Matrizes de emenda e fatiamento

Matriz JavaScript splice()

Exemplo

Exemplo

Usando splice() para remover elementos

Exemplo

Matriz JavaScript slice()

Exemplo

Observação

Exemplo

Exemplo

Exemplo

toString() automático

Exemplo

Exemplo

Observação

Encontrando valores máximos e mínimos em uma matriz

Classificando matrizes

Referência completa de array

Matriz JavaScript `toString()`

Matriz JavaScript `pop()`

Matriz JavaScript `push()`

Matriz JavaScript `shift()`

Matriz JavaScript `unshift()`

Matriz JavaScript `delete()`

Matriz JavaScript `splice()`

Usando `splice()` para remover elementos

Matriz JavaScript `slice()`

`toString()` automático