JavaScript Academy · Oppitunti

Deklaratiivinen datan muunnos

Muuntaa dataa map-, filter- ja reduce-metodeilla.

Oppitunti 2/413 vaihetta

Deklaratiivinen datan muunnos on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. 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ä 4 oppituntia.

Deklaratiivinen ja imperatiivinen ohjelmointi

Imperatiivinen koodi kertoo MITEN (silmukat, laskurit ja muuttaminen). Deklaratiivinen koodi kertoo MITÄ. Taulukkometodien, kuten map-, filter- ja reduce-metodien, avulla voitte kuvata muunnoksia ilman manuaalisia silmukoita.

const nums = [1, 2, 3, 4];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]

map: jokaisen alkion muuntaminen

map palauttaa alkuperäisen taulukon kanssa yhtä pitkän uuden taulukon, jonka jokainen alkio on muunnettu funktion avulla. Alkuperäinen taulukko säilyy muuttumattomana.

const names = ["ada", "bob"];
const upper = names.map((n) => n.toUpperCase());
console.log(upper); // ["ADA", "BOB"]
console.log(names); // unchanged

filter: joidenkin alkioiden säilyttäminen

filter palauttaa uuden taulukon, joka sisältää vain alkiot, joiden predikaatti palauttaa totuusarvon true-arvoisen tuloksen.

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]

reduce: taulukon yhdistäminen yhdeksi arvoksi

reduce tiivistää taulukon yhdeksi arvoksi kerryttämällä tulosta. Antakaa sille reduktiototeutus ja alkuarvo.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

Operaatioiden ketjuttaminen

Koska jokainen metodi palauttaa uuden taulukon, voitte ketjuttaa metodit luettavaksi putkeksi, jota luetaan ylhäältä alas.

const nums = [1, 2, 3, 4, 5, 6];
const result = nums
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
console.log(result); // [20, 40, 60]

Käytännöllinen putki

Yhdistämällä filter-, map- ja reduce-metodit voitte vastata tietojoukkoa koskevaan kysymykseen yhdellä lausekkeella.

const orders = [
  { item: "pen", price: 3, paid: true },
  { item: "ink", price: 8, paid: false },
  { item: "pad", price: 5, paid: true }
];
const paidTotal = orders
  .filter((o) => o.paid)
  .map((o) => o.price)
  .reduce((a, p) => a + p, 0);
console.log(paidTotal); // 8

Uuden rakenteen muodostaminen map-metodilla

map voi muuttaa olioiden rakennetta, ei vain lukuja. Muodostakaa kustakin tietueesta uusi versio, joka sisältää tarvitsemanne kentät.

const users = [{ id: 1, name: "Ada", age: 36 }];
const summary = users.map((u) => ({ id: u.id, label: u.name }));
console.log(summary); // [{ id: 1, label: "Ada" }]

reduce voi muodostaa mitä tahansa

reduce ei sovellu vain summien laskemiseen. Sen avulla voi muodostaa olioita, ryhmitellä tietoja tai jopa toteuttaa map- ja filter-metodit uudelleen.

const words = ["a", "bb", "a", "ccc"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(counts); // { a: 2, bb: 1, ccc: 1 }

Järjestyksellä on merkitystä

Suodattaminen ennen muuntamista estää sellaisten alkioiden muuntamisen, jotka kuitenkin hylätään. Sijoittakaa kevyet suodattimet ketjun alkuun selkeyden ja tehokkuuden vuoksi.

const data = [1, 2, 3, 4, 5];
const out = data
  .filter((n) => n > 2)   // shrink first
  .map((n) => n * n);     // then transform
console.log(out); // [9, 16, 25]

Ei muuttamista missään vaiheessa

Nämä metodit eivät koskaan muuta lähdetaulukkoa. Siksi putket ovat turvallisia ja ennakoitavia ja sopivat täydellisesti funktionaaliseen ohjelmointityyliin.

const src = [3, 1, 2];
const sorted = [...src].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(src);    // [3, 1, 2] untouched

flatMap sisäkkäisiä tuloksia varten

Kun map tuottaa taulukoita, flatMap suorittaa muunnoksen ja litistää yhden sisäkkäisyyden tason yhdellä kertaa.

const pairs = [1, 2, 3].flatMap((n) => [n, n * 10]);
console.log(pairs); // [1, 10, 2, 20, 3, 30]

Pikakertaus

Deklaratiiviset muunnokset.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Deklaratiivinen muunnos kuvaa MITÄ, ei MITEN. map muuntaa, filter valitsee ja reduce yhdistää tulokset yhdeksi arvoksi. Ketjuttakaa ne luettaviksi putkiksi. Mikään niistä ei muuta lähdettä, aikainen suodatus on tehokasta ja reduce voi muodostaa minkä tahansa rakenteen. Käyttäkää flatMap-metodia, kun map tuottaa taulukoita.

Aloita maksutta

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Deklaratiivinen datan muunnos” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Deklaratiivinen datan muunnos”. 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ä 4 oppituntia.

Mitä opin oppitunnilla ”Deklaratiivinen datan muunnos”?

Muuntaa dataa map-, filter- ja reduce-metodeilla. 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 2/4.

Kuinka kauan ”Deklaratiivinen datan muunnos”-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

← Takaisin: JavaScript Academy