Tutorial de JS

JS HOME Introdução JS JS Para onde Saída JS Declarações JS Sintaxe JS Comentários JS Variáveis ​​JS JS Let JS Const Operadores JS JS Aritmética Atribuição de JS Tipos de dados JS Funções JS Objetos JS Eventos JS Strings JS Métodos de string JS Pesquisa de String JS Modelos de String JS Números JS Métodos de número JS Matrizes JS Métodos de matriz JS Classificação de matriz JS Iteração de matriz JS Const da matriz JS Datas JS Formatos de data JS Métodos de obtenção de data JS Métodos de conjunto de datas JS JS Math JS Aleatório JS Booleanos Comparações JS Condições JS Interruptor JS Circuito JS para JS Loop Para Entrada JS Loop Para De JS Loop Enquanto Quebra de JS Iteráveis ​​JS Conjuntos JS Mapas JS Tipo JS de Conversão de tipo JS JS bit a bit JS RegExp Erros JS Escopo JS Içamento JS Modo estrito JS JS esta palavra-chave Função de seta JS Classes JS JS JSON Depuração JS Guia de estilo JS Práticas recomendadas de JS Erros de JS Desempenho JS Palavras reservadas JS

Versões JS

Versões JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Histórico de JS

Objetos JS

Definições de objeto Propriedades do objeto Métodos de objeto Exibição de objetos Acessadores de objetos Construtores de objetos Protótipos de Objetos Iteráveis ​​de objeto Conjuntos de objetos Mapas de objetos Referência do objeto

Funções JS

Definições de função Parâmetros de função Invocação de função Chamada de Função Função Aplicar Fechamentos de Função

Classes JS

Introdução à aula Herança de classe Classe Estática

JS Assíncrono

Retornos de chamada JS JS Assíncrono Promessas JS JS Async/Aguardar

JS HTML DOM

Introdução ao DOM Métodos DOM Documento DOM Elementos DOM HTML DOM Formulários DOM CSS DOM Animações DOM Eventos DOM Ouvinte de eventos DOM Navegação DOM Nós DOM Coleções DOM Listas de nós DOM

BOM do navegador JS

Janela JS Tela JS Localização JS Histórico de JS Navegador JS Alerta pop-up JS Temporização JS Cookies JS

APIs da Web JS

Introdução à API da Web API de formulários da Web API de histórico da web API de armazenamento da Web API do trabalhador da Web API de busca da Web API de geolocalização da Web

JS AJAX

Introdução AJAX AJAX XML Http Solicitação AJAX Resposta AJAX Arquivo XML AJAX PHP AJAX ASP AJAX Banco de dados AJAX Aplicativos AJAX Exemplos AJAX

JS JSON

Introdução JSON Sintaxe JSON JSON x XML Tipos de dados JSON Análise JSON JSON Stringify Objetos JSON Matrizes JSON Servidor JSON JSON PHP HTML JSON JSON JSONP

JS x jQuery

Seletores jQuery HTML jQuery jQuery CSS jQuery DOM

Gráficos JS

Gráficos JS Tela JS JS Plotly JS Chart.js JS Google Chart JS D3.js

Exemplos JS

Exemplos JS JS HTML DOM Entrada HTML JS Objetos HTML JS Eventos HTML JS Navegador JS Editor JS Exercícios JS Teste JS Certificado JS

Referências JS

Objetos JavaScript Objetos HTML DOM


Métodos de matriz JavaScript


Convertendo Arrays em Strings

O método JavaScript toString()converte um array em uma string de valores de array (separados por vírgula).

Exemplo

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

Resultado:

Banana,Orange,Apple,Mango

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

Ele se comporta 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

Estalando e empurrando

Quando você trabalha com arrays, é fácil remover elementos e adicionar novos elementos.

Isto é o que estourar e empurrar é:

Retirar itens de uma matriz ou enviar itens para uma matriz.



Matriz JavaScript pop()

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

Exemplo

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

O pop()método retorna o valor que foi "extraído":

Exemplo

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

Push de matriz JavaScript()

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

Exemplo

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

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

Exemplo

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

Elementos de deslocamento

Deslocar é equivalente a estourar, mas trabalhando no primeiro elemento em vez do último.


Deslocamento de matriz JavaScript()

O shift()método remove o primeiro elemento da matriz e "desloca" todos os outros elementos para um índice inferior.

Exemplo

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

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

Exemplo

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

JavaScript Array unshift()

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

Exemplo

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

O unshift()método retorna o novo comprimento da matriz.

Exemplo

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

Alterando Elementos

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

Os índices de matriz começam com 0:

[0] é o primeiro elemento da matriz
[1] é o segundo
[2] é o terceiro ...

Exemplo

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

Comprimento da matriz JavaScript

A lengthpropriedade fornece uma maneira fácil de anexar um novo elemento a uma matriz:

Exemplo

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

Exclusão de matriz JavaScript()

Aviso !

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

Usando deletedeixa undefinedburacos na matriz.

Use pop() ou shift() em vez disso.

Exemplo

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

Mesclando (Concatenando) Arrays

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

Exemplo (Mesclando Dois Arrays)

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

const myChildren = myGirls.concat(myBoys);

O concat()método não altera as matrizes existentes. Ele sempre retorna uma nova matriz.

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

Exemplo (Mesclando três arrays)

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

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

Exemplo (Mesclando um Array com Valores)

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

Splicing e Slicing Arrays

O splice()método adiciona novos itens a uma matriz.

O slice()método fatia um pedaço de uma matriz.


Emenda de matriz JavaScript()

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

Exemplo

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

O primeiro parâmetro (2) define a posição onde novos elementos devem ser adicionados (spliced ​​in).

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

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

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

Exemplo

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

Usando splice() para remover elementos

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

Exemplo

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

O primeiro parâmetro (0) define a posição onde novos elementos devem ser adicionados (spliced ​​in).

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

Os demais parâmetros são omitidos. Nenhum novo elemento será adicionado.


Fatia de matriz JavaScript()

O slice()método fatia um pedaço de uma matriz em uma nova matriz.

Este exemplo corta uma parte de uma matriz a partir do elemento 1 da matriz ("Laranja"):

Exemplo

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

Observação

O slice()método cria uma nova matriz.

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

Este exemplo corta uma parte de uma matriz a partir do elemento 3 da matriz ("Apple"):

Exemplo

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

O slice()método 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);

Se o argumento final for omitido, como nos primeiros exemplos, o slice() método fatiará o restante da matriz.

Exemplo

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

Automático toString()

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

Este é sempre o caso quando você tenta gerar uma matriz.

Esses dois exemplos produzirão o mesmo resultado:

Exemplo

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

Exemplo

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

Observação

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


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

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

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


Classificando Matrizes

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

Referência de matriz completa

For a complete Array reference, go to our:

Complete JavaScript Array Reference.

The reference contains descriptions and examples of all Array properties and methods.

Test Yourself With Exercises

Exercise:

Use the correct Array method to remove the last item of the fruits array.

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