English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial básico do JavaScript

Objeto JavaScript

Função JavaScript

DOM HTML JS

BOM do navegador JS

Tutorial básico de AJAX

Manual de referência do JavaScript

Objeto Array (Array) do JavaScript

Um array no JavaScript é um objeto global, usado para armazenar múltiplos valores em uma única variável.

Um array pode conter qualquer tipo de dados, incluindo strings, números, objetos, funções, até mesmo outros arrays.

Suponha que você precise armazenar nomes de cidades em código JavaScript. O armazenamento de nomes de cidades em variáveis pode parecer assim:

  let city1 = "Nova Deli";
  let city2 = "Mumbai";
  let city3 = "Jaipur";

Mas, se precisar armazenar o nome de uma cidade de um país em uma variável, isso não será apenas três, pode ser cem.

Seria muito difícil usar muitos variáveis ao mesmo tempo e rastrear todas elas.

O array resolve esse problema fornecendo uma estrutura ordenada para armazenar múltiplos valores ou um conjunto de valores em uma única variável.

Criar array

Existem duas maneiras de criar arrays no JavaScript:

  • literals-criação implícitausando colchetes: []

  • modo conciso-realização diretausando a palavra-chave new

Vamos demonstrar como usar o inicializadoConstante do arrayCriar fruitsArray[]:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
Teste e veja‹/›

A declaração pode ser espalhada em várias linhas:

let fruits = [
  "Apple",
  "Mango",
  "Banana",
  "Orange"
];
Teste e veja‹/›

Agora, aqui está usandoConstrutor do arrayCria o mesmo dado que inicializa new Array():

let fruits = new Array("Apple", "Mango", "Banana", "Orange");
Teste e veja‹/›

Ambos esses métodos criam um array. No entantoliterals-criação implícitaO método (colchetes []) é mais comum e preferido, porquenew Array()Métodos de construtor podem resultar em resultados inconsistentes e inesperados.

Índice do array

O array não tem nome/Em vez de usar pares de valores, eles são indexados usando números inteiros que começam com 0.

Aqui está um exemplo de array atribuído a fruits:

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

Aqui está a desmistificação da maneira como cada elemento do array fruits é indexado:

0123
AppleMangoBananaOrange

O primeiro elemento do array é "Apple", com o índice 0.

O último elemento é "Orange", com o índice3.

Acessar os elementos do array

Pode acessar os elementos do array do JavaScript através do número de índice do elemento entre colchetes.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0];// Retorna "Apple"
fruits[2];// Retorna "Banana"
Teste e veja‹/›

Os índices dos arrays do JavaScript começam com zero: o índice do primeiro elemento do array é 0, o índice do segundo elemento é1, e assim por diante.

Tentar acessar um elemento que não existe no array retornará undefined.

fruits[7];// Retorna undefined
Teste e veja‹/›

Pode acessar o array inteiro através do nome do array.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
document.getElementById("result").innerHTML = fruits;
Teste e veja‹/›

propriedade length do array

Podemos usar alengthA propriedade pode encontrar quantos elementos há no array.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.length;   // retorna 4
Teste e veja‹/›

O índice do último elemento é igual ao valor da propriedade length do array subtraído1.

Este exemplo usa a propriedade length para exibir o valor do último elemento:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let lastIndex = fruits.length - 1;
fruits[lastIndex];
Teste e veja‹/›

adicionar elementos ao array

No variável fruits, temos quatro elementos, incluindo de 0 a3índice. Se você deseja adicionar um novo elemento ao array, atribua um valor ao próximo índice.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[4] = "Guava";
Teste e veja‹/›

    Se adicionarmos um elemento e acidentalmente saltarmos um índice, será criado um elemento no array com valor vazio ('').

fruits[6] = "Strawberry";
Teste e veja‹/›

usandopush()método evita problemas semelhantes, adicionando um elemento ao final do array.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.push("Strawberry");
Teste e veja‹/›

Também pode usarlengthpropriedade adiciona um novo elemento ao array.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[fruits.length] = "Beer";
Teste e veja‹/›

modificar o elemento do array

Através do uso do operador de atribuição, podemos substituir qualquer valor no array.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0] = "Monkey";
Teste e veja‹/›

Array geralmente é usado para combinar listas de tipos de dados semelhantes, mas tecnicamente, elas podem conter qualquer valor ou mistura de valores.

let myArray = [5, 22, "Arrow", "Bone", true, new Date()];
Teste e veja‹/›

遍历数组

Podemos usarforelengthpropriedade para percorrer todo o array.

