Alle array-kommandoer i javascript. JavaScript-array og dets oprettelse

I denne artikel vil vi se på et JavaScript-array og dets komponenter. JavaScript er ideelt designet til programmering. Faktisk implementerer den ECMAScript-sproget (ECMA-262-standarden).

Hvor bruges JavaScript? Det bruges som et indlejret sprog til at definere software sti til emnet for ansøgningen. Det kan findes i browsere, hvor det bruges som et scriptsprog, der gør websider interaktive.

De vigtigste arkitektoniske egenskaber ved dette produkt er dynamisk og svag indtastning, automatisk hukommelsesstyring, perfekt programmering og førsteklasses objektfunktioner.

Generelt var JavaScript påvirket forskellige årsager, fordi de under udviklingen ønskede at skabe et sprog, der ligner Java, men nemt for programmører at bruge. I øvrigt tales JavaScript-sproget ikke af nogen virksomhed eller organisation, hvilket gør det i modsætning til en række programstile, brugt af webudviklere.

Det skal bemærkes, at JavaScript er et registreret varemærke tilhørende Oracle Corporation.

Hvad er et array?

En matrix er en, der gemmer nummererede værdier. Hver sådan værdi kaldes en array-komponent, og cifferet, som komponenten er knyttet til, kaldes et indeks. JavaScript-arrayet er ikke indtastet. Det betyder, at delene af et array kan være af enhver type, og forskellige dele, der hører til det samme array, har helt forskellige typer.

Derudover er JavaScript-arrayet dynamisk, hvilket betyder, at der ikke er behov for at angive en fast størrelse. Når alt kommer til alt, kan du tilføje nye detaljer til enhver tid.

Array produktion

Ved brug af JavaScript sprog, at oprette et array er slet ikke svært. Der er to metoder til dette. Den første involverer oprettelse af et array ved hjælp af en bogstavelig - firkantede parenteser, indeni hvilken er en liste over dele, adskilt af kommaer.

• var tom = ; //tom array;
• var tal = ; //array med fem digitale komponenter;
• var diff = ; //array med tre elementer af forskellige typer.

Typisk kræves det ikke, at værdierne her er enkle (strenge og tal). Det kan også være et hvilket som helst andet udtryk, for eksempel subjekts bogstaver, andre funktioner og arrays.

Den anden måde at oprette et array på er at kalde Array() designeren. Du kan invitere ham på tre måder:

• Kalder designeren uden argumenter: var b - new Array(). Dette giver mulighed for at skabe en tom matrix, svarende til en tom bogstavelig.
• Konstruktøren specificerer eksplicit værdien af ​​de n komponenter i arrayet: var b = new Array (1, 3, 5, 8, "streng", sand). I I dette tilfælde designeren præsenteres for en liste over argumenter, som omdannes til komponenter i det nye array. Argumenterne skrives til arrayet på det sted, hvor de er angivet.
• Definition af området for efterfølgende tildeling af værdier. Dette gøres ved at specificere, når du identificerer et array, et enkelt tal omgivet af parentes: var b = new Array(5). Denne metode identifikation involverer at allokere det nødvendige antal komponenter til arrayet (som hver er opført som udefineret) med mulighed for efterfølgende at tildele værdier under præsentationsprocessen. Denne formular bruges normalt til at forhåndstildele et Javascript-array, hvis længde er kendt på forhånd.

Skrivning, læsning og tilføjelse af matrixdetaljer

Du kan få adgang til komponenterne i et array ved hjælp af operatoren. Forresten er alle komponenter i JavaScript, startende fra nul, nummererede. For at opnå det nødvendige element er dets nummer angivet i Som regel kan detaljerne ændres. Og for at tilføje JavaScript til arrayet, skal du blot tildele en ny værdi.

Det skal bemærkes, at JavaScript-arrays kan gemme et vilkårligt antal elementer af enhver art.

Array længde

Så vi ved, at længden af ​​et array generelt er et interessant fænomen. Lad os se nærmere på det. Alle arrays, uanset om de er konstrueret ved hjælp af Array()-designeren eller afsløret gennem en array-literal, har en specifik længdeegenskab, der angiver det samlede antal lagrede elementer. Da et array kan indeholde udefinerede dele (betegnet med udefineret), er et mere præcist udtryk: længdekvaliteten er altid én større end den mest stort værelse(indeks) af en array-komponent. Længdekvaliteten justeres automatisk og forbliver nøjagtig, når nye dele dukker op i arrayet.

For at få den sidste komponent af arrayet til at vises, kan du bruge egenskaben length.

Den sidste del har et indeks, der er en mindre end matrixstørrelsen. Når alt kommer til alt, starter nedtællingen altid fra bunden. Åh, dette JavaScript! Længden af ​​arrayet afhænger af det nøjagtige antal elementer. Så hvis du ikke ved, hvor mange der skal være, men du skal have adgang til det sidste element i arrayet, skal du bruge notationen: v.length - 1.

Iteration over matrixdetaljer

Meget ofte bruges længdeegenskaben til at iterere over detaljerne i et array i en loop:

• var fruits = ["jordbær", "fersken", "æble", "banan"];
• for(var I = 0; i< fruits.lenght; i++);
• document.write(frugt[i] + "...").

I dette eksempel ser komponenterne ud til at være placeret kontinuerligt og starter med, at den første del ejer et indeks på nul. Hvis dette ikke er tilfældet, før du kalder hvert element i arrayet, skal du kontrollere, om det er defineret.

En loop bruges også nogle gange til at initialisere komponenter.

Dyrk og afkort et array

Jeg spekulerer på, hvordan man bruger tungen JavaScript-streng tilføje til array? Når vi arbejder med arrays, forbedres kvalitetslængden automatisk, hvorfor vi selv skal sørge for det. Det er nødvendigt at huske en detalje - længdeegenskaben er ikke kun læsbar, men også skrivbar. Hvis længdekvaliteten tildeles en værdi, der er mindre i størrelse end den nuværende, reduceres arrayet til den angivne størrelse. Alle komponenter, der ikke er i det nye indeksområde, kasseres, og deres værdier går tabt, selvom længden senere returneres - værdierne gendannes ikke.

