Articles
Introduksjon til JavaScript
Beste praksis for iterasjon i JavaScript

Beste praksis for iterasjon i JavaScript

Denne artikkelen forklarer de beste praksisene for iterasjon i JavaScript.

YouTube Video

Beste praksis for iterasjon i JavaScript

I JavaScript er det vanlig å bruke for-løkker for iterasjon. Her gir vi en detaljert forklaring av beste praksis for å bruke for-løkker til å skrive effektiv og lesbar kode.

Velg riktig løkkestruktur

JavaScript tilbyr flere løkkestrukturer, hver egnet for ulike 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-setningen er egnet når antall iterasjoner er forhåndsbestemt.
  • for...of-setningen er egnet for enkel behandling av arrays og itererbare objekter.
  • for...in-setningen brukes til å iterere gjennom et objekts egenskaper. Men den er ikke egnet for matriser.
  • while-setningen og do...while-setningen brukes til å kontrollere løkker basert på betingelser.

Bruke forEach-metoden og for...of-setningen.

Når du itererer gjennom et array, er det vanlig å bruke en for-setning for å få tilgang til indeksen, men forEach-metoden eller for...of-setningen kan være mer leselig.

 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-setningen tillater eksplisitt håndtering av indeks under iterasjon.
  • forEach-metoden bruker en tilbakeringingsfunksjon for å behandle hvert element på en enkel måte.
  • for...of-setningen er svært lett å lese og gir direkte tilgang til hvert element i et array.

Optimaliser løkkens betingelser

Siden løkkebetingelsen evalueres gjentatte ganger, kan unngåelse av unødvendige beregninger forbedre ytelsen.

 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 eksempelet, gjør det lagring av beregningsresultatet i en variabel på forhånd mulig med mer effektiv løkkeutførelse.
 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 eksempelet, kan det noen ganger være mer effektivt å reversere betingelsen.

Optimalisering av løkkebehandling

Siden løkkebehandling utføres gjentatte ganger, kan unngåelse av unødvendige beregninger forbedre ytelsen.

 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 eksemplet elimineres unødvendige gjentatte beregninger ved å flytte querySelector-metoden utenfor løkken.

Vær oppmerksom på omfang

Bruk let eller const for å sikre at variablene inni løkken har riktig omfang. Siden var er begrenset til funksjonsomfang, kan det føre til uventet oppførsel.

 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 funksjonsomfang, så etter løkken er i 3, og alle funksjoner utført av setTimeout returnerer 3.
  • Ved å bruke let refererer i inne i setTimeout-tilbakekallingsfunksjonen til en ny verdi for hver løkke, så 0, 1, 2 skrives ut som forventet.

Forbedre lesbarheten med tidlige utganger

For å forenkle løkkeprosesseringen, bruk break og continue på riktig måte for å forbedre lesbarheten.

 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 bruk av break kan du avslutte løkkebehandlingen midtveis og hoppe over alle påfølgende iterasjoner.
  • Ved bruk av continue kan du hoppe over den nåværende løkkebehandlingen og gå videre til neste iterasjon.

Unngå dype nestingstrukturer

Dype nestingstrukturer gjør koden vanskeligere å lese, så det er best å holde nesting grunn ved å bruke tidlige returpunkter eller dele funksjonalitet i funksjoner.

 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 eksemplet brukes funksjoner for å redusere nøsting.

Vurder feilhåndtering

Hvis det er en mulighet for feil i løkken, implementer riktig feilhåndtering.

 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 eksemplet utføres feilhåndtering for å behandle ugyldige data, oppdage og rapportere problemer.

Punkter å merke seg i asynkron behandling

Når du håndterer asynkron behandling i løkker, kan bruk av async/await føre til 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 koden henter asynkront URL-er fra urls-matrisen én etter én og behandler resultatene i JSON-format. Bruk av async/await forenkler asynkrone operasjoner, henter data sekvensielt for hver URL og skriver det ut til konsollen.

Forstå forskjellen mellom for...of-setningen 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, legg merke til forskjellene i oppførsel, som vist i dette eksempelet, mellom å bruke for...of med async/await og å bruke forEach().

  • Med for...of utføres koden sekvensielt og venter på await inne i løkken før den fortsetter til neste iterasjon. På den andre siden utfører forEach() behandlingen parallelt.

Konklusjon

for-settningen i JavaScript er et enkelt, men kraftig verktøy. Ved å bruke de beste praksisene som er introdusert her, kan du skrive effektiv og svært lesbar kode. Legg merke til valg av passende løkkekonstruksjoner, håndtering av omfang, feilhåndtering, og streb etter svært vedlikeholdbar kode.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Repetisjonshåndtering i JavaScript`truthy` og `falsy` i JavaScript