Articles
Introduktion til JavaScript
Bedste praksis for iteration i JavaScript

Bedste praksis for iteration i JavaScript

Denne artikel forklarer de bedste praksisser for iteration i JavaScript.

YouTube Video

Bedste praksis for iteration i JavaScript

I JavaScript er det almindeligt at bruge for-løkker til iteration. Her vil vi give en detaljeret forklaring af de bedste praksisser for at bruge for-løkker til at skrive effektiv og læsbar kode.

Vælg den rigtige løkkestruktur

JavaScript tilbyder flere forskellige løkkekonstruktioner, der hver især er velegnede til forskellige formå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-sætningen er velegnet, når antallet af iterationer er forudbestemt.
  • for...of-sætningen er velegnet til kortfattet behandling af arrays og iterable objekter.
  • for...in-sætningen bruges til at iterere over et objekts egenskaber. Dog er den ikke velegnet til arrays.
  • while-sætningen og do...while-sætningen bruges til at styre løkker baseret på betingelser.

Udnyttelse af forEach-metoden og for...of-sætningen.

Når man looper gennem et array, er det almindeligt at bruge en for-sætning til at få adgang til indekset, men forEach-metoden eller for...of-sætningen kan være mere læsbar.

 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-sætningen tillader eksplicit styring af indekset under iteration.
  • forEach-metoden bruger en callback-funktion til kortfattet at behandle hvert element.
  • for...of-sætningen er meget læsbar og giver direkte adgang til hvert element i et array.

Optimer løkkens betingelser

Da løkkens betingelse evalueres gentagne gange, kan det forbedre ydeevnen at undgå unødvendige beregninger.

 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 vist i dette eksempel, muliggør det mere effektiv loop-udførelse at gemme beregningsresultatet i en variabel på forhånd.
 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 vist i dette eksempel, kan omvendelse af betingelsen nogle gange være mere effektivt.

Optimering af loop-behandling

Da loop-behandling udføres gentagne gange, kan undgåelse af unødvendige beregninger forbedre ydeevnen.

 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 dette eksempel elimineres unødvendige gentagne beregninger ved at flytte querySelector-metoden uden for løkken.

Vær opmærksom på variablernes omfang

Brug let eller const for at sikre, at variabler i løkken har passende omfang. Da var er begrænset til funktionsomfang, kan det forårsage uventet adfærd.

 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 funktionsscope, så efter løkken er i 3, og alle funktioner udført af setTimeout returnerer 3.
  • Ved at bruge let refererer i inde i setTimeout-callback-funktionen til en ny værdi for hver iteration, så 0, 1, 2 returneres som forventet.

Forbedr læsbarheden med tidlige afslutninger

For at forenkle løkkens behandling skal du bruge break og continue på passende måde for at forbedre læsbarheden.

 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}
  • Ved at bruge break kan du afbryde loop-behandlingen midtvejs og springe alle efterfølgende iterationer over.
  • Ved at bruge continue kan du springe den nuværende loop-proces over og gå videre til næste iteration.

Undgå dyb indlejringer

Dyb indlejring gør koden sværere at læse, så stræb efter at holde indlejringen lav ved at bruge tidlige returneringer eller opdele funktionaliteten 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 dette eksempel bruges funktioner til at reducere indlejring.

Overvej fejlbehandling

Hvis der er mulighed for fejl i løkken, implementer korrekt fejlbehandling.

 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 dette eksempel udføres fejlhåndtering for at behandle ugyldige data, opdage og rapportere problemer.

Punkter at bemærke ved asynkron behandling

Når der håndteres asynkron behandling i løkker, kan brug af async/await resultere i kortfattet og intuitiv kode.

 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();
  • Denne kode henter asynkront URL'er fra urls-arrayet én efter én og behandler resultaterne i JSON-format. Ved at bruge async/await forenkles asynkrone operationer, og data for hver URL hentes sekventielt og sendes til konsollen.

Forstå forskellen mellem for...of-sætningen og forEach() i asynkron behandling. 

 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 håndterer asynkron behandling i løkker, skal du bemærke forskellene i adfærd, som vist i dette eksempel, mellem at bruge for...of med async/await og at bruge forEach().

  • Med for...of udføres koden sekventielt og venter ved await inde i løkken, før den fortsætter til næste iteration. På den anden side udfører forEach() behandlingen parallelt.

Konklusion

for-sætningen i JavaScript er et simpelt, men kraftfuldt værktøj. Ved at udnytte de her introducerede bedste praksisser kan du skrive effektiv og meget læsbar kode. Vær opmærksom på at vælge passende løkkestrukturer, håndtere scope, fejlhåndtering og sigt mod meget vedligeholdelsesvenlig kode.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Gentagelsesbehandling i JavaScript`truthy` og `falsy` i JavaScript