Det er ret nemt at rydde arrayet sådan her: foo.length = 0.

Hvis længdekvaliteten gøres større end dens nuværende værdi, vil nye uidentificerede dele vises i slutningen af ​​arrayet, hvilket vil øge den til den ønskede størrelse.

Fjernelse af mønsterdele

Slet-operatoren angiver en udefineret værdi i en array-komponent, men den fortsætter med at eksistere. Hvis du skal fjerne et element i et JavaScript-array, så de resterende dele flyttes ind i det frie rum, skal du bruge en af ​​de medfølgende array-metoder. Array.shift()-metoden eliminerer den første komponent, pop() eliminerer den sidste komponent, og splice()-metoden eliminerer en eller en række komponenter hvor som helst i arrayet.

Multidimensionelle arrays

Det ser ud til, at vi har fundet ud af det lidt, todimensionelle arrays er, hvad vi skal overveje næste gang. Kan du huske, at JavaScript-arrays kan indeholde andre elementer som komponenter? Denne funktion bruges til produktion multidimensionelle arrays. For at besøge komponenter i en række arrays skal du blot bruge firkantede parenteser to gange.

Associative Arrays

Lad os nu studere, hvordan et varemærke JavaScript associativ bruger arrays. For at gøre dette skal vi se nærmere på teorien: associative arrays kaldes nogle gange hashtabeller. Takket være dem bruges strenge i stedet for indekser. Brug af sådanne konstruktioner svarer til at bruge egenskabsnavnet på et simpelt objekt, men i denne mulighed når du udfører arbejde i array-format. Da JavaScript mangler måder at arbejde med associative arrays på, bruges de meget sjældnere end almindelige. Det skal bemærkes, at de stadig kan være nyttige til lagring af data og gøre det nemmere at huske detaljer, der skal tilgås.

Array-output

Hvad skal vi studere nu? JavaScript system? Visning af arrayet i en dialogboks (på monitorskærmen), samt visning af værdierne for array-komponenterne.

Hvis du har brug for at vise værdierne for alle komponenter i et program, så er det praktisk at bruge for-sætningen. Interessant nok bruges tællervariablen for regler som et indeks for en array-komponent.

Rengøring

For at filtrere JavaScript-array, skal du nulstille dens længde:

• var myArray = ;
• myArray.length = 0.

