Frontend Academy · Oppitunti

Taulukkometodit: map, filter, reduce ja find

Muunna, suodata ja kokoa taulukoita korkeamman asteen metodeilla manuaalisten silmukoiden sijaan. Ketjuta metodeja ilmaisuvoimaisiksi tietoputkiksi

Oppitunti 1/413 vaihetta

Taulukkometodit: map, filter, reduce ja find on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Miksi taulukkometodeja?

Imperatiiviset for-silmukat toimivat, mutta ne kätkevät tarkoituksen. Taulukoiden korkeamman kertaluvun metodit ilmoittavat, mitä haluatte, sen sijaan että kuvaisivat, miten iteroidaan. Niillä tuotetaan selkeämpää, testattavaa ja koostettavaa koodia, joka on luettavissa kuin teksti.

Array.map() — Muunna jokainen alkio

map() palauttaa uuden taulukon, jossa callback-funktio on muuntanut jokaisen alkion. Alkuperäistä taulukkoa ei muuteta. Käyttäkää sitä aina, kun taulukko on muunnettava toiseksi.

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() — Valitse ehdon täyttävät alkiot

filter() palauttaa uuden taulukon, joka sisältää vain alkiot, joille callback palauttaa totuusarvoisen tuloksen. Callback on predikaattifunktio.

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() — Kokoa arvo

reduce(callback, initialValue) kokoaa kaikki alkiot yhdeksi arvoksi. Callback saa akkumulaattorin ja nykyisen alkion. Alkuarvo on akkumulaattorin lähtöarvo.

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() — Ensimmäinen osuma

find() palauttaa predikaatin täyttävän ensimmäisen alkion tai undefined, jos sopivaa alkiota ei ole. Etsikää sen avulla alkio tunnisteen tai ominaisuuden arvon perusteella.

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex() toimii kuten find(), mutta palauttaa vastaavan alkion indeksin tai arvon -1, jos osumaa ei löydy. Se on hyödyllinen, kun haluatte selvittää, missä kohtaa taulukkoa alkio päivitetään.

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some() ja Array.every()

some() palauttaa true, jos vähintään yksi alkio läpäisee testin. every() palauttaa true vain, jos kaikki alkiot läpäisevät testin. Molemmat lopettavat suorituksen heti ensimmäisen ratkaisevan tuloksen jälkeen.

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() — Muunna ja litistä

flatMap() muuntaa jokaisen alkion ja litistää tuloksen yhdellä tasolla. Se vastaa rakennetta .map(...).flat(), mutta on tehokkaampi.

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

Taulukkometodien ketjuttaminen

Metodit palauttavat uusia taulukoita, joten niitä voi ketjuttaa. Lukekaa ketjut vasemmalta oikealle: suodattakaa ensin, muuntakaa sitten ja kootkaa lopuksi.

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at() ja Array.includes()

at(-1) palauttaa viimeisen alkion. includes(value) tarkistaa, onko arvo olemassa. Tämä on paljon selkeämpää kuin arr[arr.length - 1] ja arr.indexOf(v) !== -1.

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

Muuttumattomuus: älkää muuttako

map, filter ja reduce palauttavat uusia taulukoita. push, pop ja splice muuttavat alkuperäistä taulukkoa. React-tilassa luokaa aina uudet taulukot (spread-operaattorilla tai mapilla) sen sijaan, että muuttaisitte tilaa suoraan.

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

Pikatarkistus

Mikä taulukkometodi palauttaa uuden taulukon alkioista, joille callback palauttaa true?

Vastaa interaktiivisessa oppitunnissa

Kertaus: taulukkometodit

map() muuntaa jokaisen alkion. filter() valitsee ehdon täyttävät alkiot. reduce() kokoaa alkiot yhdeksi arvoksi. find() palauttaa ensimmäisen osuman. some()/every() testaavat ehtoa. Näiden metodien ketjut korvaavat sisäkkäiset silmukat luettavilla, deklaratiivisilla tietoputkilla.

Aloita maksutta

Opi HTML 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: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Taulukkometodit: map, filter, reduce ja find” ilmainen?

Kyllä – oppitunnin ”Taulukkometodit: map, filter, reduce ja find” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Taulukkometodit: map, filter, reduce ja find”?

Muunna, suodata ja kokoa taulukoita korkeamman asteen metodeilla manuaalisten silmukoiden sijaan. Ketjuta metodeja ilmaisuvoimaisiksi tietoputkiksi Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Taulukkometodit: map, filter, reduce ja find”-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ä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend 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

Taulukkometodit: map, filter, reduce ja find
Objektien destrukturointi ja spread
Template literalit ja optional chaining
Moduulit: import ja export

← Takaisin: Frontend Academy