map ja filter — perusteet
Muokkaa ja valitse dataa map- ja filter-metodeilla; ketjuta niitä ja vältä mutaatioita turvallisemman koodin kirjoittamiseksi
map ja filter — perusteet on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/2. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 2 oppituntia.
Johdanto map- ja filter-menetelmiin
Tavoite: Muuntakaa alkioita map-menetelmällä ja valitkaa alkioita filter-menetelmällä.
- map: muunna
- filter: valitse
- Ketjuta map → filter
- Ei mutaatioita
mapin perusteet
map soveltaa funktiota jokaiseen alkioon ja palauttaa uuden taulukon (sama pituus).
// 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);
filterin perusteet
filter palauttaa vain alkiot, joiden callback palauttaa arvon true (pituus voi muuttua).
// 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);
Ketjutusesimerkki
Yhdistäkää vaiheet: muuntakaa map-menetelmällä ja valitkaa sitten filter-menetelmällä.
// 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);
Mutaatioton esimerkki
Muuttumattomuus: map/filter palauttavat uusia taulukoita; alkuperäinen säilyy muuttumattomana.
// 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);
Vinkkejä selkeisiin taulukoihin
Vinkkejä:
- Nimetkää pienet callbackit kuvaavasti (n, item) selkeyden vuoksi.
- Pitäkää ketjut lyhyinä (enintään 2–3 vaihetta).
- Suosikaa puhtaita callbackeja (ei sivuvaikutuksia).
map vai filter -tietovisa
Pikatarkistus: Jokaisen alkion muuntaminen.
Kertaus
Kertaus: Muuntakaa arvoja map-menetelmällä, valitkaa joitakin niistä filter-menetelmällä ja ketjuttakaa menetelmät muuttamatta alkuperäistä taulukkoa.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 59
- Oppitunnit
- 200
Usein kysytyt kysymykset
Onko oppitunti ”map ja filter — perusteet” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “map ja filter — perusteet”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 2 oppituntia.
Mitä opin oppitunnilla ”map ja filter — perusteet”?
Muokkaa ja valitse dataa map- ja filter-metodeilla; ketjuta niitä ja vältä mutaatioita turvallisemman koodin kirjoittamiseksi Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/2.
Kuinka kauan ”map ja filter — perusteet”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?
Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- map ja filter — perusteet
- reduce, some/every ja find — yksinkertaiset mallit