JavaMétodos de matriz de script: criar com exemplo

O que é um array em JavaRoteiro?

Um array é um objeto que pode armazenar um coleção de itensOs arrays tornam-se realmente úteis quando você precisa armazenar grandes quantidades de dados do mesmo tipo. Suponha que você queira armazenar os detalhes de 500 funcionários. Se você estiver usando variáveis, terá que criar 500 variáveis, enquanto que pode fazer o mesmo com um único array. Você pode acessar os itens em um array referenciando seu elemento. número de índicee o índice do primeiro elemento de um array é zero.

Ao contrário dos arrays em linguagens estritamente tipadas, um JavaO array de script é dinâmico. Seu comprimento cresce automaticamente quando um novo elemento é atribuído, e um único array pode conter strings, números, booleanos, objetos e até mesmo outros arrays simultaneamente. Essa flexibilidade faz dos arrays o contêiner padrão para dados de lista tanto em scripts de navegador quanto em código do lado do servidor.

Como criar um array em JavaScript

Você pode criar uma matriz em JavaScript como dado abaixo.

var students = ["John", "Ann", "Kevin"];

Aqui, você está inicializando seu array conforme e quando ele é criado com os valores “John”, “Ann” e “Kevin”. O índice de “John”, “Ann” e “Kevin” é 0, 1 e 2 respectivamente. Se você quiser adicionar mais elementos ao array Students, você pode fazer assim:

students[3] = "Emma";
students[4] = "Rose";

Você também pode criar um array usando o construtor Array desta forma:

var students = new Array("John", "Ann", "Kevin");

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

Como acessar e modificar elementos de um array

Cada elemento ocupa uma posição numerada. A notação entre colchetes lê um valor, atribui um novo valor ou acrescenta uma nova entrada quando o índice é igual ao comprimento atual.

let students = ["John", "Ann", "Kevin"];

console.log(students[0]);              // John  - first element
console.log(students[students.length - 1]); // Kevin - last element

students[1] = "Anna";                // replace an existing value
students[3] = "Emma";                // append a new value

console.log(students);              // ["John", "Anna", "Kevin", "Emma"]
console.log(students.length);       // 4
console.log(students[9]);              // undefined - index does not exist

JavaMétodos de matriz de script

O objeto Array possui muitas propriedades e métodos que ajudam os desenvolvedores a lidar com arrays de maneira fácil e eficiente. Você pode obter o valor de uma propriedade especificando arrayname.property e a saída de um método especificando arrayname.method().

1. propriedade comprimento -> Se você quiser saber o número de elementos em um array, você pode usar a propriedade length.
2. propriedade de protótipo –> Se você deseja adicionar novas propriedades e métodos, você pode usar a propriedade protótipo.
3. método reverso -> Você pode reverter a ordem dos itens em uma matriz usando um método reverso.
4. método de classificação –> Você pode ordenar os itens em uma matriz usando o método de ordenação.
5. método pop -> Você pode remover o último item de um array usando um método pop.
6. método de mudança –> Você pode remover o primeiro item de uma matriz usando o método shift.
7. método push -> Você pode adicionar um valor como o último item do array.

A tabela de referência abaixo agrupa os métodos mais frequentemente usados ​​para que você possa ver rapidamente quais alteram o array original e quais retornam um novo valor.

Adicionando e Removendo Elementos

let fruits = ["apple", "banana"];

fruits.push("cherry");      // ["apple", "banana", "cherry"]
fruits.unshift("mango");    // ["mango", "apple", "banana", "cherry"]
fruits.pop();                // ["mango", "apple", "banana"]
fruits.shift();              // ["apple", "banana"]

// splice(startIndex, deleteCount, ...itemsToInsert)
fruits.splice(1, 0, "kiwi"); // ["apple", "kiwi", "banana"]
console.log(fruits);

Pesquisar, copiar e unir

let colors = ["red", "green", "blue", "green"];

console.log(colors.indexOf("green"));     // 1  - first match only
console.log(colors.lastIndexOf("green")); // 3
console.log(colors.includes("pink"));     // false
console.log(colors.slice(1, 3));         // ["green", "blue"]
console.log(colors.join(" | "));         // red | green | blue | green
console.log(colors.concat(["black"]));   // new array, colors unchanged

Métodos de iteração: forEach, map, filter e reduce.

