JavaScript Academy · Lektion

Iterationsmönster

Iterera över Map och Set med for...of; använd entries/keys/values; konvertera till arrayer; bygg små räknare och listor med unika värden.

Lektion 3 av 38 steg

Iterationsmönster är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 3 lektioner.

Översikt över iteration

Mål: Lär Er enkel och tydlig iteration.

  • Map: entries, keys, values
  • Set: values
  • Konvertera till arrayer
  • Frekvensräknare och unika listor
Iterationsmönster — illustration 1

Map: entries/keys/values

Använd for...of på en Map för att få [key, value]; keys() och values() finns också tillgängliga.

// Map iterates as [key, value] pairs
const prices = new Map();
prices.set("apple", 3);
prices.set("banana", 2);

for (const [item, cost] of prices) {
  console.log(item, cost);
}

// You can also use keys() or values()
for (const k of prices.keys()) {
  console.log("key:", k);
}
for (const v of prices.values()) {
  console.log("value:", v);
}
Iterationsmönster — illustration 2

Set: enkel loop

Set ger unika värden i insättningsordning; dubbletter ignoreras.

// Set iterates values in insertion order
const colors = new Set(["red", "green", "red", "blue"]);

for (const c of colors) {
  console.log("color:", c);
}

console.log("size:", colors.size);
Iterationsmönster — illustration 3

Konverteringar med Array.from

Använd Array.from för att omvandla Maps/Sets till arrayer (och par till en Map).

// Convert Map to array of pairs, and back
const map1 = new Map([["a", 1], ["b", 2]]);
const pairs = Array.from(map1); // [["a",1],["b",2]]
console.log("pairs:", pairs);

const map2 = new Map(pairs);
console.log("map2 has a?", map2.has("a"));

// Set to array of values
const set1 = new Set([1, 1, 2, 3]);
const arr = Array.from(set1); // [1,2,3]
console.log("arr:", arr);
Iterationsmönster — illustration 4

Frekvensräknare

En Map-räknare är ett tydligt sätt att räkna förekomster i en lista.

// Count items in an array using Map
function countItems(list) {
  const counts = new Map();
  for (const x of list) {
    const n = counts.get(x) || 0;
    counts.set(x, n + 1);
  }
  return counts;
}

const fruits = ["apple", "banana", "apple", "apple", "banana"];
const counts = countItems(fruits);

// Print counts as "item: n"
for (const [name, n] of counts) {
  console.log(name + ":", n);
}
Iterationsmönster — illustration 5

Unika värden och medlemskap

Använd Set för att skapa en unik lista och för snabba medlemskapskontroller med has.

// Unique values with Set, quick membership test
const numbers = [2, 3, 2, 4, 3, 5];
const unique = Array.from(new Set(numbers));
console.log("unique:", unique);

// Quick membership with Set.has
const allowed = new Set([2, 5]);
console.log("allowed has 2?", allowed.has(2));
console.log("allowed has 4?", allowed.has(4));
Iterationsmönster — illustration 6

Quiz om Map-iteration

Snabb kontroll: Bästa Map-loopen för nyckel och värde.

Iterationsmönster — illustration 7

Sammanfattning

Sammanfattning: Iterera över Map med for...of för att få [key, value], loopa direkt över värden i Set och konvertera med Array.from. Använd en Map för räkneverk och en Set för unika listor.

Iterationsmönster — illustration 8
Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
59
Lektioner
200

Vanliga frågor

Är lektionen ”Iterationsmönster” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Iterationsmönster”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 3 lektioner.

Vad lär jag mig i ”Iterationsmönster”?

Iterera över Map och Set med for...of; använd entries/keys/values; konvertera till arrayer; bygg små räknare och listor med unika värden. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 3.

Hur lång tid tar lektionen ”Iterationsmönster”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Grunderna i Map och Set
  2. WeakMap och WeakSet — enkel integritet och cachning
  3. Iterationsmönster
← Tillbaka till JavaScript Academy