Articles
Introduktion till JavaScript
Bästa metoderna för iteration i JavaScript

Bästa metoderna för iteration i JavaScript

Denna artikel förklarar de bästa metoderna för iteration i JavaScript.

YouTube Video

Bästa metoderna för iteration i JavaScript

I JavaScript är det vanligt att använda for-loopar för iteration. Här kommer vi att ge en detaljerad förklaring av de bästa metoderna för att använda for-loopar för att skriva effektiv och läsbar kod.

Välj rätt loop-struktur

JavaScript erbjuder flera loop-strukturer, var och en anpassad för olika ändamål.

 1// Example of a for loop
 2for (let i = 0; i < 5; i++) {
 3    console.log(i);
 4}
 5
 6// Example of a for...of loop
 7const array = [10, 20, 30];
 8for (const value of array) {
 9    console.log(value);
10}
11
12// Example of a for...in loop
13const obj = { a: 1, b: 2, c: 3 };
14for (const key in obj) {
15    console.log(`${key}: ${obj[key]}`);
16}
17
18// Example of a while loop
19let count = 0;
20while (count < 5) {
21    console.log(count);
22    count++;
23}
  • for-satsen är lämplig när antalet iterationer är förutbestämt.
  • for...of-satsen är lämplig för att kortfattat bearbeta arrayer och itererbara objekt.
  • for...in-satsen används för att iterera igenom ett objekts egenskaper. Dock är den inte lämplig för arrayer.
  • while-satsen och do...while-satsen används för att styra loopar baserat på villkor.

Användning av forEach-metoden och for...of-satsen.

När man loopar genom en array är det vanligt att använda en for-sats för att komma åt indexet, men forEach-metoden eller for...of-satsen kan vara mer lättläst.

 1// Using a standard for loop
 2const array = ["apple", "banana", "cherry"];
 3for (let i = 0; i < array.length; i++) {
 4    console.log(array[i]);
 5}
 6
 7// Using forEach
 8array.forEach(item => console.log(item));
 9
10// Using for...of
11for (const item of array) {
12    console.log(item);
13}
  • for-satsen möjliggör explicit indexhantering under iteration.
  • forEach-metoden använder en callback-funktion för att bearbeta varje element kortfattat.
  • for...of-satsen är mycket lättläst och möjliggör direkt åtkomst till varje element i en array.

Optimera loopvillkor

Eftersom loopvillkoret utvärderas upprepade gånger kan undvikande av onödiga beräkningar förbättra prestandan.

 1const names = ["Alice", "Bob", "Charlie"];
 2const scores = [85, 92, 78];
 3
 4// Inefficient example
 5for (let i = 0; i < Math.min(names.length, scores.length); i++) {
 6    console.log(`${names[i]} scored ${scores[i]}`);
 7}
 8
 9// Efficient example
10for (let i = 0, len = Math.min(names.length, scores.length); i < len; i++) {
11    console.log(`${names[i]} scored ${scores[i]}`);
12}
  • Som visas i detta exempel kan lagring av beräkningsresultatet i en variabel i förväg möjliggöra en mer effektiv loopkörning.
 1const scores = [85, 92, 78];
 2let sum = 0;
 3let sum2 = 0;
 4
 5// Inefficient example
 6for (let i = 0; i < scores.length; i++) {
 7    sum += scores[i];
 8}
 9console.log(`Total score : ${sum}`);
10
11// Efficient example
12for (let i = scores.length - 1; i >= 0; i--) {
13    sum2 += scores[i];
14}
15console.log(`Total score : ${sum2}`);
  • Som visas i detta exempel kan det ibland vara mer effektivt att vända på villkoret.

Optimera loopbearbetning

Eftersom loopbearbetning utförs upprepade gånger kan undvikande av onödiga beräkningar förbättra prestandan.

 1const array = ["apple", "banana", "cherry"];
 2
 3// Inefficient example
 4for (let i = 0; i < 100; i++) {
 5    const element = document.querySelector("#myElement");
 6    element.textContent = `Count: ${i}`;
 7}
 8
 9// Efficient example
10const element = document.querySelector("#myElement");
11for (let i = 0; i < 100; i++) {
12    element.textContent = `Count: ${i}`;
13}
  • I det här exemplet elimineras onödiga upprepade beräkningar genom att flytta querySelector-metoden utanför loopen.

Var medveten om variablers räckvidd

Använd let eller const för att säkerställa att variablerna inuti loopen har lämplig räckvidd. Eftersom var är begränsad till funktionsräckvidd kan det orsaka oväntat beteende.

 1// Using let
 2for (let i = 0; i < 3; i++) {
 3    console.log(i);
 4}
 5
 6// Potential issue with var
 7for (var i = 0; i < 3; i++) {
 8    setTimeout(() => console.log(i), 1000); // 3, 3, 3
 9}
