JavaSzkripttömb módszerek: Hozzon létre példával

Mi az a tömb a JavaForgatókönyv?

A tömb olyan objektum, amely képes tárolni a tárgyak gyűjteményeA tömbök akkor válnak igazán hasznossá, ha nagy mennyiségű, azonos típusú adatot kell tárolni. Tegyük fel, hogy 500 alkalmazott adatait szeretné tárolni. Ha változókat használ, akkor 500 változót kell létrehoznia, míg ugyanezt egyetlen tömbbel is megteheti. A tömb elemeit a tömbben található elemekre hivatkozva érheti el. index szám, és a tömb első elemének indexe nulla.

A szigorúan típusos nyelvekben található tömbökkel ellentétben egy JavaA szkripttömb dinamikus. A hossza automatikusan növekszik, amikor új elemet rendelünk hozzá, és egyetlen tömb egyszerre tartalmazhat karakterláncokat, számokat, logikai értékeket, objektumokat és akár más tömböket is. Ez a rugalmasság teszi a tömböket a listaadatok alapértelmezett tárolójává mind a böngészőszkriptekben, mind a szerveroldali kódban.

Hogyan hozzunk létre egy tömböt a JavaForgatókönyv

Ebben létrehozhat egy tömböt JavaForgatókönyv az alábbiak szerint.

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

Itt inicializálja a tömböt, amikor és amikor a „John”, „Ann” és „Kevin” értékekkel jön létre. A „John”, „Ann” és „Kevin” indexe 0, 1 és 2. Ha további elemeket szeretne hozzáadni a tanulói tömbhöz, ezt a következőképpen teheti meg:

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

Tömböt a tömb konstruktorával is létrehozhatsz, például így:

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

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

Tömbelemek elérése és módosítása

Minden elem számozott pozícióban található. A szögletes zárójeles jelölés beolvas egy értéket, új értéket rendel hozzá, vagy új bejegyzést fűz hozzá, amikor az index megegyezik az aktuális hosszúsággal.

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

JavaScript Array módszerek

Az Array objektum számos tulajdonsággal és módszerrel rendelkezik, amelyek segítenek a fejlesztőknek a tömbök egyszerű és hatékony kezelésében. A tulajdonság értékét a tömbnév.tulajdonság megadásával kaphatja meg, a metódus kimenetét pedig a tömbnév.method() megadásával.

1. hossz tulajdonság –> Ha egy tömb elemeinek számát szeretné tudni, használhatja a length tulajdonságot.
2. prototípus tulajdonság –> Ha új tulajdonságokat és metódusokat szeretne hozzáadni, használhatja a prototípus tulajdonságot.
3. fordított módszer –> Egy tömb elemeinek sorrendjét fordított módszerrel megfordíthatja.
4. rendezési módszer –> A tömb elemeit a rendezés metódussal rendezheti.
5. pop módszer –> Egy tömb utolsó elemét pop módszerrel távolíthatja el.
6. műszakos módszer –> A tömb első elemét a shift metódussal távolíthatjuk el.
7. push módszer –> A tömb utolsó elemeként hozzáadhat egy értéket.

Az alábbi referencia táblázat a leggyakrabban használt metódusokat csoportosítja, így egy pillantással áttekintheti, hogy melyek módosítják az eredeti tömböt, és melyek adnak vissza új értéket.

Elemek hozzáadása és eltávolítása

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

Keresés, másolás és csatlakozás

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

Iterációs metódusok: forEach, map, filter és reduce

Modern JavaA szkript a visszahívásvezérelt metódusokat részesíti előnyben a manuális indexciklusokkal szemben, mivel a művelet szándéka közvetlenül a metódus nevében szerepel.

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

JavaSzkripttömb példa forráskóddal Code

Az alábbi szkript egy diáktömböt épít, hozzáad egy egyéni megjelenítési metódust a prototype tulajdonságon keresztül, majd bemutatja a length, sort, reverse, pop és push műveleteket szekvenciálisan. Próbáld ki te is:

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

Várható teljesítmény:

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

Figyeljük meg, hogy a rendezés során az „Aaron” szót az „Ann” elé helyezzük, mivel a nagy- és kisbetűket karakterkódjukkal hasonlítjuk össze. Azt is vegyük észre, hogy a pop függvény eltávolította az „Aaron” szót a fordított tömbből, ami megerősíti, hogy mind a rendezés, mind a fordított tömb a helyén módosította az eredeti tömböt.

Hogyan lehet végighurkolni egy JavaSzkripttömb

Négy WCping Több stílus is elérhető, és mindegyik más helyzethez illik. A klasszikus for ciklus teljes kontrollt biztosít az index felett, a for…of közvetlenül beolvassa az értékeket, a forEach egyértelműen kifejezi a szándékot, a for…in pedig az objektumtulajdonságok számára van fenntartva.

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

A ciklusszintaxis mélyebb tárgyalása, beleértve a while és a do…while ciklusokat is, a cikkben található. hogyan kell ciklusokat használni JavaForgatókönyv.

Többdimenziós tömbök JavaForgatókönyv

JavaA szkriptnek nincs dedikált mátrixtípusa. A rács egyszerűen egy tömb, amelynek elemei maguk is tömbök, és két indexkifejezést használunk egyetlen cellának az eléréséhez.

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]

output:

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

A tömbök szinte minden gyakorlati szkriptben megjelennek, az űrlapérvényesítéstől az adatmegjelenítésig. Folytassa a következővel: gyakorlati JavaSzkriptkód példák, felülvizsgálat JavaSzkriptkarakterláncok a szövegkezeléshez, és olvasson tovább belső és külső JavaForgatókönyv hogy eldöntsék, hová tartoznak ezek a szkriptek egy oldalon. Azok a fejlesztők, akik statikus típusellenőrzést szeretnének végezni a tömbtartalmak felett, továbbléphetnek a következőre: TypeScript oktatói.

GYIK