Neste exemplo, criamos um array de frutas e imprimimos cada índice e valor no documento:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let txt = "";
//遍历数组的长度
for (let i = 0; i < fruits.length; i++) {
txt += i + " = " + fruits[i] + "<br>";
}
Teste e veja‹/›

Também podemos usar os seguintesArray.forEach()方法:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let result = document.getElementById("result");
fruits.forEach(function(element) {
result.innerHTML += element + "<br>";
});
Teste e veja‹/›

Também podemos usarfor...of循环来遍历js数组,这是JavaScript的新功能:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let result = document.getElementById("result");
for (let x of fruits) {
result.innerHTML += x;
}
Teste e veja‹/›

for...ofO loop não recupera o índice do elemento do array, mas geralmente é uma maneira mais simples e mais concisa de percorrer o array.

Array multidimensional

Array multidimensional é um array que contém um ou mais arrays.

  let points = [
   [35, 28, 29, 31],
   [33, 24, 25, 29]
  ];

JavaScript pode entender a profundidade de2,3,4,5Mais níveis de array multidimensional. No entanto, para a maioria das pessoas, é difícil gerenciar mais de três níveis de arrays.

O número de dimensões do array indica o número de índices necessários para escolher um elemento:

  • Para um array bidimensional, você precisa de dois índices para escolher um elemento

  • Para um array tridimensional, você precisa de três índices para escolher um elemento

Um array bidimensional pode ser visto como uma tabela, onde o primeiro [ ] é a linha e o segundo [ ] é a coluna.

points[0][1];   // retorna 28
points[1][0];   // retorna 33
Teste e veja‹/›

Neste exemplo, criamos um array bidimensional e imprimimos cada índice e valor para o documento:

let points = [35, 28, 29, 31],33, 24, 25, 29];
let row;
let col;
for (row = 0; row < 2; row++) {
   for (col = 0; col < 4; col++) {
  document.write(row, col, points[row][col]);
   }
}
Teste e veja‹/›

Claro, você também pode usarlengthobter o tamanho das linhas e colunas:

let points = [
   [10, 12, 14, 16, 18],
   [20, 22, 24, 26],
   [30, 32, 34],
   [32, 34]
];
points.length;// retorna 4 (Total de linhas)
points[0].length;// retorna 5
points[1].length;// retorna 4
points[2].length;// retorna 3
points[3].length;// retorna 2
Teste e veja‹/›

na maioria dos casos2um array unidimensional é suficiente, embora em alguns lugares possa ser usado3array unidimensional.

O array do JavaScript é um objeto

No JavaScript, o array é um tipo especial de objeto.

o operador typeof do JavaScript retorna “Object” para arrays.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
typeof fruits;   // retorna "object"
Teste e veja‹/›

Evite usar new Array() o máximo possível

Não é necessário usar o construtor de array new Array()

Em vez disso, é recomendado usar a maneira de criação implícita de arrays, ou seja, usar diretamente o método de colchetes [], que é mais comum e mais popular.

As duas seguintes sentenças diferentes criam um novo array vazio chamado scores:

  let scores = new Array();  // não é recomendado este método
  let scores = [];     // método recomendado

As duas seguintes sentenças diferentes criam um array contendo5um novo array contendo números:

let scores = new Array(2, 5, 10, 28, 10); // não é recomendado este método
let scores = [2, 5, 10, 28, 10];  // método recomendado
Teste e veja‹/›

a função de construção new Array() pode ter inconsistências e também pode gerar alguns resultados inesperados:

let scores = new Array(10, 25);  // criar um array contendo dois elementos(10e25) um array
let scores = new Array(10);  // criar um array contendo10um array com valores de elementos não definidos
Teste e veja‹/›

Como determinar se uma variável é um array - Array.isArray()

Como você sabede, o operador typeof do JavaScript retorna “Object” para arrays.

Um problema comum é:Como saber se uma variável é um array?

Para resolver esse problema, ECMAScript 5Definiu um novo métodoArray.isArray():

let fruits = ["Apple", "Mango", "Banana", "Orange"];
Array.isArray(fruits);
Teste e veja‹/›

Se o objeto foi criado pelo construtor dado, também pode usar o operador instanceof para retornar true:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
if (fruits instanceof Array) {
   // sentenças para executar
}
Teste e veja‹/›

Passar array para função

Neste exemplo, passaremos um array para a função:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
myFunc(fruits);
function myFunc(arg) {
  for (let elem of arg) {
  document.write(elem, "<br>");
  }
}
Teste e veja‹/›

Retorno de array da função

Neste exemplo, retornaremos um array da função:

function myFunc() {
  let fruits = ["Apple", "Mango", "Banana", "Orange"];
  return fruits;
}
let myArray = myFunc();
document.write(myArray);
Teste e veja‹/›