JavaMetode niza skripti: Stvorite s primjerom

Što je niz u JavaSkripta?

Niz je objekt koji može pohraniti a zbirka predmetaNizovi postaju vrlo korisni kada trebate pohraniti velike količine podataka iste vrste. Pretpostavimo da želite pohraniti podatke o 500 zaposlenika. Ako koristite varijable, morat ćete stvoriti 500 varijabli, dok isto možete učiniti s jednim nizom. Stavkama u nizu možete pristupiti pozivanjem na njegov indeksni broj, a indeks prvog elementa niza je nula.

Za razliku od nizova u strogo tipiziranim jezicima, JavaSkriptni niz je dinamičan. Njegova duljina se automatski povećava kada se dodijeli novi element, a jedan niz može istovremeno sadržavati nizove, brojeve, logičke vrijednosti, objekte, pa čak i druge nizove. Ova fleksibilnost čini nizove zadanim spremnikom za podatke popisa u skriptama preglednika i kodu na strani poslužitelja.

Kako stvoriti niz u JavaScript

Možete stvoriti niz u JavaScript kako je navedeno u nastavku.

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

Ovdje inicijalizirate svoj niz kako i kada se stvori s vrijednostima "John", "Ann" i "Kevin". Indeks za "John", "Ann" i "Kevin" je 0, 1 odnosno 2. Ako želite dodati više elemenata u niz učenika, to možete učiniti ovako:

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

Također možete kreirati niz pomoću konstruktora Array ovako:

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

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

Kako pristupiti i mijenjati elemente polja

Svaki element se nalazi na numeriranoj poziciji. Notacija u uglatim zagradama čita vrijednost, dodjeljuje novu vrijednost ili dodaje novi unos kada je indeks jednak trenutnoj duljini.

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

Objekt Array ima mnoga svojstva i metode koje programerima pomažu u lakom i učinkovitom rukovanju nizovima. Možete dobiti vrijednost svojstva navođenjem arrayname.property i izlaz metode navođenjem arrayname.method().

1. svojstvo duljine –> Ako želite znati broj elemenata u nizu, možete koristiti svojstvo length.
2. prototipsko svojstvo –> Ako želite dodati nova svojstva i metode, možete koristiti svojstvo prototipa.
3. obrnuta metoda –> Možete obrnuti redoslijed stavki u nizu koristeći obrnutu metodu.
4. metoda sortiranja –> Stavke u nizu možete sortirati pomoću metode sortiranja.
5. pop metoda –> Posljednju stavku niza možete ukloniti metodom pop.
6. metoda pomaka –> Prvi element niza možete ukloniti pomoću metode shift.
7. push metoda –> Možete dodati vrijednost kao posljednju stavku niza.

Donja referentna tablica grupira najčešće korištene metode tako da na prvi pogled možete vidjeti koje mijenjaju izvorni niz, a koje vraćaju novu vrijednost.

Dodavanje i uklanjanje elemenata

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

Pretraživanje, kopiranje i spajanje

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 iteracije: forEach, mapiranje, filtriranje i smanjenje

moderna JavaSkripta favorizira metode pokretane povratnim pozivima u odnosu na ručne petlje indeksiranja, jer je namjera operacije navedena izravno u nazivu metode.

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

JavaPrimjer polja skripte s izvornim kodom Code

Skripta u nastavku gradi niz studenata, dodaje prilagođenu metodu prikaza putem svojstva prototip, a zatim demonstrira duljinu, sortiranje, preokretanje, izbacivanje i dodavanje u niz. Pokušajte sami:

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

Očekivani rezultat:

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

Primijetite da sort stavlja „Aaron“ ispred „Ann“ jer se velika i mala slova uspoređuju prema njihovim kodovima znakova. Također primijetite da je pop uklonio „Aaron“ iz obrnutog niza, što potvrđuje da su i sort i reverse promijenili izvorni niz na mjestu.

Kako proći kroz JavaNiz skripti

Četiri WC-aping Dostupni su stilovi, a svaki od njih odgovara drugačijoj situaciji. Klasična for petlja daje potpunu kontrolu nad indeksom, for…of izravno čita vrijednosti, forEach jasno izražava namjeru, a for…in bi trebao biti rezerviran za svojstva objekta.

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

Dublji prikaz sintakse petlje, uključujući while i do…while, nalazi se u članku o kako koristiti petlje u JavaScript.

Višedimenzionalni nizovi u JavaScript

JavaSkripta nema namjenski tip matrice. Mreža je jednostavno polje čiji su elementi sami po sebi polja, a za dosezanje jedne ćelije koriste se dva indeksna izraza.

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]

Izlaz:

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

Nizovi se pojavljuju u gotovo svakom praktičnom skriptu, od validacije obrazaca do prikazivanja podataka. Nastavite s praktičan JavaPrimjeri skriptnog koda, recenzija JavaNizovi skripte za rukovanje tekstom i pročitajte o unutarnje i vanjsko JavaScript odlučiti gdje te skripte pripadaju na stranici. Programeri koji žele statičku provjeru tipova sadržaja niza mogu prijeći na TypeScript udžbenik.

Pitanja i odgovori