Iterera över objekt i en matris med hjälp av loopar

  • 4 minuter

Så du har en matris, nu vad? Du kan använda loopar för att utföra iterationer på varje objekt i matrisen. Du kan utföra åtgärder som att skriva ut varje objekt, summera det eller hitta specifika objekt med ett villkor.

Om loopar

Loopar möjliggör repetitiva eller iterativa uppgifter, och de kan spara mycket tid och kod. En iteration kan variera i dess variabler, värden och villkor. Det finns olika typer av loopar i JavaScript, var och en med sina små skillnader. Men alla gör i princip samma sak: de loopar över data.

For Loopar

En for loop kräver tre delar för att iterera:

  • Räknare: En variabel som vanligtvis initieras med ett tal som räknar antalet iterationer. Här är ett exempel:

    let i = 0;

    Vanligtvis använder du det här värdet som den första position som du vill komma åt i en matris.

  • Villkor: Ett uttryck som använder jämförelseoperatorer för att få loopen att stoppas när false. Här är ett exempel på ett villkor som stoppas när matrisen är slut på index:

    i < 10;

    I det här exemplet är uttrycket falskt när i det är arry.lengthlika med . Om du loopar genom en matris är det det du vill ha. Du vill inte adressera ett index utanför matrisgränsen.

  • Inkrementellt uttryck: Ett uttryck som körs i slutet av varje iteration, vanligtvis för att ändra räknarvärdet. Du kan öka så mycket du vill per iteration, men det är vanligt att öka med en, som du ser i det här exemplet:

    i++;
i +=2; // this would work too and increases by 2

När de tre delarna används tillsammans kan en for loop se ut så här:

for (let i = 0; i < 10; i++ ) {
  console.log(i);
}

Dricks

Kör den här koden i en webbläsarkonsol. Vad händer när du gör små ändringar i räknaren, villkoret eller inkrementsuttrycket? Kan du få den att gå bakåt och skapa en nedräkning?

While Loopar

Till skillnad från loopen for kräver en while loop ett villkor som stoppar loopen endast när uttrycket i loopen while utvärderas till false.

Villkor i loopar förlitar sig vanligtvis på andra värden, till exempel räknare, och de måste hanteras under loopen.

Startvärden för räknare måste skapas utanför loopen, och alla uttryck för att uppfylla ett villkor, inklusive att ändra räknaren, måste underhållas i loopen. I följande exempel körs loopen while för 10 iterationer.

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

Kommentar

Varför skulle du välja antingen en for loop eller en while loop? På StackOverflow hade 17 000 tittare samma fråga, och några av åsikterna kan vara intressanta för dig.

Matriser används ofta med loopar eftersom de flesta villkor kräver matrisens längd för att stoppa loopen, och indexet kan också vara räknarvärdet.

Loopar och matriser

Låt oss gå tillbaka till din lista över läckra glass smaker. En kund har bett dig att namnge alla smaker du säljer innan de bestämmer vad de ska köpa. Lyckligtvis vet du om for slingor, så gå vidare och använd en. Kom ihåg att du har definierat ett villkor för när listan ska avslutas, så här:

i < 10

Tja, din matris med glass smaker har en godtycklig längd, vilket innebär att du kan ta bort eller lägga till objekt till det när som helst. Du vet att du har sex typer av glass, men du kan använda fältet length på matrisen och förlita dig på det istället:

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Neapolitan", "Mint Chip"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} // Ends when all flavors are printed

Där har du den. Du har listat alla smaker, och din kund har valt "Vanilj". Vilken smak skulle du välja?

Loopen forEach()

Hittills har du lärt dig om for looparna och while . Det finns en annan loop i själva matrisen som heter forEach(). Loopen forEach() itererar över objekten och erbjuder ett förenklat sätt att loopa, eftersom du inte behöver en räknare om allt du vill göra är loop. Till exempel:

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => console.log(number)); // 1 2 3 4 5

Om du vill ha åtkomst till det aktuella indexet kan du också ha det genom att ändra föregående kod något till följande:

numbers.forEach((number, index) => console.log(`Number ${number} ${index}`));

När du ska använda vilken loopkonstruktion

Med for looparna och forEach() kan du både loopa över matrisens objekt, men skillnaden mellan dem är att du kan avsluta loopen for om ett visst villkor uppfylls.

Ta följande kod som exempel:

let numbers = [1, 2, -1, 4, 5];
for(let i = 0; i< numbers.length; i++>) {
  if (numbers[i] < 0) {
    break;
  }
  console.log(numbers[i]);
}

Om du lägger till break stoppas loopen vid ett negativt objekt. Loopen forEach() kan inte göra det.

Dricks

Experimentera med att loopa över en egen matris i webbläsarens konsol. Om du vill utmana dig själv finns det andra sätt att loopa över andra matriser än for och while loopar. Det finns forEach, for-ofoch map loopar. Prova att skriva om matrisslingan med någon av dessa tekniker.