Salam og yosh!
Og denne uken vil jeg snakke om noe kjernen om Javascript. Noe du ikke kan unnslippe, alltid bry deg på slutten av tanken når du koder, unngå dem er ikke et alternativ. Og det er datastrukturer. Ja, det grunnleggende om datastrukturer, men vi fokuserer på én ting - [array].
Du vil alltid forholde deg til matriser. Før eller siden vil det hjemsøke tankene dine. Hvilken metode bør jeg bruke? Hvordan administrere arrays? Hvordan fungerer array?
I Javascript-verdenen er en array faktisk et objekt, med muligheten til å løkke innenfor array-elementene, siden indeksen er ordnet deretter, slik at sløyfen vil gå gjennom indekssekvensen. Starter fra 0. Vent, starter fra 0?
Array
Et objekt med number som en indeks. Merk at det er slik matrisen fungerer i Javascript, og ikke helt aktuelt for andre språk som Python og andre.
Med et tall som indeks er det mulig å følge sekvensen, med start fra 0. Ettersom bit starter med 0, er det grunnen til at matrisen starter med 0 og ikke 1. Fordi indeksen er ordnet i rekkefølge, er det mulig å sløyfe hvert element i en matrise.
Det er mange metoder som kan brukes til å gå gjennom en matrise, der hver av dem tjener et bestemt formål, enten den modifiserer matrisen direkte, eller returnerer en ny matrise eller en verdi.
Den normale sløyfen
Selvfølgelig har Javascript løkker som andre språk har, og de er for , while og do...while .
for(let i = 0; i < 10; i++) {
// This loop will execute 10 times
}
let j = 0;
while (j < 10) {
// Same here
j++;
}
let k = 0;
do {
// Just the same, except the checking happens
// after execution, opposite to `for` and `while` loop
k++;
} while(k < 0);
Selvfølgelig er det ingenting galt med den vanlige løkkemetoden. Vel, vent til du håndterer matrisen. Men her er en god ting med array. Hver matrise har sin egen lengde ved å gå til array.length . Hvorfor ikke bruke denne informasjonen for loopen?
for For Array
For det første trinnet er det en for loop som er spesifikt for array, og det er for...of .
const fruits = ['Durian', 'Rambutan', 'Nangka'];
for(let fruit of fruits) {
console.log(fruit);
}
/* The output should be:
Durian
Rambutan
Nangka
*/
For ikke å forveksle, at det faktisk er en lignende sløyfe til denne, som er for...in som egentlig mente for et objekt i stedet og ikke array (ja, jeg vet at array også objekter i Javascript, men sånn fungerer det!).
const user = { fname: "Atif", lname: "Aiman", nname: "al-Serembani" };
for(let key in user) {
console.log(user[key]);
}
/* The output should be:
Atif
Aiman
al-Serembani
*/
For a Better Loop - Array Methods!
Vel, det er kult at vi har for...of å gå gjennom en matrise, men det er en kulere måte å gå gjennom, og det er å bruke matrisemetoder! Det er tonnevis, men med sine egne formål. De er:
forEachmapreduceogreduceRightfilterfindogfindIndexsomeogeverysortflatMap
Siden de er metoder, er ikke bruken som mønsteret vi brukte før, men lenket med selve matrisen.
La oss lære om dem én etter én, skal vi?
array.forEach
forEach er akkurat som vår vanlige for...of Løkke. Den gir ikke noe , og endret ikke den eksisterende matrisen .
const fruits = ['Durian', 'Rambutan', 'Nangka'];
fruits.forEach((fruit) => {
console.log(fruit);
}
/* The output should be:
Durian
Rambutan
Nangka
*/
For å forklare litt (vil oppføre seg på samme måte på tvers av array-metoder senere), går vi gjennom fruits array med forEach , og vi sender fruit for pekeren som holder elementet for hvert matriseelement. Derfra kan du gjøre hva som helst med hvert element.
Siden forEach returnerte ingen verdi, det betyr at eksemplet nedenfor ikke fungerer.
const result = fruits.forEach((fruit) => { return fruit + ' juice' });
console.log(result); // undefined
Og forEach endret ikke den eksisterende matrisen. Dette betyr at verdien fortsatt vil være den samme.
array.map
array.map vil gå gjennom matrisen, og deretter returnere samme lengde på matrise med endret innhold . Den endrer ikke den opprinnelige matrisen selv om.
const fruits = ['Durian', 'Rambutan', 'Nangka'];
const juices = fruits.map((fruit) => {
fruit.press();
});
console.log(juices);
// ['Durian juice', 'Rambutan juice', 'Nangka juice'];
Som du la merke til, vil jeg gjøre disse fruktene om til juice, så jeg presser hver frukt og senere får jeg en rekke juice i retur. Vel, durianjuice er virkelig rart, men ville du våget å prøve?
array.reduce og array.reduceRight
array.reduce vil gå gjennom matrisen, og behandle alt, i retur av en enkelt verdi . Annerledes med array.map som returnerer samme lengde av matrisen til målmatrisen. Og fortsatt ikke endre den originale matrisen.
const fruits = ['Durian', 'Rambutan', 'Nangka'];
const salad = fruits.reduce((product, fruit) => {
return product + fruit.slice();
});
console.log(salad);
// DuRamNa Salad;
Det jeg gjorde her, skjærer jeg hver frukt som finnes, og blandes med produktet etter hvert som det samler seg, og til slutt vil de oppskårne fruktene blandes sammen som en salat. Durian innesalat? Tenk om igjen!
Så hvor ser du vanligvis reduce i aksjon? Et virkelig grunnleggende eksempel fra den virkelige verden vil være sum!
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum = numbers.reduce((total, number) => {
return total + number;
});
console.log(sum); // 55
Så, hva om du vil gjøre omvendt? I stedet for å starte fra 0, vil du starte fra det siste elementet? I det tilfellet bruker vi array.reduceRight ! Den samme måten å skrive på, bortsett fra den, vil starte fra den siste indeksen til matrisen.
array.filter
array.filter vil gå gjennom matrisen og filtrere bare når den samsvarer med betingelsen, eller hvis den returnerer sann . Den returnerte matrisen vil være basert på det filtrerte resultatet , og den endret ikke den opprinnelige verdien.
const fruits = ['Durian', 'Rambutan', 'Nangka'];
const bigFruits = fruits.filter((fruit) => {
return fruit.isBig();
});
console.log(bigFruits); // ['Durian', 'Nangka']
Jeg vil vite hvilken som er den store frukten. Så jeg sjekker størrelsen på hver frukt, og jeg får en rekke store frukter i retur. Og nå vet jeg hvilken som er stor, og selvfølgelig, Durian, fruktens konge er en av dem!
array.find og array.findIndex
array.find vil gå gjennom matrisen, og bare returnere én verdi som er den første forekomsten som samsvarer med betingelsen . I motsetning til array.filter som returnerer alt som samsvarer med betingelsen.
const fruits = ['Durian', 'Rambutan', 'Nangka'];
const bigFruit = fruits.find((fruit) => {
return fruit.isBig();
});
console.log(bigFruit); // Durian
Durian er den første frukten i matrisen som er stor. Hvis durian ikke eksisterer, vil nangka være den neste i køen for den store frukten.
Så, hva om jeg ikke vil vite hvilken frukt som er stor, i stedet vil jeg vite posisjonen inne i matrisen? Deretter array.findIndex vil være en passende metode for deg!
const fruits = ['Durian', 'Rambutan', 'Nangka'];
const bigFruit = fruits.findIndex((fruit) => {
return fruit.isBig();
});
console.log(bigFruit); // 0
Så, hva om vi ikke kan finne noe i en matrise som samsvarer med betingelsen? Deretter vil den returnere undefined for array.find og -1 for array.findIndex !
array.some og array.every
array.some og array.every vil gå gjennom matrisen, og sjekke om den samsvarer med betingelsen. Dette er også mulig ved å bruke array.reduce som returnerer en enkelt verdi, array.some vil returnere true hvis noen av elementene samsvarer med betingelsen, mens array.every vil returnere sant hvis alle elementene samsvarer med betingelsen. Begge vil returnere en boolsk verdi på slutten av dagen.
const fruits = ['Durian', 'Rambutan', 'Nangka'];
const hasSmallFruit = fruits.some((fruit) => {
return fruit.isSmall();
});
console.log(hasSmallFruit); // true
const everthingBig = fruits.every((fruit) => {
return fruit.isBig();
});
console.log(everythingBig); // false
Jeg vil sjekke om noe av frukten er liten. Siden rambutan er liten, vil den returnere sann. Og senere vil jeg sjekke om alt er stort. Vel, jeg trenger kanskje en lastebil hvis alt er stort!
array.sort
array.sort vil gå gjennom matrisen og sortere basert på tilstanden. Og selvfølgelig vil returmatrisen ha samme lengde, med det modifiserte arrangementet.
const fruits = ['Durian', 'Rambutan', 'Nangka'];
const sortedFruit = fruits.sort((fruitA, fruitB) => {
if (fruitA > fruitB) return 1;
else if (fruitA < fruitB) return -1;
else return 0;
});
console.log(sortedFruit); // ['Nangka', 'Durian', 'Rambutan']
Her vil jeg sortere frukt basert på størrelse. Under loopen vil det ta 2 parametere, den første frukten fruitA og den andre frukten fruitB . Det kan være hvilket som helst første og hvilket som helst sekund, det vil bli administrert av sorteringsfunksjonen. Senere sammenligner jeg dem direkte for å se hvilken som er den største av alle fruktene i dette landet.
Hvis den returnerer et positivt tall, vil den sette den første frukten foran.
Hvis den returnerer et negativt tall, vil den sette den første frukten bakerst.
Hvis den returnerer 0, blir den bare satt som den er, siden omorganisering av dem uansett ikke spiller noen rolle.
Som et resultat, nå vet jeg, selv durian er kongen av frukt, det er fortsatt større frukt som er nangka, så durian bør ikke føles for overlegen skjønt.
Så, hva med å gjøre omvendt sortering? Bare endre fra positiv avkastning til negativ avkastning, og det er det! Du får omvendt sortering!
En annen ting. Finnes det en standard sorteringsmetode, så jeg trenger ikke sende en funksjon for å sortere den? Selvfølgelig kan du! De vil bli sortert basert på leksigrafisk rekkefølge. Med det andre ordet, a-z vil komme ut først og A-Z vil følge senere. Det samme gjelder tallene, der alle vil bli behandlet som om de er strenge. Sorterer [1, 2, 5, 10, 15, 20, 50] vil resultere til [1, 10, 15, 2, 20, 5, 50] .
const fruits = ['Durian', 'Rambutan', 'Nangka'];
const sortedFruit = fruits.sort();
console.log(sortedFruit); // ['Durian', 'Nangka', 'Rambutan']
array.flatMap
Vel, det fungerer faktisk på samme måte med array.map før, bortsett fra at vi har å gjøre med nestede matriser.
Faktisk er det en matrisemetode kalt array.flat , der den endres fra den nestede matrisen (eller ikke-enkeltdimensjonsmatrise) og flatt alt til bare éndimensjonsmatrise. Det er ikke en løkkemetode, så det er derfor jeg ikke listet det ned.
Kombiner kraften til array.flat og array.map , er resultatet array.flatMap , hvor den returnerer en ny lengde av den flate matrisen.
Det er omtrent det!
Dette er array-metoder du kan bruke i Javascript. Den samsvarer med ES2020-syntaksen, så du er velkommen til å bruke den.
Vær oppmerksom på at alle løkkematrisemetodene ikke endret den opprinnelige matrisen , så du trenger ikke å bekymre deg. Det vil returnere en ny verdi til deres respektive returmetode.
Fantastisk, nå vet du grunnleggende ting om array loop-metoder! Vel, bare hvis datastrukturen er enkel altså! Hva om du har å gjøre med en nestet matrise eller objekter inne i matriser? Bare øvelse vil avsløre alt for deg. Likevel må du fortsatt bruke disse metodene. Hvor kompleks kan du gjøre loopen din?
Ok folkens! Det var det for denne uken, og følg med! Til neste gang, fred være med deg!