JavaScript Array-metoder: Skapa med exempel

Vad är en array i JavaManus?

En array är ett objekt som kan lagra en samling av föremålMatriser blir riktigt användbara när du behöver lagra stora mängder data av samma typ. Anta att du vill lagra information om 500 anställda. Om du använder variabler måste du skapa 500 variabler, medan du kan göra detsamma med en enda matris. Du kan komma åt objekten i en matris genom att referera till dess indextal, och indexet för det första elementet i en array är noll.

Till skillnad från arrayer i strikt typade språk, en JavaSkriptmatriser är dynamiska. Dess längd ökar automatiskt när ett nytt element tilldelas, och en enda matris kan innehålla strängar, tal, booleska värden, objekt och till och med andra matriser samtidigt. Denna flexibilitet gör matriser till standardbehållaren för listdata i både webbläsarskript och serverkod.

Hur man skapar en array i JavaScript

Du kan skapa en array i JavaScript enligt nedan.

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

Här initierar du din array när och när den skapas med värdena "John", "Ann" och "Kevin". Indexet för "John", "Ann" och "Kevin" är 0, 1 respektive 2. Om du vill lägga till fler element till elevarrayen kan du göra det så här:

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

Du kan också skapa en array med hjälp av Array-konstruktorn så här:

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

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

Hur man kommer åt och ändrar arrayelement

Varje element har en numrerad position. Hakparentesnotation läser ett värde, tilldelar ett nytt värde eller lägger till en ny post när indexet är lika med den aktuella längden.

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 många egenskaper och metoder som hjälper utvecklare att hantera arrayer enkelt och effektivt. Du kan få värdet på en egenskap genom att ange arrayname.property och utdata från en metod genom att ange arrayname.method().

1. längd egendom –> Om du vill veta antalet element i en array kan du använda egenskapen length.
2. prototypegenskap –> Om du vill lägga till nya egenskaper och metoder kan du använda prototypegenskapen.
3. omvänd metod –> Du kan vända ordningen på objekt i en array med en omvänd metod.
4. sorteringsmetod –> Du kan sortera objekten i en array med hjälp av sorteringsmetoden.
5. popmetod –> Du kan ta bort det sista objektet i en array med en pop-metod.
6. skiftmetoden –> Du kan ta bort det första elementet i en array med hjälp av shift-metoden.
7. push-metod –> Du kan lägga till ett värde som det sista objektet i arrayen.

Referenstabellen nedan grupperar de mest använda metoderna så att du med en snabb överblick kan se vilka som ändrar den ursprungliga arrayen och vilka som returnerar ett nytt värde.

Lägga till och ta bort element

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öka, kopiera och ansluta

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, mappa, filtrera och reducera

Modern Konst JavaSkript föredrar återanropsdrivna metoder framför manuella indexloopar, eftersom operationens avsikt anges direkt i metodnamnet.

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

JavaExempel på skriptmatris med källkod Code

Skriptet nedan bygger en students-array, lägger till en anpassad displaymetod via prototype-egenskapen och demonstrerar sedan length, sorter, reverse, pop och push i sekvens. Prova detta själv:

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

Förväntad produktion:

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

Observera att sortering placerar "Aaron" före "Ann" eftersom versaler och gemener jämförs med sina teckenkoder. Observera också att pop tog bort "Aaron" från den omvända arrayen, vilket bekräftar att både sortering och omvändning ändrade den ursprungliga arrayen.

Hur man loopar igenom en JavaSkriptmatris

Fyra toaletterping Stilar finns tillgängliga, och var och en passar en annan situation. Den klassiska for-loopen ger full kontroll över indexet, for…of läser värden direkt, forEach uttrycker avsikt tydligt, och for…in bör reserveras för objektegenskaper.

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 djupare behandling av loopsyntax, inklusive while och do…while, finns i artikeln om hur man använder loopar i JavaScript.

Flerdimensionella arrayer i JavaScript

JavaSkriptet har ingen dedikerad matristyp. Ett rutnät är helt enkelt en array vars element själva är arrayer, och två indexuttryck används för att nå en enda cell.

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]

Produktion:

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

Arrayer förekommer i nästan alla praktiska skript, från formulärvalidering till datarendering. Fortsätt med praktisk JavaExempel på skriptkod, recension JavaSkriptsträngar för texthantering, och läs om internt och externt JavaScript att bestämma var dessa skript hör hemma på en sida. Utvecklare som vill ha statisk typkontroll över arrayinnehåll kan gå vidare till TypeScript handledning.

Vanliga frågor