Array-metoder

Array giver os mange metoder. For at gre det nemmere, er de i dette kapitel opdelt i grupper.

Tilfj/fjern elementer

Vi kender allerede metoder, der tilfjer og fjerner elementer fra begyndelsen eller slutningen:

• arr.push(...items) tilfjer elementer til slutningen,
• arr.pop() fjerner et element fra slutningen,
• arr.shift() fjerner et element fra begyndelsen,
• arr.unshift(...items) tilfjer elementer til begyndelsen.

Her er et par andre.

splice

Hvordan sletter man et element fra arrayet?

Array er objekter, s vi kan prve at bruge delete:

let arr = ["Jeg", "gr", "hjem"];

delete arr[1]; // fjern "gr"

alert( arr[1] ); // undefined

// nu er  arr = ["Jeg",  , "hjem"];
alert( arr.length ); // 3

Elementet blev slettet, men har stadig 3 elementer. Vi kan se, at arr.length == 3.

Det er naturligt, fordi delete obj.key fjerner en vrdi ved key. Det er alt, hvad det gr. Fint for objekter. Men for arrays nsker vi normalt, at resten af elementerne skal skifte og optage det frigjorte sted. Vi forventer at have et kortere array nu.

Derfor skal der bruges specielle metoder.

Metoden arr.splice er en schweizerkniv for arrays. Den kan det hele: indstte, fjerne og erstatte elementer.

Syntaksen er:

arr.splice(start[, deleteCount, elem1, ..., elemN])

Den ndrer arr startende fra indekset start: fjerner deleteCount elementer og indstter derefter elem1, ..., elemN p deres plads. Returnerer arrayet af fjernede elementer.

Metoden er nok nemmere at forst ved hjlp af eksempler.

Lad os starte med sletning:

let arr = ["Jeg", "studerer", "JavaScript"];

arr.splice(1, 1); // fra indeks 1 fjern 1 element

alert( arr ); // ["Jeg", "JavaScript"]

Nem, ikke? Fra indeks 1 fjernede den 1 element.

I det nste eksempel fjerner vi 3 elementer og erstatter dem med de to andre:

let arr = ["Jeg", "studerer", "JavaScript", "lige", "nu"];

// fjerner de 3 frste elementer og erstatter dem med andre
arr.splice(0, 3, "Lad", "os", "danse");

alert( arr ) // nu ["Lad", "os", "danse", "lige", "nu"]

Her kan vi se, at splice returnerer arrayet af fjernede elementer:

let arr = ["Jeg", "studerer", "JavaScript", "lige", "nu"];

// fjern de 2 frste elementer
let removed = arr.splice(0, 2);

alert( removed ); // "Jeg", "studerer" <-- array af fjernede elementer

Metoden splice kan ogs indstte elementer uden at fjerne nogen. For det skal vi stte deleteCount til 0:

let arr = ["Jeg", "studerer", "JavaScript"];

// fra indeks 2
// slet 0
// indst "et", "kompleks" og "sprog"
arr.splice(2, 0, "et", "kompleks", "sprog");

alert( arr ); // "Jeg", "studerer", "kompleks", "sprog", "JavaScript"

let arr = [1, 2, 5];

// fra indeks -1 (et skridt fra slutningen)
// slet 0 elementer,
// indst derefter 3 og 4
arr.splice(-1, 0, 3, 4);

alert( arr ); // 1,2,3,4,5

slice

Metoden arr.slice er meget enklere end den lignende arr.splice.

Syntaksen er:

arr.slice([start], [end])

Den returnerer et nyt array, der kopierer alle elementer fra indeks start til end (eksklusiv end). Bde start og end kan vre negative, i s fald antages positionen fra slutningen af arrayet.

Det ligner string-metoden str.slice, men i stedet for substrings laver den subarrays.

For eksempel:

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s (kopier fra 1 til 3)

alert( arr.slice(-2) ); // s,t (kopier fra -2 til slutningen)