EQUIPAMENTOS JavaO Script prioriza métodos orientados a callbacks em vez de loops de índice manuais, porque a intenção da operação é declarada diretamente no nome do método.

const scores = [45, 72, 88, 31, 95];

scores.forEach(s => console.log(s));   // prints each score

const doubled = scores.map(s => s * 2);  // [90, 144, 176, 62, 190]
const passed  = scores.filter(s => s >= 50); // [72, 88, 95]
const total   = scores.reduce((sum, s) => sum + s, 0); // 331
const first   = scores.find(s => s > 80);   // 88

console.log(doubled, passed, total, first);

JavaExemplo de matriz de script com código-fonte Code

O script abaixo cria um array de alunos, adiciona um método de exibição personalizado por meio da propriedade `prototype` e, em seguida, demonstra as operações de comprimento, ordenação, reversão, remoção e inserção em sequência. Experimente você mesmo:

<html>
<head>
	<title>Arrays!!!</title>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		Array.prototype.displayItems=function(){
			for (i=0;i<this.length;i++){
				document.write(this[i] + "<br />");
			}
		}
		document.write("students array<br />");
		students.displayItems();
		document.write("<br />The number of items in students array is " + students.length + "<br />");
		document.write("<br />The SORTED students array<br />");
		students.sort();
		students.displayItems();
		document.write("<br />The REVERSED students array<br />");
		students.reverse();
		students.displayItems();
		document.write("<br />THE students array after REMOVING the LAST item<br />");
		students.pop();
		students.displayItems();
        document.write("<br />THE students array after PUSH<br />");
        students.push("New Stuff");
		students.displayItems();
	</script>
</head>
<body>
</body>
</html>

Resultado esperado:

students array
John
Ann
Aaron
Edwin
Elizabeth

The number of items in students array is 5

The SORTED students array
Aaron
Ann
Edwin
Elizabeth
John

The REVERSED students array
John
Elizabeth
Edwin
Ann
Aaron

THE students array after REMOVING the LAST item
John
Elizabeth
Edwin
Ann

THE students array after PUSH
John
Elizabeth
Edwin
Ann
New Stuff

Observe que a função `sort` coloca "Aaron" antes de "Ann" porque letras maiúsculas e minúsculas são comparadas por seus códigos de caracteres. Observe também que a função `pop` removeu "Aaron" do array invertido, o que confirma que tanto a função `sort` quanto a função `reverse` alteraram o array original.

Como percorrer um loop JavaMatriz de scripts

Quatro banheirosping Existem estilos disponíveis, e cada um se adequa a uma situação diferente. O clássico laço `for` oferece controle total sobre o índice, `for…of` lê os valores diretamente, `forEach` expressa a intenção claramente e `for…in` deve ser reservado para propriedades de objetos.

const cities = ["Paris", "Tokyo", "Cairo"];

// 1. Classic for loop - index is available
for (let i = 0; i < cities.length; i++) {
    console.log(i + ": " + cities[i]);
}

// 2. for...of loop - value is available
for (const city of cities) {
    console.log(city);
}

// 3. forEach with index parameter
cities.forEach((city, index) => console.log(index, city));

// 4. entries() when both index and value are needed
for (const [index, city] of cities.entries()) {
    console.log(index, city);
}

Uma análise mais aprofundada da sintaxe de loops, incluindo while e do…while, aparece no artigo sobre como usar loops em JavaScript.

Matrizes multidimensionais em JavaScript

JavaO script não possui um tipo de matriz dedicado. Uma grade é simplesmente uma matriz cujos elementos também são matrizes, e duas expressões de índice são usadas para acessar uma única célula.

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[1][2]); // 6  - row index 1, column index 2

for (const row of matrix) {
    console.log(row.join(" "));
}

// flatten a nested array into a single level
console.log(matrix.flat()); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Saída:

6
1 2 3
4 5 6
7 8 9
[1, 2, 3, 4, 5, 6, 7, 8, 9]

Arrays aparecem em praticamente todos os scripts práticos, desde validação de formulários até renderização de dados. Continue com o prático JavaExemplos de código de script, Reveja JavaCadeias de script para manipulação de texto, e leia sobre interno e externo JavaScript para decidir onde esses scripts devem ser inseridos em uma página. Os desenvolvedores que desejam verificação estática de tipos no conteúdo de arrays podem prosseguir para o TypeScript tutorial.

Perguntas Frequentes