• clear: function() (;
• denne.længde = 0;
• returnere dette;

Tilføjelse og fjernelse af komponenter

Nå, lad os fortsætte med at studere dette interessante JavaScript-sprog. Et array-element kan slettes eller tilføjes på samme måde som almindelige egenskaber for andre objekter. Men der er nogle forskelle: Tilføjelse af numeriske egenskaber kan ændre længdekvaliteten, og ændring af egenskaben længde kan eliminere numeriske kvaliteter. I princippet er algoritmen til indstilling af kvaliteter for arrays som følger:

• Når du tilføjer en ukendt digital egenskab i, hvis længden er lig med eller mindre end i, er længden defineret til at være i+1.
• Når kvaliteten ændrer længde, følgende handlinger: hvis den tildelte værdi er mindre end nul, udsendes en RangeError. Alle numeriske kvaliteter og indekser, der er lig med den nye længde, og som er større, elimineres.

Generelt er det ikke svært at slette et element i et JavaScript-array. Når alt kommer til alt, selv når du indstiller længden, skal du fjerne "ekstra" komponenter fra den. Dette fører til muligheden for at rydde arrayet. Hvis den tildelte variabel for et tomt nyt array af en eller anden grund ikke er tilfredsstillende, og det er nødvendigt at nulstille den nuværende, er det nok at tildele værdien nul til dens længdekvalitet.

unshift, shift, pop og push metoder

Selvom array-komponenter ændres manuelt, anbefaler mange mennesker at bruge indbyggede metoder til dette. Det er denne nuance, der garanterer den korrekte længdekvalitetsværdi og fraværet af huller i arrayet. Forresten vil den korrekte længdekvalitet svare til antallet af komponenter.

Push-metoden flytter de beståede dele til slutningen af ​​arrayet. Pop-metoden giver den efterfølgende komponent tilbage og fjerner den.

Generelt i Internet Explorer tidligere end den ottende version kan unshift returnere udefineret; i andre browsere en ny længdeværdi. Så det er bedre ikke at stole på den værdi, der returneres fra unshift.

Tilføjelse og eliminering af dele i midten af ​​et array

Hvad skal jeg gøre, hvis jeg skal slette et JavaScript-array? Splejsningsmetoden vides at have signaturen Array.prototype.splice.

Det fjerner deleteCount-komponenter fra arrayet, startende med startindikatoren. Hvis der sendes mere end to argumenter, placeres alle efterfølgende argumenter i arrayet i stedet for de eliminerede. Hvis start er negativ, så vil indekset, hvorfra tilbagetrækningen genoptages, være lig med længde + start. Arrayet returneres fra de fjernede elementer.

Faktisk bruger splejsningsmetode, kan du fjerne komponenter fra midten af ​​arrayet eller tilføje et hvilket som helst tal til et hvilket som helst sted i arrayet.

I den enkleste version, hvis du skal fjerne en komponent med indeks i, skal du anmode om splejsningsmetoden fra arrayet med parametrene i og 1.

I princippet er den anden parameter i splejsningsmetoden valgfri, men opførselen af ​​en funktion med et argument er forskellig i hver browser.

For eksempel, i Firefox, i de seneste versioner af Opera, i Safari og i Chrome, vil alle detaljer op til slutningen af ​​arrayet blive fjernet.

Ingen komponent vil blive elimineret i IE. I de første varianter af Opera er det umuligt at forudsige adfærden - den ene del med indeksstart - 1 vil blive fjernet. Derfor er det altid nødvendigt at denne metode bestå mindst to komponenter.

Nøgler

Når man lærer JavaScript, skal man selvfølgelig også huske på associative arrays, som tidligere nævnt. Dette er en abstrakt type information (en grænseflade til et datalager), som giver dig mulighed for at gemme par i formen "(nøgle, værdi)" og understøtte operationerne med at tilføje et par, samt slette og søge efter et par med nøgle:

FIND (tast).

INDSÆT (værdi, nøgle).

FJERN (tast).

Det antages, at to par med lignende nøgler ikke kan lagres i et associativt array. I et par k + v kaldes v værdien forbundet med nøglen k. Semantikken og navnene på ovenstående operationer kan være forskellige i forskellige implementeringer af sådanne arrays.

Så, FIND handling(nøgle) returnerer den værdi, der er knyttet til givet nøgle, eller et specifikt UNDEF-objekt, hvilket betyder, at der ikke er nogen værdi forbundet med den givne nøgle. De to andre handlinger returnerer intet (undtagen om operationen var vellykket).

Generelt set fra grænsefladesynspunktet er det praktisk at betragte et associativt array som et simpelt array, hvor ikke kun heltal, men også værdier af andre typer - for eksempel strenge - kan bruges som indekser.

Forresten er understøttelse af sådanne arrays tilgængelig i mange fortolkede programmeringssprog højt niveau, såsom PHP, Perl, Ruby, Python, Tcl, JavaScript og andre. For sprog, der ikke har indbyggede værktøjer til at arbejde med associative arrays, er der skabt et kolossalt antal implementeringer i form af biblioteker.

Eksempel associativ array kan tjene telefonbog. I denne version er meningen det komplekse "F. I. O. + adresse”, og nøglen er telefonnummeret. En telefonnummer har én ejer, men én person kan eje flere numre.

Associative udvidelser

Det skal bemærkes, at de mest berømte udvidelser inkluderer følgende:

• HVER - "gå igennem" alle gemte par.
• RYD - fjern alle poster.
• MIN - find parret med den mindste nøgleværdi.
• MAX - find parret med den største nøgleværdi.

De sidste to muligheder kræver, at tasterne angiver sammenligningshandlingen.

Implementeringer af associative arrays

Der er mange forskellige implementeringer associativ array. Den mest almindelige implementering kan være baseret på simpelt array, hvis komponenter er (værdi, nøgle) par. For at fremskynde søgehandlinger kan du organisere komponenter af dette array med nøgle og find ved at bruge Men dette vil øge den tid, der kræves for at tilføje et nyt par, da det vil være nødvendigt at "flytte fra hinanden" komponenterne i arrayet for at pakke en ny post ind i den tomme celle, der vises.

De bedst kendte implementeringer er dem, der er baseret på forskellige søgetræer. For eksempel, i en typisk C++ STL-læser, er kortbeholderen implementeret baseret på et sort mahognitræ. Ruby, Tcl, Python-stile bruger én type hash-tabel. Der er andre implementeringer.

Generelt har hver implementering sine egne ulemper og fordele. Det er vigtigt, at alle tre handlinger udføres både i gennemsnit og i den værste nuance over perioden O(log n), hvor n er det aktuelle antal par, der gemmes. For matchede søgetræer (herunder sort-røde træer) er denne betingelse opfyldt.

Hash-tabelbaserede implementeringer er kendt for at have en gennemsnitlig tid på O(1), hvilket er bedre end søgetræbaserede implementeringer. Dette garanterer naturligvis ikke højhastighedsudførelse af individuelle operationer: det værste tilfælde INSERT-tid er angivet som O(n). INSERT-proces kører lang tid, når fyldfaktoren når sit højeste punkt, og det bliver nødvendigt at rekonstruere hash-tabelindekset.

Disse hash-lister er i øvrigt dårlige, fordi de ikke kan bruges til at udføre hurtigt yderligere handlinger MAX, MIN og en algoritme til at krydse alle gemte par i faldende eller stigende rækkefølge af nøgler.

• Oversættelse

• I. Iteration over rigtige arrays
  1. for hver metode og relaterede metoder
  2. for sløjfe
  3. Korrekt brug for ... i loop
  4. for...of loop (implicit brug af iterator)
  5. Eksplicit brug af iterator
• 1. Brug af metoder til at iterere over rigtige arrays
  2. Konverter til et rigtigt array
  3. En note om runtime-objekter

I. Iteration over rigtige arrays

På dette øjeblik Der er tre måder at iterere over elementerne i et rigtigt array:

1. metode Array.prototype.forEach ;
2. klassisk til loop
3. en "korrekt" konstrueret til...in loop.

Derudover forventes der snart, med fremkomsten af ​​den nye ECMAScript 6 (ES 6) standard, yderligere to metoder:

1. for...of loop (implicit brug af iterator);
2. eksplicit brug af iterator.

1. ForHver metoden og relaterede metoder

Hvis dit projekt er designet til at understøtte funktionerne i ECMAScript 5 (ES5) standarden, kan du bruge en af ​​dens innovationer - forEach-metoden.

Eksempel på brug:
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
Generelt kræver brug af forEach tilslutning af es5-shim-emuleringsbiblioteket for browsere, der ikke naturligt understøtter denne metode. Disse omfatter IE 8 og nyere tidlige versioner, som stadig er i brug hist og her.

Fordelen ved forEach er, at der ikke er behov for at erklære lokale variabler for at gemme indekset og værdien af ​​det aktuelle array-element, da de automatisk overføres til funktionen ring tilbage(tilbagekald) som argumenter.

Hvis du er bekymret for de mulige omkostninger ved at ringe tilbage på hvert element, skal du ikke bekymre dig og læse dette.

ForEach er designet til at iterere over alle elementer i et array, men udover det tilbyder ES5 flere nyttige metoder til at iterere gennem alle eller nogle elementer samt udføre nogle handlinger på dem:

• every - returnerer sand , hvis tilbagekaldet for hvert element i arrayet returnerer en værdi , der kan konverteres til sand .
• nogle - returnerer sand, hvis tilbagekaldet for mindst ét ​​element i arrayet returnerer en værdi, der kan konverteres til sand.
• filter - opretter et nyt array, der inkluderer de elementer i det originale array, for hvilket tilbagekaldet returnerer sandt.
• map - opretter en ny matrix bestående af de værdier, der returneres af tilbagekaldet.
• reducer - reducerer et array til en enkelt værdi, og anvender et tilbagekald til hvert element i arrayet efter tur, begyndende med det første (kan være nyttigt til at beregne summen af ​​array-elementer og andre opsummeringsfunktioner).
• reduceRight - virker på samme måde som reducer, men gentager elementer i omvendt rækkefølge.

2. Til sløjfe

God gammel til regler:

Var a = ["a", "b", "c"]; var indeks; for (indeks = 0; indeks< a.length; ++index) { console.log(a); }
Hvis længden af ​​arrayet er konstant i hele løkken, og selve løkken tilhører en ydeevnekritisk sektion af koden (hvilket er usandsynligt), så kan du bruge den "mere optimale" version til med at gemme længden af ​​arrayet:

Var a = ["a", "b", "c"]; var indeks, len; for (indeks = 0, len = a.længde; indeks< len; ++index) { console.log(a); }
I teorien burde denne kode køre lidt hurtigere end den forrige.

Hvis rækkefølgen af ​​elementerne ikke er vigtig, så kan du gå endnu længere med hensyn til optimering og slippe af med variablen til lagring af længden af ​​arrayet, ændre rækkefølgen af ​​søgningen til den modsatte:

Var a = ["a", "b", "c"]; var indeks; for (indeks = a.længde - 1; indeks >= 0; --indeks) ( console.log(a); )
Dog i moderne motorer JavaScript-optimeringsspil som disse betyder normalt ikke noget.

3. Korrekt brug af for...in loop

Hvis du rådes til at bruge en for...in loop, så husk, at iteration over arrays ikke er det, det er beregnet til. I modsætning til en almindelig misforståelse itererer for...in-løkken ikke over array-indekser, men snarere gennem utallige egenskaber ved et objekt.

Men i nogle tilfælde, såsom iteration over sparsomme arrays, for...in kan være nyttigt, så længe du tager forholdsregler, som vist i eksemplet nedenfor:

// a - sparsom array var a = ; a = "a"; a = "b"; a = "c"; for (var nøgle i a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && nøgle<= 4294967294) { console.log(a); } }
I dette eksempel udføres to kontroller ved hver iteration af sløjfen:

1. at arrayet har sin egen egenskab kaldet key (ikke arvet fra sin prototype).
2. denne nøgle er en streng, der indeholder decimalrepræsentationen af ​​et heltal, hvis værdi er mindre end 4294967294. Hvor kommer det sidste tal fra? Fra definitionen af ​​et array-indeks i ES5, som viser, at det højeste indeks et element i et array kan have er: (2^32 - 2) = 4294967294 .

Sådanne kontroller vil naturligvis tage unødvendig tid, når løkken udføres. Men i tilfælde af et sparsomt array er denne metode mere effektiv end en for-løkke, da kun de elementer, der er eksplicit defineret i arrayet, gentages i dette tilfælde. Så i eksemplet ovenfor vil der kun blive udført 3 iterationer (for indeks 0, 10 og 10000) - mod 10001 i for-løkken.

For ikke at skrive sådan en besværlig kontrolkode, hver gang du skal iterere gennem et array, kan du skrive det som en separat funktion:

Funktion arrayHasOwnIndex(array, nøgle) ( return array.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && nøgle<= 4294967294; }
Så vil løkkens krop fra eksemplet blive væsentligt reduceret:

For (tast a) ( if (arrayHasOwnIndex(a, key)) ( console.log(a); ) )
Checkkoden diskuteret ovenfor er universel, velegnet til alle tilfælde. Men i stedet kan du bruge en kortere version, selvom den formelt set ikke er helt korrekt, men ikke desto mindre egnet til de fleste tilfælde:

For (indtast a) ( if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === nøgle) ( console.log(a); ) )