Vi kan ogs kalde den uden argumenter: arr.slice() laver en kopi af arr. Det bruges ofte til at f en kopi til videre transformationer, der ikke skal pvirke det oprindelige array.

concat

Metoden arr.concat opretter et nyt array der inkluderer vrdierne fra andre arrays og eventuelle yderligere elementer.

Syntaksen er:

arr.concat(arg1, arg2...)

Den accepterer et vilkrligt antal argumenter enten arrays eller vrdier.

Resultatet er et nyt array, der indeholder elementer fra arr, derefter arg1, arg2 osv.

Hvis et argument argN er et array, kopieres alle dets elementer. Ellers kopieres argumentet selv.

For eksempel:

let arr = [1, 2];

// Opret et array fra: arr og [3,4]
alert( arr.concat([3, 4]) ); // 1,2,3,4

// Opret et array fra: arr og [3,4] og [5,6]
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6

// Opret et array fra: arr og [3,4], og tilfj derefter vrdierne 5 og 6
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6

Normalt kopierer den kun elementer fra arrays. Andre objekter, selvom de ligner arrays, tilfjes som helhed:

let arr = [1, 2];

let arrayLike = {
  0: "noget",
  length: 1
};

alert( arr.concat(arrayLike) ); // 1,2,[object Object]

Men hvis et array-lignende objekt har en speciel Symbol.isConcatSpreadable egenskab, behandles det som et array af concat: dets elementer tilfjes i stedet:

let arr = [1, 2];

let arrayLike = {
  0: "noget",
  1: "andet",
  [Symbol.isConcatSpreadable]: true,
  length: 2
};

alert( arr.concat(arrayLike) ); // 1,2,noget,andet

Iteration: forEach

Metoden arr.forEach tillader at kre en funktion for hvert element i arrayet.

Syntaksen er:

arr.forEach(function(item, index, array) {
  // ... gr noget med elementet
});

For eksempel, dette viser hvert element i arrayet:

// for hvert element kald alert
["Bilbo", "Gandalf", "Nazgul"].forEach(alert);

Og denne kode er mere detaljeret om deres positioner i ml-arrayet:

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(`${item} er ved indeks ${index} i ${array}`);
});

Resultatet af funktionen (hvis den returnerer noget) kasseres og ignoreres.

Sgning i array

Lad os nu dkke metoder, der sger i et array.

indexOf/lastIndexOf og includes

Metoderne arr.indexOf og arr.includes har en lignende syntaks og gr stort set det samme som deres string-modstykker, men opererer p elementer i stedet for tegn:

• arr.indexOf(item, from) leder efter item startende fra indeks from, og returnerer indekset hvor det blev fundet, ellers -1.
• arr.includes(item, from) leder efter item startende fra indeks from, returnerer true hvis fundet.

Normalt bruges disse metoder med kun t argument: det item der skal sges efter. Som standard er sgningen fra starten.

For eksempel:

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

Bemrk, at indexOf bruger streng lighed === til sammenligning. S hvis vi leder efter false, finder den prcis false og ikke nul.

Hvis vi vil tjekke, om item findes i arrayet og ikke har brug for indekset, er arr.includes at foretrkke.

Metoden arr.lastIndexOf er den samme som indexOf, men sger fra hjre mod venstre.

let fruits = ['ble', 'Appelsin', 'ble']

alert( fruits.indexOf('ble') ); // 0 (frste ble)
alert( fruits.lastIndexOf('ble') ); // 2 (sidste ble)

const arr = [NaN];
alert( arr.indexOf(NaN) ); // -1 (forkert, burde vre 0)
alert( arr.includes(NaN) );// true (korrekt)

find og findIndex/findLastIndex

Forestil dig, at vi har et array af objekter. Hvordan finder vi et objekt med en bestemt betingelse?

Her kommer metoden arr.find(fn) til hjlp.

Syntaksen er:

let result = arr.find(function(item, index, array) {
  // hvis true returneres, returneres item og iterationen stoppes
  // for falsy scenarier returneres undefined
});

Funktionen kaldes for elementer i arrayet, et efter et:

• item er elementet.
• index er dets indeks.
• array er selve arrayet.

Hvis det returnerer true, stoppes sgningen, og item returneres. Hvis intet findes, returneres undefined.

For eksempel, vi har et array af brugere, hver med felterne id og name. Lad os finde den med id == 1:

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let user = users.find(item => item.id == 1);

alert(user.name); // John

I virkelige projekter er arrays af objekter en almindelig ting, s find-metoden er meget nyttig.

Bemrk, at i eksemplet giver vi kun t argument til find funktionen item => item.id == 1. Det er typisk, andre argumenter til denne funktion bruges sjldent.

Metoden arr.findIndex har samme syntaks, men returnerer indekset hvor elementet blev fundet i stedet for elementet selv. Vrdien -1 returneres hvis intet findes.

Metoden arr.findLastIndex er som findIndex, men sger fra hjre mod venstre, ligesom lastIndexOf.

Her er et eksempel:

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"},
  {id: 4, name: "John"}
];

// Find indeks med den frste John
alert(users.findIndex(user => user.name == 'John')); // 0

// Find indeks med den sidste John
alert(users.findLastIndex(user => user.name == 'John')); // 3

filter

Metoden find sger efter et enkelt (frste) element der fr funktionen til at returnere true.

Hvis der kan vre mange, kan vi bruge arr.filter(fn).

Syntaksen er lignende find, men filter returnerer et array af alle matchende elementer:

let results = arr.filter(function(item, index, array) {
  // hvis true bliver item tilfjet til results, og iterationen fortstter
  // returnerer et tomt array hvis intet findes
});

For eksempel:

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

// returnerer et array med de frste to brugere
let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2

Transformr et array

Lad os g videre til metoder, der transformerer og omarrangerer et array.

map

Metoden arr.map er en af de mest nyttige og ofte brugte.

Den kalder funktionen for hvert element i arrayet og returnerer arrayet af resultater.

Syntaksen er:

let result = arr.map(function(item, index, array) {
  // returner den nye vrdi i stedet for item
});

For eksempel, her transformerer vi hvert element til dets lngde:

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

sort(fn)

Kaldet til arr.sort() sorterer arrayet i sig selv, og ndrer dermed rkkeflgen af dets egne elementer.

Det returnerer ogs det sorterede array, men den returnerede vrdi ignoreres normalt, da arr selv bliver ndret.

For eksempel:

let arr = [ 1, 2, 15 ];

// metoden omarrangerer indholdet af arr
arr.sort();

alert( arr );  // 1, 15, 2

Bemrkede du noget mrkeligt i resultatet?

Rkkeflgen blev 1, 15, 2. Forkert. Men hvorfor?

Elementerne sorteres som standard som tekststrenge (string).

Det betyder at alle elementer konverteres til strenge for sammenligninger. For strenge anvendes leksikografisk orden, og faktisk er "2" > "15".

For at bruge vores egen sorteringsorden skal vi levere en funktion som argument til arr.sort().

Funktionen skal sammenligne to vilkrlige vrdier og returnere:

function compare(a, b) {
  if (a > b) return 1; // hvis den frste vrdi er strre end den anden
  if (a == b) return 0; // hvis vrdierne er lige
  if (a < b) return -1; // hvis den frste vrdi er mindre end den anden
}

For eksempel kan vi sortere som tal sledes:

function compareNumeric(a, b) {
  if (a > b) return 1;
  if (a == b) return 0;
  if (a < b) return -1;
}

let arr = [ 1, 2, 15 ];

arr.sort(compareNumeric);

alert(arr);  // 1, 2, 15

Nu virker det som forventet.

