JavaScript Array-metoder: Opret med eksempel

Hvad er et array i JavaManuskript?

Et array er et objekt, der kan lagre en samling af genstandeArrays bliver virkelig nyttige, når du har brug for at gemme store mængder data af samme type. Antag, at du vil gemme oplysninger om 500 medarbejdere. Hvis du bruger variabler, skal du oprette 500 variabler, hvorimod du kan gøre det samme med et enkelt array. Du kan få adgang til elementerne i et array ved at referere til dets indeksnummer, og indekset for det første element i et array er nul.

I modsætning til arrays i strengt typebestemte sprog, en JavaScript-matrixer er dynamiske. Deres længde vokser automatisk, når et nyt element tildeles, og et enkelt array kan indeholde strenge, tal, booleske værdier, objekter og endda andre arrays på samme tid. Denne fleksibilitet gør arrays til standardcontaineren for listedata i både browserscripts og serversidekode.

Sådan opretter du et array i JavaScript

Du kan oprette et array i JavaScript som angivet nedenfor.

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

Her initialiserer du dit array, når og når det er oprettet med værdierne "John", "Ann" og "Kevin". Indekset for "John", "Ann" og "Kevin" er henholdsvis 0, 1 og 2. Hvis du vil tilføje flere elementer til elevernes array, kan du gøre det sådan:

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

Du kan også oprette et array ved hjælp af Array-konstruktøren på denne måde:

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

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

Sådan får du adgang til og ændrer arrayelementer

Hvert element er placeret på en nummereret position. Firkantede parenteser læser en værdi, tildeler en ny værdi eller tilføjer en ny post, når indekset er lig med den aktuelle længde.

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 Metoder

Array-objektet har mange egenskaber og metoder, som hjælper udviklere med at håndtere arrays nemt og effektivt. Du kan få værdien af ​​en egenskab ved at angive arrayname.property og outputtet af en metode ved at angive arrayname.method().

1. længde ejendom –> Hvis du vil vide antallet af elementer i et array, kan du bruge egenskaben length.
2. prototype ejendom –> Hvis du vil tilføje nye egenskaber og metoder, kan du bruge prototypeegenskaben.
3. omvendt metode –> Du kan vende rækkefølgen af ​​elementer i et array ved at bruge en omvendt metode.
4. sorteringsmetode –> Du kan sortere elementerne i et array ved hjælp af sorteringsmetoden.
5. pop metode –> Du kan fjerne det sidste element i et array ved hjælp af en pop-metode.
6. skiftemetode –> Du kan fjerne det første element i et array ved hjælp af shift-metoden.
7. push metode –> Du kan tilføje en værdi som det sidste element i arrayet.

Referencetabellen nedenfor grupperer de mest anvendte metoder, så du hurtigt kan se, hvilke der ændrer det oprindelige array, og hvilke der returnerer en ny værdi.

Tilføjelse og fjernelse af elementer

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

Søgning, kopiering og tilslutning

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

Iterationsmetoder: forEach, map, filter og reduce

Moderne JavaScriptet foretrækker callback-drevne metoder frem for manuelle indeksløkker, fordi intentionen med operationen er angivet direkte i metodenavnet.

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

JavaEksempel på scriptarray med kildekode Code

Scriptet nedenfor opbygger et students-array, tilføjer en brugerdefineret displaymetode via prototype-egenskaben og demonstrerer derefter length, sort, reverse, pop og push i rækkefølge. Prøv dette selv:

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

Forventet output:

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

Bemærk, at sortering placerer "Aaron" før "Ann", fordi store og små bogstaver sammenlignes efter deres tegnkoder. Bemærk også, at pop fjernede "Aaron" fra det omvendte array, hvilket bekræfter, at både sortering og omvendt ændrede det oprindelige array.

Sådan går du i gang med en loop JavaScriptarray

Fire toiletterping Der findes stilarter, og hver enkelt passer til en forskellig situation. Den klassiske for-løkke giver fuld kontrol over indekset, for…of læser værdier direkte, forEach udtrykker intentionen tydeligt, og for…in bør reserveres til objektegenskaber.

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

En dybere behandling af loop-syntaks, herunder while og do…while, findes i artiklen om hvordan man bruger løkker i JavaScript.

Flerdimensionelle arrays i JavaScript

JavaScriptet har ingen dedikeret matrixtype. Et gitter er simpelthen et array, hvis elementer selv er arrays, og to indeksudtryk bruges til at nå en enkelt celle.

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]

Arrays optræder i næsten alle praktiske scripts, fra formularvalidering til datagengivelse. Fortsæt med praktisk JavaEksempler på scriptkode, anmeldelse JavaScriptstrenge til teksthåndtering, og læs om interne og eksterne JavaScript at bestemme, hvor disse scripts hører hjemme på en side. Udviklere, der ønsker statisk typekontrol over arrayindhold, kan gå videre til TypeScript tutorial.

Ofte Stillede Spørgsmål