10
11// Using let to avoid the issue
12for (let i = 0; i < 3; i++) {
13    setTimeout(() => console.log(i), 1000); // 0, 1, 2
14}
  • var har funktionsomfattning, så efter loopen är i 3, och alla funktioner som körs av setTimeout returnerar 3.
  • Med hjälp av let hänvisar i inuti setTimeout-återanropsfunktionen till ett nytt värde för varje iteration, så 0, 1, 2 returneras som förväntat.

Förbättra läsbarheten med tidiga avbrott

För att förenkla loophanteringen, använd break och continue på ett lämpligt sätt för att förbättra läsbarheten.

 1// Example using break
 2for (let i = 0; i < 10; i++) {
 3    if (i === 5) {
 4        break; // Exit the loop
 5    }
 6    console.log(i);
 7}
 8
 9// Example using continue
10for (let i = 0; i < 10; i++) {
11    if (i % 2 === 0) {
12        continue; // Skip to the next iteration
13    }
14    console.log(i);
15}
  • Genom att använda break kan du avsluta loopens bearbetning i förtid och hoppa över alla efterföljande iterationer.
  • Med continue kan du hoppa över den aktuella loop-bearbetningen och gå vidare till nästa iteration.

Undvik djupa inbäddningar

Djup inbäddning gör koden svårare att läsa, så sträva efter att hålla inbäddningen ytlig genom att använda tidiga återvändningar eller genom att dela upp funktionalitet i funktioner.

 1// Deeply nested example
 2for (let i = 0; i < 5; i++) {
 3    for (let j = 0; j < 5; j++) {
 4        if (i + j > 5) {
 5            console.log(i, j);
 6        }
 7    }
 8}
 9
10// Improved using function decomposition
11function processPairs(i) {
12    for (let j = 0; j < 5; j++) {
13        if (i + j > 5) {
14            console.log(i, j);
15        }
16    }
17}
18
19for (let i = 0; i < 5; i++) {
20    processPairs(i);
21}
  • I det här exemplet används funktioner för att minska inbäddning.

Överväg felhantering

Om det finns en möjlighet att fel kan uppstå i loopen, implementera korrekt felhantering.

 1const data = ["123", "abc", "456", "xyz"];
 2
 3// Without Error Handling
 4for (const item of data) {
 5    const result = parseInt(item);
 6    console.log(`Parsed value: ${result}`);
 7}
 8
 9// With Error Handling
10for (const item of data) {
11    try {
12        const result = parseInt(item);
13        if (isNaN(result)) {
14            throw new Error(`Invalid number: ${item}`);
15        }
16        console.log(`Parsed value: ${result}`);
17    } catch (error) {
18        console.error(`Error processing item: ${item}. ${error.message}`);
19    }
20}
  • I det här exemplet utförs felhantering för att bearbeta ogiltiga data, upptäcka och rapportera problem.

Punkter att notera vid asynkron bearbetning

Vid hantering av asynkron bearbetning i loopar kan användning av async/await resultera i kortfattad och intuitiv kod.

 1const urls = ["https://example.com/1", "https://example.com/2"];
 2
 3// Proper handling of asynchronous operations
 4async function fetchUrls() {
 5    for (const url of urls) {
 6        const response = await fetch(url);
 7        const data = await response.json();
 8        console.log(data);
 9    }
10}
11
12fetchUrls();
  • Den här koden hämtar URL:er asynkront från urls-arrayen en efter en och bearbetar resultaten i JSON-format. Användning av async/await förenklar asynkrona operationer genom att sekventiellt hämta data för varje URL och skriva ut det till konsolen.

Förstå skillnaden mellan for...of-satsen och forEach() vid asynkron bearbetning 

 1async function asyncTask(num) {
 2    return new Promise(resolve => {
 3        setTimeout(() => {
 4            console.log(`Task ${num} done`);
 5            resolve();
 6        }, 100);
 7    });
 8}
 9
10async function runWithForOf() {
11    console.log("Start for...of");
12    for (const num of [1, 2, 3]) {
13        await asyncTask(num);
14    }
15    console.log("End for...of");
16}
17
18async function runWithForEach() {
19    console.log("Start forEach");
20    [1, 2, 3].forEach(async num => {
21        await asyncTask(num);
22    });
23    console.log("End forEach");
24}
25
26async function executeExamples() {
27    await runWithForOf();
28    await runWithForEach();
29}
30
31executeExamples();

  • När du hanterar asynkron bearbetning i loopar, notera skillnaderna i beteende, vilket visas i detta exempel, mellan att använda for...of med async/await och att använda forEach().

  • Med for...of exekveras koden sekventiellt och väntar vid await inuti loopen innan den fortsätter till nästa iteration. Å andra sidan exekverar forEach() bearbetningen parallellt.

Slutsats

for-satsen i JavaScript är ett enkelt men kraftfullt verktyg. Genom att använda de bästa metoderna som introducerats här kan du skriva effektiv och mycket läsbar kod. Var uppmärksam på att välja lämpliga loopkonstruktioner, hantering av scope, felhantering och sträva efter mycket underhållbar kod.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Repetition i JavaScript`truthy` och `falsy` i JavaScript