4. For...of loop (implicit brug af iterator)

ES6, stadig i udkaststatus, bør introducere iteratorer til JavaScript.

Iterator er en protokol implementeret af et objekt, der definerer en standard måde at opnå en sekvens af værdier på (endelig eller uendelig).
En iterator er et objekt, der definerer en next() metode - en ingen-argument funktion, der returnerer et objekt med to egenskaber:

1. udført (boolesk) - sandt, hvis iteratoren har nået slutningen af ​​den itererbare sekvens. Ellers er værdien falsk.
2. værdi - definerer den værdi, der returneres af iteratoren. Kan være udefineret (mangler), hvis den færdige egenskab er sand .

Mange indbyggede genstande, inkl. rigtige arrays har iteratorer som standard. Den enkleste måde at bruge en iterator på rigtige arrays er at bruge den nye for ... af konstruktion.

Eksempel på brug til...af:

Varval; var a = ["a", "b", "c"]; for (val af a) ( console.log(val); )
I eksemplet ovenfor kalder for...of-løkken implicit Array-objektets iterator for at opnå hver værdi af arrayet.

5. Eksplicit brug af iterator

Iteratorer kan også bruges eksplicit, men i dette tilfælde bliver koden meget mere kompliceret sammenlignet med for...of-løkken. Det ser sådan ud:

Var a = ["a", "b", "c"]; var it = a.entries(); var indgang; while (!(entry = it.next()).done) ( console.log(entry.value); )
I dette eksempel returnerer metoden Array.prototype.entries en iterator, der bruges til at vise arrayets værdier. Ved hver iteration indeholder entry.value en matrix af formen [nøgle, værdi] .

II. Iteration over array-lignende objekter

Ud over rigtige arrays er der også i JavaScript array-lignende objekter . Fælles for dem med rigtige arrays er, at de har en længdeegenskab og egenskaber navngivet som tal svarende til arrayets elementer. Eksempler inkluderer DOM for NodeList-samlingen og argumenterne pseudo-array, tilgængelig i enhver funktion/metode.

1. Brug af metoder til at iterere over rigtige arrays

Som minimum kan de fleste, hvis ikke alle, metoder til iteration over rigtige arrays bruges til at iterere over array-lignende objekter.

