JavaMetode de matrice de script: Creați cu exemplu

În ce este un array JavaScenariul?

Un tablou este un obiect care poate stoca a colecție de articoleTablourile devin foarte utile atunci când trebuie să stocați cantități mari de date de același tip. Să presupunem că doriți să stocați detalii despre 500 de angajați. Dacă utilizați variabile, va trebui să creați 500 de variabile, în timp ce puteți face același lucru cu un singur tablou. Puteți accesa elementele dintr-un tablou consultând datele sale. Numarul indexului, iar indicele primului element al unui tablou este zero.

Spre deosebire de tablourile din limbajele strict tipate, un JavaUn tablou de script este dinamic. Lungimea sa crește automat atunci când este atribuit un element nou, iar un singur tablou poate conține șiruri de caractere, numere, valori booleene, obiecte și chiar alte tablouri în același timp. Această flexibilitate face ca tablourile să fie containerul implicit pentru datele de tip listă atât în ​​scripturile browserului, cât și în codul server-side.

Cum se creează o matrice în JavaScenariu

Puteți crea o matrice în JavaScenariu după cum este prezentat mai jos.

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

Aici, vă inițializați matricea pe măsură ce este creată cu valorile „John”, „Ann” și „Kevin”. Indicele lui „John”, „Ann” și „Kevin” este 0, 1 și, respectiv, 2. Dacă doriți să adăugați mai multe elemente la matricea studenților, puteți proceda astfel:

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

De asemenea, puteți crea un array folosind constructorul Array, astfel:

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

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

Cum se accesează și se modifică elementele matricei

Fiecare element se află într-o poziție numerotată. Notația între paranteze pătrate citește o valoare, atribuie o valoare nouă sau adaugă o intrare nouă atunci când indicele este egal cu lungimea curentă.

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

JavaMetode de matrice de scripturi

Obiectul Array are multe proprietăți și metode care îi ajută pe dezvoltatori să gestioneze cu ușurință și eficient matricele. Puteți obține valoarea unei proprietăți specificând arrayname.property și rezultatul unei metode prin specificarea arrayname.method().

1. proprietatea lungimii –> Dacă doriți să cunoașteți numărul de elemente dintr-o matrice, puteți utiliza proprietatea lungime.
2. proprietate prototip –> Dacă doriți să adăugați noi proprietăți și metode, puteți utiliza proprietatea prototip.
3. metoda inversă –> Puteți inversa ordinea elementelor dintr-o matrice folosind o metodă inversă.
4. metodă de sortare –> Puteți sorta elementele dintr-un array folosind metoda de sortare.
5. metoda pop –> Puteți elimina ultimul element dintr-o matrice folosind o metodă pop.
6. metoda de schimbare –> Puteți elimina primul element dintr-un tablou folosind metoda shift.
7. metoda push –> Puteți adăuga o valoare ca ultimul element al matricei.

Tabelul de referință de mai jos grupează metodele cele mai frecvent utilizate, astfel încât să puteți vedea dintr-o privire care dintre ele modifică matricea originală și care dintre ele returnează o valoare nouă.

Adăugarea și eliminarea elementelor

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

Căutare, copiere și alăturare

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

Metode de iterație: forEach, map, filter și reduce

Modern JavaScriptul favorizează metodele bazate pe callback în detrimentul buclelor de indexare manuale, deoarece intenția operației este menționată direct în numele metodei.

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

JavaExemplu de matrice de script cu sursă Code

Scriptul de mai jos construiește o matrice pentru studenți, adaugă o metodă de afișare personalizată prin proprietatea prototype, apoi demonstrează secvențial funcțiile length, sort, reverse, pop și push. Încercați singuri acest lucru:

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

Ieșire preconizată:

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

Observați că sortarea plasează „Aaron” înainte de „Ann” deoarece literele mari și mici sunt comparate prin codurile lor de caractere. Observați, de asemenea, că pop a eliminat „Aaron” din matricea inversată, ceea ce confirmă că atât sortarea, cât și inversarea au modificat matricea originală.

Cum se face o buclă printr-un JavaMatrice de scripturi

Patru toaleteping Sunt disponibile stiluri, fiecare potrivit pentru o situație diferită. Bucla for clasică oferă control deplin asupra indexului, for…of citește valorile direct, forEach exprimă intenția în mod clar, iar for…in ar trebui rezervat proprietăților obiectului.

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

O tratare mai detaliată a sintaxei buclelor, inclusiv while și do…while, apare în articolul despre cum se utilizează buclele în JavaScenariu.

Matrici multidimensionale în JavaScenariu

JavaScriptul nu are un tip de matrice dedicat. O grilă este pur și simplu o matrice ale cărei elemente sunt ele însele matrici, iar două expresii index sunt folosite pentru a ajunge la o singură celulă.

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]

ieșire:

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

Tablourile apar în aproape fiecare script practic, de la validarea formularului până la randarea datelor. Continuați cu practic JavaExemple de cod de script, revizuire JavaȘiruri de script pentru gestionarea textului și citiți despre intern si extern JavaScenariu pentru a decide unde aparțin aceste scripturi într-o pagină. Dezvoltatorii care doresc verificarea statică a tipului asupra conținutului matricei pot trece la TypeScript tutorial.

Întrebări frecvente