Mer om tabeller i javascript
Mer om tabeller i javascript
av Ole Petter den 29. juli 2020
Sist oppdatert: 7 august, 2020 kl 18:18I forrige innlegg kan du lese om grunnleggende operasjoner på tabeller i Javascript.
I dette innlegget går jeg mer grundig gjennom avanserte metoder som reduce, indexOf og sort
Contents
Reduce
Reduce er en funksjon innebygget i javascript som reduserer elementer i en tabell til hvert enkelt element, og går gjennom hvert enkelt. Man kan så for hvert element hente ut data, redigere data eller summere tall og tekststrenger.
Bruke reduce til å formatere tekst
// Reduce string
const limitString = (string, limit = 10) => {
const newString = [];
if (string.length > limit) {
string.split(" ").reduce((prevStringLength, curString) => {
if (prevStringLength + curString.length <= limit) {
newString.push(curString)
}
return prevStringLength + curString.length
}, 0)
return `${newString.join(" ")}...`
}
console.log(string)
return string;
}
const limitedString = limitString("Hello my name is John", 10);
console.log(limitedString)
Summere tall i en tabell
const numbers = [6, 12, 18, 3];
const sumNumbers = numbers.reduce((prevNum, curNum, curIndex, numbers) => {
return prevNum + curNum;
}, 0);
console.log(sumNumbers, "sumNumbers")
// result: 39 (sumNumbers)
Filter
Filter kan brukes til å filtrere vekk uønskede elementer fra en tabell, for eksempel tall som er lavere en et gitt nummer. Metoden filter oppretter en ny tabell, og den gamle tabellen forblir den samme.
const numbers = [2, 5, 11, 13, 14, 17, 19];
const filteredNumbers = numbers.filter((curNum, index, numbers) => {
return curNum >= 12;
})
console.log(filteredNumbers)
// Viser kun tall som er lik eller større enn 12
Spread operator
En spread operator (…) henter eksisterende tall eller tekst i en tabell og kopierer innholdet til en ny tabell.
const numbers = [1, 3, 4, 7]
const copiedNumbers = [...numbers]
numbers.push(9)
console.log(copiedNumbers)
// Returnerer [1, 3, 4, 7]
console.log(numbers)
// Returnerer [1, 3, 4, 7, 9]
Hvis man bruker spread operator til å kopiere en eksisterende tabell, vil den nye kopien ikke bli påvirket av senere endringer mot den opprinnelige tabellen. Derfor forblir copiedNumbers uendret når man legger til et nytt tall (9) i den opprinnelige tabellen.
sort() og reverse()
Hvis man har en tabell med navn vil man gjerne sortere de alfabetisk fra a-å. Da er sort() metoden nyttig.
const names = ['John', 'James', 'Roy', 'Andrew', 'Charles']
const sortedNames = names.sort()
console.log(sortedNames)
// Returnerer ['Andrew', 'Charles', 'James', 'John', 'Roy']
Enda mer populært er å sortere tall i stigende rekkefølge.
const numbers = [12, 2, 3, 14, 9, 6]
const numbersSorted = numbers.sort()
console.log(numbersSorted)
// Returnerer [12, 14, 2, 3, 6, 9]
Tilsynelatende sorteres ikke numrene etter størrelse. Dette er fordi sort() i utgangspunktet kun tar hensyn til det første tallet i hvert element.
For å sortere tallene korrekt må man oppgi en funksjon som sammenligner tallene
const numbersSorted = numbers.sort((a, b) => {
if (a > b) {
return 1
} else if (a === b) {
return 0
} else {
return -1
}
})
console.log(numbersSorted)
// Returnerer [2, 3, 6, 9, 12, 14]
For å sortere fra størst til minst, kan man ta utgangspunkt i numbersSorted, og bruke reverse() metoden på tabellen.
console.log(numbersSorted.reverse())
// Returnerer [14, 12, 9, 6, 3, 2]
Finne ut hvor et element befinner seg i en tabell med indexOf()
Hvis man vil finne ut hvilken index et element i en tabell befinner seg i, kan man benytte seg av indexOf(). Denne funksjonen returnerer indexen til elementet i tabellen. Indexen starter på 0 i tabeller i Javascript, og de fleste andre programmeringsspråk.
const names = ['John', 'James', 'Roy', 'Andrew', 'Charles']
console.log(names.indexOf("John"))
// Returnerer 0, altså indexen til John i tabellen names
console.log(names.indexOf("Charles"))
// Returnerer 4
Likeledes kan man starte bakfra og finne ut hvilken plass et element befinner seg på telt bakfra med lastIndexOf().
const names = ['John', 'James', 'Roy', 'Andrew', 'Charles']
console.log(names.lastIndexOf("John"))
// Returnerer 0
Finne elementer med find()
Med find() kan man finne elementer i en tabell basert på for eksempel en tekststreng.
const names = ['John', 'James', 'Roy', 'Andrew', 'Charles']
const roy = names.find((person, index, names) => {
return person === "Roy"
})
console.log(roy)
// Returnerer Roy
Man kan også finne elementer i en nøstet tabell.
const pets = [{name: "Barksalot"}, {name: "Fluffy"}]
const fluffy = pets.find((pet, index, pets) => {
return pet.name === "Fluffy"
})
console.log(fluffy)
// Returnerer {name: "Fluffy"}
Man kan finne indexen til et element i en tabell med findIndex()
const pets = [{name: "Barksalot"}, {name: "Fluffy"}]
const fluffy = pets.findIndex((pet, index, pets) => {
return pet.name === "Fluffy"
})
console.log(fluffy)
// Returnerer 1