For og for...in-konstruktionerne kan anvendes på array-lignende objekter på nøjagtig samme måde, som de anvendes på rigtige arrays.

ForEach og andre Array.prototype-metoder gælder også for array-lignende objekter. For at gøre dette skal du bruge Function.call eller Function.apply .

For eksempel, hvis du vil anvende forEach til childNodes-egenskaben for et Node-objekt, vil du gøre det sådan:

Array.prototype.forEach.call(node.childNodes, function(child) ( // gør noget med det underordnede objekt));
For at gøre dette trick nemmere at genbruge, kan du erklære en reference til Array.prototype.forEach-metoden i en separat variabel og bruge den som en genvej:

// (Forudsat at al kode nedenfor er i samme omfang) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // gør noget med det underordnede objekt));
Hvis et array-lignende objekt har en iterator, kan det bruges eksplicit eller implicit til at iterere over objektet på samme måde som for rigtige arrays.

2. Konverter til et rigtigt array

Der er også en anden, meget enkel måde at iterere over et array-lignende objekt: konverter det til et rigtigt array og brug en af ​​metoderne diskuteret ovenfor til iteration over rigtige arrays. Til konvertering kan du bruge den generiske Array.prototype.slice-metode, som kan anvendes på ethvert array-lignende objekt. Dette gøres meget enkelt, som vist i eksemplet nedenfor:

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
For eksempel, hvis du ønsker at konvertere en NodeList-samling til et faktisk array, skal du bruge kode noget som dette:

Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Opdatering: Som nævnt i kommentarerne

• Oversættelse

De fleste applikationer udviklet i disse dage kræver interaktion med en form for datasæt. Håndtering af elementer i samlinger er en almindelig operation, som du sandsynligvis er stødt på. Når du for eksempel arbejder med arrays, kan du uden at tænke over bruge en regulær for-løkke, som ser sådan ud: for (var i=0; i< value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.

Antag, at vi skal vise en liste over produkter, og om nødvendigt opdele den i kategorier, filtrere den, udføre en søgning på den, ændre denne liste eller dens elementer. Måske skal du hurtigt udføre nogle beregninger, der involverer elementerne i en liste. Lad os sige, at du skal tilføje noget med noget, gange noget med noget. Er det muligt at finde værktøjer i JavaScript, der giver dig mulighed for at løse sådanne problemer hurtigere og mere bekvemt end at bruge en almindelig for loop?

Faktisk er der sådanne faciliteter i JavaScript. Nogle af dem er diskuteret i materialet, hvis oversættelse vi præsenterer for din opmærksomhed i dag. Vi taler især om spread-operatoren, for...of-løkken og metoderne include(), some(), every(), filter(), map() og reduce(). Vi vil for det meste tale om arrays her, men de teknikker, der diskuteres her, er generelt velegnede til at arbejde med andre typer objekter.

Det skal bemærkes, at anmeldelser af moderne tilgange til JS-udvikling normalt omfatter eksempler udarbejdet ved hjælp af pilefunktioner. Måske bruger du dem ikke så tit – måske fordi du ikke kan lide dem, måske fordi du ikke vil bruge for meget tid på at lære noget nyt, eller måske er de bare ikke rigtige for dig. Derfor vil der her i de fleste situationer blive vist to muligheder for at udføre de samme handlinger: Brug af almindelige funktioner (ES5) og brug af pilefunktioner (ES6). For dem, der er nye til at arbejde med pilefunktioner, svarer pilefunktioner ikke til funktionserklæringer og funktionsudtryk. Du bør ikke erstatte det ene med det andet. Dette skyldes især det faktum, at dette søgeord opfører sig forskelligt i almindelige funktioner og pilefunktioner.

1. Udvidelsesoperatør

Spredningsoperatoren giver dig mulighed for at "udvide" arrays ved at erstatte deres elementer i stedet for arrays på det sted, hvor denne operator bruges. En lignende tilgang er blevet foreslået for objekt-literaler.

▍Ekspansionsoperatørens styrker

• Dette er en enkel og hurtig måde at "trække" individuelle elementer fra et array.
• Denne operator er velegnet til at arbejde med array og objektliteral.
• Dette er en hurtig og intuitiv metode til at arbejde med funktionsargumenter.
• Udvidelsesoperatøren fylder ikke meget i koden - den ligner tre prikker (...).

▍Eksempel

Lad os sige, at du har til opgave at liste dine yndlingsgodbidder uden at bruge en løkke. Ved at bruge udvidelsesoperatoren gøres dette sådan:

2. Loop for ... af

For…of-sætningen er designet til at krydse gentagelige objekter. Det giver adgang til individuelle elementer af sådanne objekter (især til array-elementer), som for eksempel gør det muligt at ændre dem. Det kan betragtes som en erstatning for den almindelige for loop.

▍Styrker af for…of-løkken

• Dette er en nem måde at tilføje eller opdatere samlingsgenstande.
• For...of-løkken giver dig mulighed for at udføre forskellige beregninger ved hjælp af elementer (summation, multiplikation og så videre).
• Det er praktisk at bruge, når du skal kontrollere eventuelle forhold.
• Dens brug fører til at skrive renere og mere læsbar kode.

▍Eksempel

Lad os sige, at du har en datastruktur, der beskriver indholdet af en værktøjskasse, og du vil vise disse værktøjer. Sådan gør du det ved at bruge en for...of loop:

3. Inclusive()-metoden

Metoden include() bruges til at kontrollere tilstedeværelsen af ​​et bestemt element i en samling, især for eksempel en bestemt streng i et array, der indeholder strenge. Denne metode returnerer sand eller falsk afhængigt af resultaterne af testen. Når du bruger det, er det værd at overveje, at der er forskel på store og små bogstaver. Hvis samlingen for eksempel indeholder strengelementet SCHOOL , og inkluderer() kontrollerer for dets tilstedeværelse ved hjælp af strengskolen , vil metoden returnere false .

▍Styrker af include()-metoden

• Metoden include() er nyttig til at skabe simple datahentningsmekanismer.
• Det giver udvikleren en intuitiv måde at bestemme tilstedeværelsen af ​​visse data i et array.
• Det er praktisk at bruge i betingede udtryk til at ændre, filtrere elementer og udføre andre operationer.
• Dens brug fører til forbedret kodelæsbarhed.

▍Eksempel

Antag, at du har et værksted, repræsenteret ved et array med en liste over biler, og du ved ikke, om en bestemt bil er i denne garage eller ej. For at løse dette problem skal du skrive kode, der giver dig mulighed for at kontrollere, om en bil er i garagen. Lad os bruge metoden include():

4. some() metode

Some()-metoden giver dig mulighed for at kontrollere, om nogle af de elementer, du leder efter, findes i arrayet. Baseret på resultaterne af kontrollen returnerer den sand eller falsk . Den ligner metoden include() ovenfor, bortset fra at dens argument er en funktion snarere end for eksempel en almindelig streng.

▍Styrker ved some()-metoden

• Some()-metoden giver os mulighed for at kontrollere, om arrayet indeholder mindst et af de elementer, vi er interesserede i.
• Den udfører en tilstandstest ved hjælp af den funktion, der er sendt til den.
• Denne metode er praktisk at bruge.

▍Eksempel

Antag, at du er ejer af en klub, og generelt er du ikke interesseret i, hvem der præcist kommer til din klub. Nogle besøgende må dog ikke komme ind i klubben, fordi de er tilbøjelige til overdrevent indtagelse af alkoholholdige drikkevarer, i hvert fald hvis de befinder sig i din virksomhed på egen hånd, og der ikke er nogen med dem til at passe dem. I dette tilfælde kan en gruppe besøgende kun komme ind i klubben, hvis mindst én af dem er mindst 18 år gammel. For at automatisere denne form for kontrol, vil vi bruge metoden some(). Nedenfor er dens anvendelse demonstreret i to versioner.

ES5

ES6

5. Every() metode

Every()-metoden itererer gennem et array og tester hvert element mod en bestemt betingelse, og returnerer sandt, hvis alle elementer i arrayet matcher betingelsen, og ellers false. Du kan se, at det ligner nogle()-metoden.

▍Styrker ved every()-metoden

• Metoden every() giver dig mulighed for at kontrollere, om alle elementer i et array opfylder en betingelse.
• Betingelser kan indstilles ved hjælp af funktioner.
• Det fremmer en deklarativ tilgang til programmering.

▍Eksempel

Lad os vende tilbage til det forrige eksempel. Der lod man besøgende under 18 år komme ind i klubben, men nogen skrev en erklæring til politiet, hvorefter man kom i en ubehagelig situation. Efter at alt var ordnet, besluttede du, at du ikke havde brug for alt dette, og strammede reglerne for at besøge klubben. Nu kan en gruppe besøgende kun komme ind i klubben, hvis hvert medlem af gruppen er mindst 18 år. Som sidste gang vil vi overveje at løse problemet i to versioner, men denne gang vil vi bruge metoden every().

ES5

ES6

6. filter() metode

Filter()-metoden giver dig mulighed for, baseret på et bestemt array, at oprette et nyt array, der kun indeholder de elementer i det originale array, der opfylder en given betingelse.

▍Styrker ved filter()-metoden

• Filter()-metoden undgår ændring af det originale array.
• Det giver dig mulighed for at slippe af med unødvendige elementer.
• Det forbedrer kodelæsbarheden.

▍Eksempel

Antag, at du fra en liste over priser kun skal vælge dem, der er større end eller lig med 30. Lad os bruge filter()-metoden til at løse dette problem.

ES5

ES6

7. Map() metode

Map()-metoden ligner filter()-metoden, idet den også returnerer et nyt array. Det bruges dog til at ændre elementerne i det originale array.

▍Styrker ved map()-metoden

• Map()-metoden undgår behovet for at ændre elementerne i det originale array.
• Det kan bruges til bekvemt at ændre array-elementer.
• Det forbedrer kodelæsbarheden.

▍Eksempel

Lad os sige, at du har en liste over produkter med priser. Din leder har brug for en ny liste over produkter, hvis priser er reduceret med 25 %. Lad os bruge map()-metoden til at løse dette problem.

ES5

ES6

8. reduce() metode

Metoden reduce() giver dig i sin enkleste form mulighed for at summere elementerne i numeriske arrays. Med andre ord reducerer det arrayet til en enkelt værdi. Dette giver dig mulighed for at bruge det til at udføre forskellige beregninger.

▍Styrker ved reduce()-metoden

• Ved hjælp af reduce()-metoden kan du beregne summen eller gennemsnittet af elementerne i en matrix.
• Denne metode fremskynder og forenkler beregninger.

▍Eksempel

Lad os sige, at du skal beregne dine udgifter for ugen, som er gemt i et array. Lad os løse dette problem ved hjælp af reduce() metoden.

ES5

ES6

Tilføj tags

Hvad er forskellen mellem en matrix og en variabel?

For bedre at forstå, hvad arrays er i Javascript og i ethvert andet programmeringssprog, vil jeg vise eksempler på virkelige objekter fra livet.

Når du går i et supermarked, kan du se et skab med rum, hvor du kan lægge dine ting i et.

Hver celle har et nummer. Det er ved dette tal, at du, efter at have gennemført din shopping, kan forstå, hvilken celle dine varer er i.

I analogi kan vi kalde variabel en celle i skabet, hvor dine ting opbevares, og alle cellerne er array.

Sådan opretter du et array i Javascript

I Javascript kan et array oprettes på forskellige måder.

Første måde at oprette et array i Javascript

Denne metode er til numeriske data og objekter:

Denne måde for strenge:

Ved hjælp af denne metode skabte vi en række af fire elementer.

Anden måde at oprette et array i Javascript

Den anden måde at skabe arrays i Javascript på er gennem objekter.

Det ser sådan ud:

array = new Array(1, 23, 15, 10, 33);

For strengmatrixdata skal strengene være omgivet af anførselstegn.

Sådan får du adgang til et array i Javascript

For at få adgang til det første element i et array skal du skrive:

hvor vi tager det første element ud af arrayet - array. Console.log - viser indholdet af arrayet.

Matrixnummerering starter fra nul. Det er derfor, når vi kontakter array vi får værdien af ​​det første element 1 eller i eksemplet med strenge - One.

Metoder til at arbejde med arrays

Javascript har metoder til at arbejde med arrays. Disse metoder er meget nyttige, og nogle programmører undgår dem af en eller anden ukendt årsag og skriver deres egne cykler.

Omvendt metode

Den omvendte metode ændrer arrayet og danner et nyt array med elementerne i omvendt rækkefølge.

Eksempel:

array = ["En", "To", "Tre", "Fire"];

array.reverse();

Resultat:

["Fire", "Tre", "To", "En"]

Concat metode

Konkat-metoden sammenkæder et array med et andet array eller data. Concat-metoden ændrer ikke det originale array.

Eksempel:

array = ["En", "To", "Tre", "Fire"];

array.concat(12);

Resultat:

["En", "To", "Tre", "Fire", 12]

Skivemetode

Udsnitsmetoden afskærer en del af en streng og kan tage to parametre (begyndelse og slutning) eller en parameter som input.

Hvis den anden parameter er sat til -1, vil den returnere resten af ​​strengen med det næstsidste element.

Udsnitsmetoden ændrer ikke det originale array.

Eksempel:

array = ["En", "To", "Tre", "Fire"];

array.slice(1,-1);

Resultat:

Splejsningsmetode

Splejsningsmetoden er ret multifunktionel.

Det tager tre argumenter som input:

2. Antallet af array-elementer, der skal fjernes

3. Det tredje argument er de værdier, der skal indsættes, hvor vi fjernede array-elementerne fra

Splejsningsmetoden ændrer det originale array.

Eksempel:

array = ["En", "To", "Tre", "Fire"];

array.splice(1, 2, "2", "3");

Resultat:

["En", "2", "3", "Fire"]

Det tredje argument i splejsningsmetoden er valgfrit. Hvis du ikke bruger det tredje argument, vil splejsningsmetoden fjerne de array-elementer, der er angivet i de første to argumenter, og returnere et nyt array uden disse elementer.

Push metode

Push-metoden indsætter et element i slutningen af ​​arrayet

Eksempel:

array = ["En", "To", "Tre", "Fire"];

array.push("Fem");

Resultat:

["En to tre fire fem"]

UnShift metode

Unshift-metoden indsætter et element i begyndelsen af ​​arrayet

Eksempel:

array = ["En", "To", "Tre", "Fire"];

array.unshift("Nul");

Resultat:

["Nul", "En", "To", "Tre", "Fire"]

Pop metode

Pop-metoden fjerner det sidste element fra arrayet og returnerer det fjernede element.

Eksempel:

array = ["En", "To", "Tre", "Fire"];

array.pop();

Resultat:

["Et to tre"]

Skift metode

Skiftmetoden fjerner det første element fra arrayet og returnerer det fjernede element.

Eksempel:

array = ["En", "To", "Tre", "Fire"];

Resultat:

["To tre fire"]

Deltag metode

Sammenføjningsmetoden i Javascript konverterer et array til en streng og giver dig mulighed for at angive din egen afgrænser. Som standard bruger joinmetoden et komma som afgrænsning. Lad os prøve at tilføje en "-"-separator.

Eksempel:

array = ["En", "To", "Tre", "Fire"];

array.join("-");

Resultat:

En to tre fire

Sorteringsmetode

Den bløde metode sorterer som standard arrayet alfabetisk. Vi kan give det en funktion med forskellig sorteringslogik. Vi vil tale om dette i en separat artikel dedikeret til metoder separat.

Eksempel:

array = ["a", "c", "b", "d"];

Resultat:

["a B C D"]

Arbejde med arrays i sløjfer

Loops er meget vigtige metoder til at arbejde med arrays. Ved at bruge dem kan vi få adgang til et enkelt element i et array og krydse hele arrayet.

FOR Loop

En simpel løkke til at iterere gennem et array

Eksempel:

Resultat:

En
To
Tre
Fire

For hver sløjfe

Forbedret loop til iteration over et array. Det kan tage tre elementer som input: element, indeks, array.

Eksempel 1:

Resultat:

En
To
Tre
Fire

Eksempel 2:

Metoden toUpperCase() bruger alle elementer med stort

Resultat:

["EN TO TRE FIRE"]

Konklusioner om Arrays i Javascript

Der er mange metoder til at arbejde med arrays i Javascript. I denne artikel kiggede vi ikke på alle metoderne; vi vil helt sikkert være opmærksomme på dem i fremtidige artikler, men hvis du ved, hvordan du bruger metoderne til at arbejde med arrays fra denne artikel, vil dine færdigheder være plus 150 procent, og du vil øge dit niveau markant som frontend-udvikler i programmeringssproget Javascript.

Følg nye artikler og videotutorials, abonner på vores YouTube-kanal og meld dig ind i gruppen

Lad os lære at indeksere arrays i js, fjerne og tilføje deres elementer.

Et array i JavaScript er et globalt objekt designet til at gemme en liste over værdier.

Det ligner andre variabler, idet det kan gemme enhver type data. Men en matrix har en vigtig forskel fra en variabel: den kan gemme mere end ét element ad gangen.

Et array er en ordnet samling af værdier. Hver værdi kaldes et element og har sit eget tal, kaldet et indeks.

Et element inde i et array kan være af enhver type. Desuden kan elementerne i et array være af forskellige typer: tal, strenge, logiske elementer og endda objekter eller andre arrays.

Rækkefølgen af ​​array-elementer starter fra 0. Det viser sig, at arrayet altid vil have et indeks forskudt med én: det første element vil have indeks 0, det andet 1 osv.

Her er et eksempel på et array med elementer af forskellige typer:

Oprettelse (erklærer) et array

Arrays er meget praktiske, fordi de kan gemme så mange data, som du har brug for. Den maksimalt mulige størrelse af et js-array er 2 32 elementer.

Vi skal fortælle JavaScript, at vi vil oprette et array. Der er to muligheder for dette: værdien i firkantede parenteser eller det nye nøgleord.

Kort notation: Brug af firkantede parenteser

En kommasepareret liste over værdier omgivet af firkantede parenteser.

var myArray = [ "Jack", "Sawyer", "John", "Desmond" ];

Indholdet af arrayet bestemmes af, hvad der er mellem firkantede parenteser. Hver værdi er adskilt af et komma.

Værdier angives på samme måde som simple variabler, det vil sige, at strenge skal erklæres omsluttet af anførselstegn osv.

For at erklære et tomt array skal du lade parenteserne være tomme:

var myArray = ;

Lang indtastning: ved hjælp af Array()-konstruktøren

var lostArray = new Array("Jack", "Sawyer", "John", "Desmond"); var twinPeaksArray = new Array("Laura", 2, ["Bob", "Leland", "Dale"]);

Det nye søgeord fortæller JavaScript om at oprette et nyt array, hvis værdier videregives som parametre.

Hvis du på forhånd ved, hvor mange elementer der vil være i dit array, kan du straks sende denne værdi i konstruktøren.

var myArray = new Array(80);

Ovenstående udtryk vil skabe et tomt array bestående af 80 slots med udefinerede værdier.

Erklærer et tomt array:

var myArray = new Array();

Adgang til Array Elements

Ved at bruge indekset for hvert element kan du arbejde med alle data i arrayet, få adgang til det ved hjælp af operatoren:

var myArray = ["Jack", "Sawyer", "John", "Desmond"]; console.log(myArray); // Udskriver "Jack" console.log(myArray); // Udskriver "Desmond"

Et array kan have flere niveauer, det vil sige, at hvert element i sig selv kan være et array. Resultatet bliver et todimensionelt js-array. Hvordan kan vi få adgang til disse arrays, der er placeret inde i andre - " multidimensionelle arrays»?

Lad os som et eksempel betragte et array, der repræsenterer en familie. Børn fra denne familie er optaget i et separat array inde i hovedfamilien:

var familyArray = ["Marge", "Homer", ["Bart", "Lisa", "Maggie"]];

Du kan forestille dig det sådan her:

For at henvise til værdien "Lisa":

var lisa = familyArray; console.log(lisa); // viser "Lisa"

Dette kan fortsættes næsten på ubestemt tid, hvilket giver dig mulighed for at gemme indlejrede datasæt i arrays og få adgang til dem ved hjælp af indekser.

Tilføjelse af elementer til en matrix

Vi fandt ud af, hvordan man får adgang til array-elementer ved hjælp af deres tilsvarende indekser. På lignende måde kan du tilføje (eller ændre) elementer ved at angive, for eksempel:

var myArray = ["Kate", "Sun"]; myArray = "Juliet"; console.log(myArray); // Udskriver "Kate, Sun, Juliet"

Hvad sker der, hvis jeg erklærer et element med et indeks, der ikke har andre elementer før sig? Selve arrayet vil skabe alle de manglende elementer og tildele dem værdien undefined:

var myArray = ["Kate", "Sun"]; myArray = "Juliet"; console.log(myArray.length); // Udskriver "6" console.log(myArray); // Printer ["Kate", "Sung", udefineret, udefineret, udefineret, "Juliet"]

Du kan finde ud af, hvad længden af ​​et js-array er ved at bruge egenskaben length. I eksemplet ovenfor er der seks elementer i arrayet, og tre af dem har ikke fået en værdi - de er markeret som udefinerede .

push() metode

Ved at bruge push()-metoden kan du tilføje et eller flere elementer til et js-array. Push() accepterer et ubegrænset antal parametre, som alle vil blive tilføjet til slutningen af ​​arrayet.

var myArray = ["Kate", "Sut"]; myArray.push("Juliet"); // Tilføjer elementet "Juliet" til slutningen af ​​arrayet myArray.push("Libby", "Shannon"); // Tilføjer elementerne "Libby" og "Shannon" til slutningen af ​​arrayet console.log(myaArray ); // Printer ["Kate", "Soon", "Juliet", "Libby", "Shannon"]

unshift() metode

Unshift()-metoden fungerer på samme måde som push(), bortset fra at den tilføjer elementer til begyndelsen af ​​arrayet.

var myArray = ["Kate", "Sun"]; myArray.unshift("Juliet"); // Tilføjer elementet "Juliet" til begyndelsen af ​​arrayet myArray.unshift("Libby", "Shannon"); // Tilføjer elementerne "Libby" og "Shannon" til begyndelsen af ​​arrayet console.log(myArray); // Udgange ["Libby", "Shannon", "Juliet", "Kate", "Son"]

Fjernelse af array-elementer

pop() og shift() metoder

Metoderne pop() og shift() fjerner henholdsvis det sidste og første element i et array:

var myArray = ["Jack", "Sawyer", "John", "Desmond", "Kate"]; myArray.pop(); // Fjerner "Kate"-elementet myArray.shift(); // Fjerner "Jack"-elementet console.log(myArray); // Udskriver ["Sawyer", "John", "Desmond"]

splice() metode

Ved at bruge splice()-metoden kan du fjerne eller tilføje elementer til et array, mens du præcist angiver elementernes indeks.

I det følgende eksempel tilføjer splice()-metoden to elementer, der starter ved indeks 2 ( altså fra det tredje element):

var fruitArray = ["æble", "fersken", "appelsin", "citron", "lime", "kirsebær"]; fruitArray.splice(2, 0, "melon", "banan"); console.log(fruitArray); // Udgange ["æble", "fersken", "melon", "banan", "appelsin", "citron", "lime", "kirsebær"]

Den første parameter i splice()-metoden er indekset. Den angiver på hvilken position elementer skal tilføjes/fjernes. I vores eksempel valgte vi indeks 2 ( betyder "orange").

Den anden parameter er antallet af elementer, der skal fjernes. Vi har angivet en værdi på 0, så intet vil blive slettet.

Følgende parametre er valgfrie. De tilføjer nye værdier til arrayet. I vores tilfælde skal vi tilføje "melon" og "banan", begyndende med indeks 2.