3 ting du ikke ved om JavaScript-arrays

Arrays er en udbredt funktion af programmeringssprog; de er særlige variabler der kan bruges til at gemme flere værdier på samme tid. Men når det kommer til JavaScript, så nemt som det er at lære, er der altid mere at udforske.

I dette indlæg vil vi se på tre mindre kendte, men vigtige funktioner i JavaScript-arrayer, du måske ikke har kendt før.

1. Tilføj tilpassede egenskaber til arrayer

Hvis du skulle skure internettet på udkig efter en grundig definition af JavaScript-arrays, vil du opdage, at næsten alle kilder uden fejl vil liste array som hvad det virkelig er, et objekt.

Faktisk vil næsten alt vi beskæftiger os med i JavaScript vise sig at være et objekt. Der findes to typer datatyper i JavaScript, primitiver og objekter, men Primitiver er altid indpakket inde i objekter.

Array, Function, Date etc. er foruddefinerede JavaScript-objekter der har indbyggede metoder, egenskaber og deres egen standardiserede syntax.

JavaScript-arrayer kan have tre forskellige typer af egenskaber:

Indices of a array er også egenskaber
Indbyggede egenskaber
Brugerdefinerede egenskaber du kan tilføje selv

De to første er mere velkendte, du kan bruge dem hver dag, men lad os se dem hurtigt, før du hopper ind i, hvordan du kan tilføje din egen egenskab til en matrix.

Indekser som egenskaber

JavaScript-arrayer bruger syntetisk firkantbøjle, såsom var ary = ["orange", "apple", "lychee"];.

Indikatorer af array elementer er grundlæggende ejendomme hvor er ejendomsnavne er altid ikke-negative heltal.

Det indeks-element par af et array svarer til nøgleværdipar af et objekt.

Indekser er et unikt træk ved Array-objektet, og i modsætning til dets andre indbyggede egenskaber kan de være sæt med parentes syntax alene, såsom ary [3] = "fersken";.

Indbyggede Egenskaber

Arrays har også indbyggede egenskaber, såsom array.length. Det længde Egenskaben bærer et helt tal, som angiver længden af en matrix.

Generelt kan indbyggede egenskaber ofte findes i foruddefinerede JavaScript-objekter som arrayer. Sammen med de indbyggede metoder hjælper de Tilpas generiske objekter, så objekterne passer til forskellige behov.

Indbyggede egenskaber kan fås med enten object.key eller den objekt [ "nøgle"] syntaks. Så du kan også skrive ær [ "længde"] for at få adgang til længden af en matrix.

Opret brugerdefinerede egenskaber til array-objektet

Lad os nu tale om tilføjer dine egne egenskaber til arrays. Arrays er foruddefinerede objekter, der gemmer forskellige typer værdier i forskellige indekser.

Der er normalt ikke meget behov for at tilføje brugerdefinerede egenskaber til en matrix; dette er en af grundene til, at begyndere normalt ikke læres om denne funktion. Faktisk, hvis du vil behandle et array som et normalt objekt ved at tilføje nøgleværdipar til det, kan du lige så godt Brug et normalt objekt til dit formål. Men det betyder ikke, at der ikke er særlige tilfælde hvor du kan gøre brug af det faktum, at et array er et objekt ved at tilføje en eller flere tilpassede egenskaber til den.

Du kan f.eks. Tilføje en brugerdefineret egenskab til en matrix der identificerer "slags" eller "klassen" af dens elementer, som du kan se det i eksemplet nedenfor.

 var ary = ["orange", "apple", "lychee"]; ary.itemClass = "fruits"; console.log (ary + "er" + ary.itemClass); // "appelsin, æble, litchi er frugter"

Bemærk, at den brugerdefinerede egenskab, du tilføjer til en matrix, er enumerable, hvilket betyder at det bliver hentet af sløjfer som f.eks for ... i udmelding.

2. Loop gennem Array Elements

Du siger sikkert "Jeg ved det allerede", hvilket sandsynligvis er sandt, du ved allerede, hvordan man går gennem matrixelementer. Men det er også sandt at sige "loop through array elements" er en smule abstrakt, da det vi faktisk går igennem er indekser af arrayet.

Da arrayindekserne kun består af ikke-negative heltal, vi gentager en heltalsværdi, der typisk starter fra nul og slutter i hele længden af arrayet, og bruger derefter den itererede værdi for at få adgang til arrayelementet ved et givet indeks.

Men siden ECMAScript6 er der en måde at direkte loop gennem array værdier uden at generer med indekser, og det kan gøres ved at bruge for ... af løkke.

I et array, den for ... af loop vil sløjfe gennem array elementer i rækkefølge af indekser, med andre ord vil det tage sig af at iterere over indekserne og få en eksisterende array værdi på et givet indeks. Denne sløjfe er ideel, hvis du bare vil gennemgå alle arrayelementerne og arbejde sammen med dem.

 var ary = ["orange", "apple", "lychee"]; for (lad elementet af ary) console.log (item);  // "orange", "apple", "lychee"

Til sammenligning, med den regelmæssige til loop, får vi indekserne i stedet for værdierne som output.

 var ary = ["orange", "apple", "lychee"]; for (var item = 0; item < ary.length; item++) console.log(item);  // 0, 1, 2

3. Antallet af elementer er ikke dets længde

Typisk, når vi taler om længden af et array, Vi mener, at det er enten det antal værdier, et array rummer, eller den længde, vi har givet til arrayet manuelt. Men i virkeligheden afhænger længden af et array af det største eksisterende indeks indersiden af det.

Længde er a meget fleksibel ejendom. Uanset om du allerede har fastsat længden af en array på forhånd eller ej, hvis du fortsætter med at tilføje værdier til arrayet, er dens længde fortsætter med at stige tilsvarende.

 var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6

I eksemplet ovenfor kan du se, at jeg kun gav arrayen en værdi ved indeks 5, og længden bliver 6. Nu, hvis du tror at ved at tilføje en værdi i indeks 5, oprettede arrayet indekserne 0 til 4 automatisk , derefter din antagelse er forkert. Der er virkelig ingen eksisterende indekser fra 0 til 4 i det array. Du kan tjekke dette ved hjælp af i operatør.

 var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 console.log (0 i ary); // falsk

Arrayet ær er det, vi kalder en "sparsom" array, et array hvor indekserne oprettes ikke kontinuerligt, og har huller. Modsat af et "sparsomt" array er "tæt" array hvor indeks eksisterer kontinuerligt i arrayet, og antallet af elementer er det samme som længde.

Det længde ejendom er også i stand til afkorte en matrix, Sørg for, at det højeste indeks, der findes i arrayet, altid er mindre end sig selv, som længde er altid numerisk større end det højeste indeks som standard.

I eksemplet nedenfor kan du se, hvordan vi mister elementet i indeks 5 ved at reducere længde af ær matrix.

 var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 ary.length = 2; console.log (ary.length); // 2 console.log (ary [5]); // undefined

Yderligere læsning

10 JavaScript-vilkår, du bør vide nu
4 ikke-så almindelige men nyttige Javascript-sætninger, du bør vide
Kodeoptimering med JS Hint - et værktøj til linting Javascript