map och filter — grunderna
Omforma och välj data med map och filter; kedja dem och undvik mutationer för säkrare kod.
map och filter — grunderna är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 2. 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 2 lektioner.
Introduktion till map och filter
Mål: Omvandla element med map och välja element med filter.
- map: omvandla
- filter: välja
- Kedja map → filter
- Utan ändringar
Grunderna i map
map tillämpar en funktion på varje element och returnerar en ny array (med samma längd).
// map transforms each value and returns a new array
const nums = [1, 2, 3];
const doubled = nums.map(function (n) {
return n * 2;
});
console.log("nums:", nums);
console.log("doubled:", doubled);
Grunderna i filter
filter returnerar endast de element där callback-funktionen returnerar true (längden kan ändras).
// filter keeps values that pass the test
const values = [1, 2, 3, 4, 5];
const evens = values.filter(function (n) {
return n % 2 === 0;
});
console.log("values:", values);
console.log("evens:", evens);
Exempel på kedjning
Kombinera stegen: använd map för att omvandla och sedan filter för att välja.
// Chain methods for clarity
const prices = [4, 7, 10];
// First add tax, then keep items over 8
const withTax = prices.map(function (p) {
return p * 1.1;
});
const expensive = withTax.filter(function (p) {
return p > 8;
});
console.log("withTax:", withTax);
console.log("expensive:", expensive);
Demonstration utan ändringar
Oföränderlighet: map/filter returnerar nya arrayer, och originalet förblir oförändrat.
// map and filter do not mutate the original array
const base = [2, 4, 6];
const plusOne = base.map(function (n) {
return n + 1;
});
const small = base.filter(function (n) {
return n < 5;
});
console.log("base:", base);
console.log("plusOne:", plusOne);
console.log("small:", small);
Tips för tydliga arrayer
Tips:
- Ge små callback-funktioner tydliga namn (n, item).
- Håll kedjor korta (högst 2–3 steg).
- Föredra rena callback-funktioner (utan sidoeffekter).
Quiz: map kontra filter
Snabb kontroll: Omvandla varje element.
Sammanfattning
Sammanfattning: Använd map för att omvandla värden, filter för att välja ut vissa och kedja dem utan att ändra den ursprungliga arrayen.
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 ”map och filter — grunderna” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”map och filter — grunderna”, 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 2 lektioner.
Vad lär jag mig i ”map och filter — grunderna”?
Omforma och välj data med map och filter; kedja dem och undvik mutationer för säkrare kod. 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 1 av 2.
Hur lång tid tar lektionen ”map och filter — grunderna”?
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
- map och filter — grunderna
- reduce, some/every och find — enkla mönster