Lad os trde et skridt tilbage og tnke over, hvad der sker. arr kan vre et array af hvad som helst, ikke? Det kan indeholde tal eller strenge eller objekter eller hvad som helst. Vi har et st af nogle elementer. For at sortere det, har vi brug for en ordensfunktion, der ved, hvordan man sammenligner dets elementer. Standard er en strengorden.

Metoden arr.sort(fn) implementerer en generisk sorteringsalgoritme. Vi behver ikke bekymre os om, hvordan den internt fungerer (en optimeret quicksort eller Timsort det meste af tiden). Den vil g igennem arrayet, sammenligne dets elementer ved hjlp af den angivne funktion og omarrangere dem, alt hvad vi behver er at levere fn, som gr sammenligningen.

Forresten, hvis vi nogensinde vil vide, hvilke elementer der sammenlignes intet forhindrer os i at vise dem med alert:

[1, -2, 15, 2, 0, 8].sort(function(a, b) {
  alert( a + " <> " + b );
  return a - b;
});

Algoritmen kan sammenligne et element med flere andre i processen, men den prver at lave s f sammenligninger som muligt.

let arr = [ 1, 2, 15 ];

arr.sort(function(a, b) { return a - b; });

alert(arr);  // 1, 2, 15

arr.sort( (a, b) => a - b );

let countries = ['sterreich', 'Andorra', 'Vietnam'];

alert( countries.sort( (a, b) => a > b ? 1 : -1) ); // Andorra, Vietnam, sterreich (forkert)

alert( countries.sort( (a, b) => a.localeCompare(b) ) ); // Andorra,sterreich,Vietnam (korrekt!)

reverse

Metoden arr.reverse vender rkkeflgen af elementerne i arr.

For eksempel:

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1

Den returnerer ogs arrayet arr efter omvendelsen.

split og join

Her er situationen fra det virkelige liv. Vi skriver en beskedapp, og personen indtaster en kommasepareret liste over modtagere: John, Pete, Mary. Men for os ville et array af navne vre meget mere bekvemt end en enkelt streng. Hvordan fr vi det?

Metoden str.split(delim) gr prcis det. Den splitter strengen op i et array efter den givne delimiter delim.

I eksempel nedenfor splitter vi efter et komma efterfulgt af et mellemrum:

let names = 'Bilbo, Gandalf, Nazgul';

let arr = names.split(', ');

for (let name of arr) {
  alert( `En besked til ${name}.` ); // En besked til Bilbo  (efterfulgt af de andre navne)
}

Metoden split har et valgfrit andet numerisk argument en grnse for arrayets lngde. Hvis det er angivet, ignoreres de ekstra elementer. I praksis bruges det dog sjldent:

let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);

alert(arr); // Bilbo, Gandalf

let str = "test";

alert( str.split('') ); // t,e,s,t

Et kald til arr.join(glue) gr det modsatte af split. Det skaber en streng af arr elementer forbundet med glue imellem dem.

For eksempel:

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); // limer arrayet sammen til en streng ved hjlp af ;

alert( str ); // Bilbo;Gandalf;Nazgul

reduce/reduceRight

Nr vi har brug for at iterere over et array kan vi bruge forEach, for eller for..of.

Nr vi har brug for at iterere og returnere data for hvert element kan vi bruge map.

Metoderne arr.reduce og arr.reduceRight hrer ogs til den kategori, men er lidt mere indviklede. De bruges til at beregne en enkelt vrdi baseret p arrayet.

Syntaksen er:

let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);

Funktionen anvendes p alle array-elementer n efter n og brer sit resultat videre til det nste kald.

Argumenterne for funktionen er:

• accumulator er resultatet af det forrige funktionskald, svarer til initial frste gang (hvis initial er angivet).
• item er det aktuelle array-element.
• index er dets position.
• array er arrayet.

Efterhnden som funktionen anvendes, bliver resultatet af det forrige funktionskald videregivet til det nste som det frste argument.

S det frste argument er i bund og grund akkumulatoren, der gemmer det kombinerede resultat af alle tidligere udfrelser. Og til sidst bliver det resultatet af reduce.

