JavaMetodi di script array: creare con esempio

Che cos'è un array in JavaCopione?

Un array è un oggetto che può memorizzare a raccolta di oggettiGli array diventano davvero utili quando è necessario memorizzare grandi quantità di dati dello stesso tipo. Supponiamo di voler memorizzare i dettagli di 500 dipendenti. Se si utilizzano le variabili, sarà necessario crearne 500, mentre è possibile fare la stessa cosa con un singolo array. È possibile accedere agli elementi di un array facendo riferimento al suo indice. indice numeroe l'indice del primo elemento di un array è zero.

A differenza degli array nei linguaggi strettamente tipizzati, un JavaGli array di script sono dinamici. La loro lunghezza aumenta automaticamente quando viene assegnato un nuovo elemento e un singolo array può contenere contemporaneamente stringhe, numeri, valori booleani, oggetti e persino altri array. Questa flessibilità rende gli array il contenitore predefinito per i dati di elenco sia negli script del browser che nel codice lato server.

Come creare un array in JavaCopione

Puoi creare un array in JavaCopione come indicato di seguito.

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

Qui stai inizializzando il tuo array come e quando viene creato con i valori "John", "Ann" e "Kevin". L'indice di "John", "Ann" e "Kevin" è rispettivamente 0, 1 e 2. Se vuoi aggiungere più elementi all'array degli studenti, puoi farlo in questo modo:

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

È possibile creare un array anche utilizzando il costruttore Array in questo modo:

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

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

Come accedere e modificare gli elementi di un array

Ogni elemento si trova in una posizione numerata. La notazione tra parentesi quadre legge un valore, assegna un nuovo valore o aggiunge una nuova voce quando l'indice è uguale alla lunghezza corrente.

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

JavaMetodi di script array

L'oggetto Array ha molte proprietà e metodi che aiutano gli sviluppatori a gestire gli array in modo semplice ed efficiente. È possibile ottenere il valore di una proprietà specificando arrayname.property e l'output di un metodo specificando arrayname.method().

1. proprietà length –> Se vuoi conoscere il numero di elementi in un array, puoi usare la proprietà length.
2. proprietà del prototipo –> Se desideri aggiungere nuove proprietà e metodi, puoi utilizzare la proprietà prototipo.
3. metodo inverso -> Puoi invertire l'ordine degli elementi in un array utilizzando un metodo inverso.
4. metodo di ordinamento -> È possibile ordinare gli elementi in un array utilizzando il metodo sort.
5. metodo pop -> Puoi rimuovere l'ultimo elemento di un array usando un metodo pop.
6. metodo del turno -> È possibile rimuovere il primo elemento di un array utilizzando il metodo shift.
7. metodo push –> Puoi aggiungere un valore come ultimo elemento dell'array.

La tabella di riferimento sottostante raggruppa i metodi più utilizzati, in modo da poter vedere a colpo d'occhio quali modificano l'array originale e quali restituiscono un nuovo valore.

Aggiunta e rimozione di elementi

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);

Ricerca, copia e unione

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

Metodi di iterazione: forEach, map, filter e reduce

Moderno JavaLo script privilegia i metodi basati su callback rispetto ai cicli di indice manuali, poiché l'intento dell'operazione è indicato direttamente nel nome del metodo.

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);

JavaEsempio di array di script con codice sorgente Code

Lo script seguente crea un array di studenti, aggiunge un metodo di visualizzazione personalizzato tramite la proprietà prototype e quindi dimostra in sequenza le operazioni di lunghezza, ordinamento, inversione, estrazione e inserimento. Provalo anche tu:

<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>

Uscita prevista:

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

Si noti che l'operazione di ordinamento posiziona "Aaron" prima di "Ann" perché le lettere maiuscole e minuscole vengono confrontate in base ai loro codici carattere. Si noti inoltre che l'operazione di pop ha rimosso "Aaron" dall'array invertito, il che conferma che sia l'operazione di ordinamento che quella di inversione hanno modificato l'array originale sul posto.

Come attraversare un ciclo JavaScript Array

Quattro bagniping Sono disponibili diversi stili, ognuno adatto a una situazione diversa. Il classico ciclo for offre il pieno controllo sull'indice, for…of legge direttamente i valori, forEach esprime chiaramente l'intento e for…in dovrebbe essere riservato alle proprietà degli oggetti.

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);
}

Un trattamento più approfondito della sintassi dei cicli, inclusi while e do…while, appare nell'articolo su come usare i cicli in JavaCopione.

Matrici multidimensionali in JavaCopione

JavaLo script non ha un tipo di matrice dedicato. Una griglia è semplicemente un array i cui elementi sono a loro volta array, e vengono utilizzate due espressioni di indice per raggiungere una singola cella.

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]

Produzione:

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

Gli array compaiono in quasi tutti gli script pratici, dalla convalida dei moduli al rendering dei dati. Continua con il pratico JavaEsempi di codice script, recensione JavaStringhe di script per la gestione del testo e leggere a riguardo interno ed esterno JavaCopione per decidere dove questi script appartengono in una pagina. Gli sviluppatori che desiderano il controllo statico del tipo sul contenuto degli array possono passare alla TypeScript lezione.

DOMANDE FREQUENTI