3 ting du ikke vet om JavaScript-arrays

Arrays er en mye brukt funksjon i programmeringsspråk; De er spesielle variabler som kan brukes til å lagre flere verdier på samme tid. Men når det gjelder JavaScript, så enkelt som det er å lære, er det alltid mer å utforske.

I dette innlegget ser vi på tre mindre kjente, men viktige funksjoner i JavaScript-arrays du kanskje ikke har kjent før.

1. Legg til egendefinerte egenskaper i Arrays

Hvis du skulle skure Internett på jakt etter en grundig definisjon av JavaScript-arrays, vil du oppdage at nesten hver kilde uten å lykkes, vil liste array som hva det egentlig er, et objekt .

Faktisk vil nesten alt vi håndterer i JavaScript vise seg å være et objekt . Det finnes to typer datatyper i JavaScript, primitiver og objekter, men primitive er alltid pakket inn i objekter .

Array, Function, Date etc. er forhåndsdefinerte JavaScript-objekter som har innebygde metoder, egenskaper og egen standardisert syntaks.

JavaScript-arrayer kan ha tre forskjellige typer egenskaper :

1. Indekser i en matrise er også egenskaper
2. Innebygde egenskaper
3. Egendefinerte egenskaper du kan legge til ved deg selv

De to første er mer kjente, du kan bruke dem hver dag, men la oss se dem raskt før du hopper inn i hvordan du kan legge til din egen tilpassede eiendom til en matrise.

Indekser som Egenskaper

JavaScript-arrays bruker firkantbrakettens syntaks, for eksempel var ary = ["orange", "apple", "lychee"]; .

Indikatorer av arrayelementer er i utgangspunktet egenskaper der egenskapene navnene er alltid ikke-negative heltall .

Indekselementparet i en matrise ligner nøkkelverdierparet til en gjenstand.

Indikatorer er en unik funksjon av Array-objektet, og i motsetning til de andre innebygde egenskapene, kan de settes med brakets syntaks alene, som ary[3] = "peach"; .

Innebygde egenskaper

Arrayer har også innebygde egenskaper, for eksempel array.length . Egenskapen length har en heltallverdi som angir lengden på en matrise .

Generelt kan innebygde egenskaper ofte bli funnet i forhåndsdefinerte JavaScript-objekter som arrayer. Sammen med de innebygde metodene bidrar de til å tilpasse generiske objekter slik at objektene passer til ulike behov .

Innebygde egenskaper kan nås med enten object.key eller object["key"] syntaks. Så du kan også skrive ary["length"] å få tilgang til lengden på en matrise.

Opprett egendefinerte egenskaper for Array Object

Nå, la oss snakke om å legge til dine egne egenskaper til arrays . Arrays er forhåndsdefinerte gjenstander som lagrer ulike typer verdier på forskjellige indekser.

Det er vanligvis ikke mye behov for å legge til egendefinerte egenskaper i en matrise; Dette er en av grunnene til at nybegynnere vanligvis ikke blir lært om denne funksjonen. Faktisk, hvis du vil behandle en matrise som et normalt objekt ved å legge til nøkkelverdepar til det, kan du også bruke et normalt objekt for ditt formål . Men dette betyr ikke at det ikke er spesielle tilfeller der du kan bruke det faktum at et array er et objekt ved å legge til en eller flere egendefinerte egenskaper.

For eksempel kan du legge til en egendefinert egenskap i en matrise som identifiserer "type" eller "klassen" av elementene, slik at du kan se den i eksemplet nedenfor.

 var ary = ["oransje", "eple", "lychee"]; ary.itemClass = "frukt"; console.log (ary + "er" + ary.itemClass); // "appelsin, eple, lychee er frukt" 

Legg merke til at den egendefinerte egenskapen du legger til i en matrise, er tallrik, noe som betyr at den vil bli hentet opp av looper som for…in setningen.

2. Loop through Array Elements