Lyder det kompliceret?

Den nemmeste mde at forst det p er ved eksempel.

Her fr vi summen af et array p n linje:

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum + current, 0);

alert(result); // 15

Funktionen, der gives til reduce, bruger kun 2 argumenter, det er typisk nok.

Lad os se detaljerne i, hvad der sker.

1. Ved frste krsel er sum den initial vrdi (det sidste argument til reduce), som er 0, og current er det frste array-element, som er 1. S funktionens resultat er 1.
2. Ved anden krsel er sum = 1, vi lgger det andet array-element (2) til det og returnerer.
3. Ved tredje krsel er sum = 3 og vi lgger endnu et element til det, og s videre

Beregningen forlber sledes:

[]

Eller opsat i form af en tabel, hvor hver rkke reprsenterer et funktionskald p det nste array-element:

Her kan vi tydeligt se, hvordan resultatet af det forrige kald bliver det frste argument i det nste.

Vi kan ogs udelade den initiale vrdi, s reduce starter med det frste element i arrayet som det frste argument og starter iterationen fra det andet element:

let arr = [1, 2, 3, 4, 5];

// fjernet initial vrdi fra reduce (ingen 0 til sidst)
let result = arr.reduce((sum, current) => sum + current);

alert( result ); // 15

Resultatet er det samme. Det sker fordi reduce tager det frste element i arrayet som den initiale vrdi og starter iterationen fra det andet element hvis der ikke er angivet en initial vrdi.

Beregningstabellen er den samme som ovenfor, minus den frste rkke.

Men sdan brug krver at du er lidt opmrksom. Hvis arrayet er tomt, s giver et kald til reduce uden initial vrdi en fejl.

Her er et eksempel:

let arr = [];

// TypeError: Reduce of empty array with no initial value
// hvis den initiale vrdi eksisterede, ville reduce returnere den for det tomme array.
arr.reduce((sum, current) => sum + current);

S det anbefales altid at angive den initiale vrdi.

Metoden arr.reduceRight gr det samme, men gr fra hjre mod venstre.

Array.isArray

Et array er ikke en separat datatype. De er baseret p objekter.

S typeof hjlper ikke med at skelne den fra et regulrt objekt:

alert(typeof {}); // object
alert(typeof []); // object (samme)

Men arrays bruges s ofte, at der findes en speciel metode til det: Array.isArray(value). Den returnerer true, hvis value er et array, og false ellers.

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

De fleste metoder understtter thisArg

Nsten alle array-metoder der kalder funktioner som find, filter, map, med en bemrkelsesvrdig undtagelse af sort, accepterer en valgfri ekstra parameter thisArg.

Den parameter er ikke forklaret i afsnittene ovenfor, fordi den sjldent bruges. Men for fuldstndighedens skyld skal vi dkke den.

Her er den fulde syntaks for disse metoder:

arr.find(func, thisArg);
arr.filter(func, thisArg);
arr.map(func, thisArg);
// ...
// thisArg er det valgfrie sidste argument

Vrdien af thisArg-parameteren bliver this for func.

For eksempel, her bruger vi en metode af army-objektet som et filter, og thisArg sender konteksten til det:

let army = {
  minAge: 18,
  maxAge: 27,
  canJoin(user) {
    return user.age >= this.minAge && user.age < this.maxAge;
  }
};

let users = [
  {age: 16},
  {age: 20},
  {age: 23},
  {age: 30}
];

// find users, for hvem army.canJoin returnerer true
let soldiers = users.filter(army.canJoin, army);

alert(soldiers.length); // 2
alert(soldiers[0].age); // 20
alert(soldiers[1].age); // 23

Hvis vi, i eksemplet ovenfor, brugte users.filter(army.canJoin), ville army.canJoin blive kaldt som en selvstndig funktion, med this=undefined, hvilket ville fre til en jeblikkelig fejl.

Et kald til users.filter(army.canJoin, army) kan erstattes med users.filter(user => army.canJoin(user)), som gr det samme. Den sidstnvnte bruges oftere, da den er lidt nemmere at forst for de fleste.

Opsummering

Et cheat sheet over array-metoder:

• For at tilfje/fjerne elementer:

  • push(...items) tilfjer elementer til slutningen,
  • pop() fjerner et element fra slutningen,
  • shift() fjerner et element fra begyndelsen,
  • unshift(...items) tilfjer elementer til begyndelsen.
  • splice(pos, deleteCount, ...items) ved indeks pos sletter deleteCount elementer og indstter items.
  • slice(start, end) opretter et nyt array, kopierer elementer fra indekset start til end (ikke inklusiv) ind i det.
  • concat(...items) opretter et nyt array: kopierer alle elementer fra det nuvrende og tilfjer items til det. Hvis nogen af items er et array, tages dets elementer.

• For at sge blandt elementer:

  • indexOf/lastIndexOf(item, pos) leder efter item startende fra position pos, og returnerer indekset eller -1 hvis ikke fundet.
  • includes(value) returnerer true hvis arrayet har value, ellers false.
  • find/filter(func) filtrerer elementer gennem funktionen, returnerer frste/alle vrdier der fr den til at returnere true.
  • findIndex er som find, men returnerer indekset i stedet for en vrdi.

• For at iterere over elementer:

  • forEach(func) kalder func for hvert element, returnerer ikke noget.

• For at transformere arrayet:

  • map(func) opretter et nyt array fra resultaterne af at kalde func for hvert element.
  • sort(func) sorterer arrayet p stedet, og returnerer det.
  • reverse() vender arrayet om p stedet, og returnerer det.
  • split/join konverterer en streng til et array og tilbage.
  • reduce/reduceRight(func, initial) beregner en enkelt vrdi over arrayet ved at kalde func for hvert element og videregive et mellemliggende resultat mellem kald.

• Derudover:

  • Array.isArray(value) tjekker om value er et array, hvis ja returnerer true, ellers false.

Bemrk venligst, at metoderne sort, reverse og splice ndrer arrayet selv.

Disse metoder er de mest brugte, de dkker 99% af brugstilflde. Men der er f andre:

• arr.some(fn)/arr.every(fn) tjekker arrayet.

  Funktionen fn kaldes p hvert element i arrayet p samme mde som med map. Hvis nogen/alle resultater er true, returneres true, ellers false.

  Disse metoder opfrer sig lidt som || og && operatorerne: hvis fn returnerer en sand vrdi, returnerer arr.some() straks true og stopper iterationen over de resterende elementer; hvis fn returnerer en falsk vrdi, returnerer arr.every() straks false og stopper iterationen over de resterende elementer.

  Vi kan bruge every til at sammenligne arrays:

  function arraysEqual(arr1, arr2) {
    return arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);
  }
  
  alert( arraysEqual([1, 2], [1, 2])); // true

• arr.fill(value, start, end) fylder arrayet med value fra indeks start til end.

• arr.copyWithin(target, start, end) kopierer sine elementer fra position start til position end ind i sig selv, ved position target (overskriver eksisterende).

• arr.flat(depth)/arr.flatMap(fn) opretter et nyt fladt array fra et multidimensionelt array.

For the komplette fulde liste, se manualen.

Ved frste jekast kan det virke som om der er s mange metoder, at det er ret svrt at huske dem alle. Men ved at huske de vigtigste er du langt.

Kig p cheat sheet ovenfor og v dig p dem. Ls derefter opgaverne i dette kapitel for at ve dig, s du fr erfaring med array-metoder.

Herefter, nr du har brug for at gre noget med et array, og du ikke ved hvordan kom herhen, kig p cheat sheet og find den rigtige metode. Eksempler vil hjlpe dig med at skrive det korrekt. Snart vil du automatisk huske metoderne, uden specifikke anstrengelser fra din side.