Du sier sannsynligvis "Jeg vet det allerede", som sannsynligvis er sant, du vet allerede hvordan du går gjennom arrayelementer. Men det er også sant at å si "loop through array elements" er litt abstrakt, da det vi faktisk går gjennom er indeksene i arrayet .

Siden arrayindeksene bare består av ikke-negative heltall, repeterer vi en heltallverdi som vanligvis starter fra null og slutter i full lengde av arrayet, og bruker deretter den itererte verdien for å få tilgang til arrayelementet ved en gitt indeks.

Men siden ECMAScript6 er det en måte å direkte løpe gjennom arrayverdier uten å plage med indekser, og det kan gjøres ved å bruke for…of loop.

I en matrise vil sløyfen ... gå gjennom arrayelementene i rekkefølge av indekser, med andre ord vil det ta seg av iterating over indeksene og få en eksisterende arrayverdi på en gitt indeks. Denne sløyfen er ideell hvis du bare vil gå gjennom alle arrayelementene, og jobbe med dem.

 var ary = ["oransje", "eple", "lychee"]; for (la element av ary) {console.log (item); } // "oransje", "eple", "lychee" 

Til sammenligning, med vanlig for loop, får vi indeksene i stedet for verdiene som utgang.

 var ary = ["oransje", "eple", "lychee"]; for (var element = 0; element <ary.length; item ++) {console.log (item); } // 0, 1, 2 

3. Antallet av elementer er ikke dets lengde

Når vi snakker om lengden på en matrise, tror vi vanligvis at det er enten verdien som en matrise holder, eller den lengden vi har gitt til matrisen manuelt. Men i virkeligheten avhenger lengden på en matrise på den største eksisterende indeksen i den.

Lengde er en veldig fleksibel egenskap . Enten du allerede har fastsatt lengden på en matrise på forhånd eller ikke, fortsetter lengden å øke tilsvarende, hvis du fortsetter å legge til verdier i matrisen.

 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 bare ga oppstillingen en verdi på indeksen 5, og lengden blir 6. Nå, hvis du tror det ved å legge til en verdi i indeksen 5, opprettet oppstillingen indeksene 0 til 4 automatisk, så er antakelsen din feil . Det er egentlig ingen eksisterende indekser fra 0 til 4 i den gruppen. Du kan sjekke dette ved hjelp av operatøren i.

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

Arrangementet ary er det vi kaller et "sparsomt" array, en matrise hvor indeksene ikke opprettes kontinuerlig, og har hull . Det motsatte av et "sparsomt" array er "tett" array der indekser eksisterer kontinuerlig i arrayet, og antall elementer er de samme som length .

Egenskapen length er også i stand til å avkorte en matrise, og sørge for at den høyeste indeksen i arrayet alltid er mindre enn seg selv, da length alltid er numerisk større enn den høyeste indeksen som standard.

I eksemplet nedenfor kan du se hvordan vi mister elementet på indeks 5 ved å redusere length på ary array.

 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 

Videre lesning

• 10 JavaScript-vilkår du burde vite nå
• 4 ikke-så-vanlige, men nyttige Javascript-setninger du burde vite
• Kodeoptimalisering med JS Hint - et verktøy for linting Javascript

6 tips for å overvinne blokken og generere fantastiske bloggideer

Det er dag 4 av et 5 dagers prosjekt som du burde ha ferdig med nå. Du må trekke en all-nighter, men du kan ikke tenke på noe interessant å si . Ikke bekymre deg, du kommer til å bli bra til tross for at den indre alarmen forteller deg noe annet.Det kan ikke være forfatterens blokk. Hva som kan skje er mye som erektil dysfunksjon. Prob

(Tekniske og design tips)

Enkelt animere tekst med Textillate.js

I vår forrige innlegg, har vi introdusert deg til Animate.css, et fantastisk CSS3-bibliotek, som gjør CSS3-animasjonsskaping enklere. I dette innlegget kommer vi til å introdusere deg til et jQuery-plugin, bygget med Animate.css, som kan animere tekst, kalt Textillate.js .Selv om du kan animere tekst med Animate.cs

(Tekniske og design tips)