Akademi JavaScript · Pelajaran

Transformasi Data Deklaratif

Transformasikan data dengan map, filter dan reduce.

Pelajaran 2 daripada 413 langkah

Transformasi Data Deklaratif ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Deklaratif berbanding imperatif

Kod imperatif menyatakan HOW (gelung, pembilang dan perubahan). Kod deklaratif menyatakan WHAT. Kaedah tatasusunan seperti map, filter dan reduce membolehkan anda menerangkan transformasi tanpa gelung manual.

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

map: Mengubah setiap elemen

map mengembalikan tatasusunan baharu yang mempunyai panjang sama, dengan setiap elemennya diubah oleh fungsi anda. Tatasusunan asal tidak berubah.

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

filter: Mengekalkan sesetengah elemen

filter mengembalikan tatasusunan baharu yang mengandungi hanya elemen yang predikatnya mengembalikan nilai benar.

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

reduce: Menggabungkan menjadi satu nilai

reduce meringkaskan tatasusunan menjadi satu nilai dengan mengumpulkan hasil secara berperingkat. Berikan fungsi pengurang dan nilai awal.

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

Merangkai operasi

Oleh sebab setiap kaedah mengembalikan tatasusunan baharu, anda boleh merangkainya menjadi saluran pemprosesan yang mudah dibaca dari atas ke bawah.

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]

Saluran pemprosesan sebenar

Gabungkan filter, map dan reduce untuk menjawab soalan tentang set data dalam satu ungkapan.

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

Memetakan kepada bentuk baharu

map boleh mengubah bentuk objek, bukan hanya nombor. Pilih medan yang anda perlukan daripada setiap rekod.

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 boleh membina apa sahaja

reduce bukan hanya untuk jumlah. Ia boleh membina objek, mengumpulkan data atau bahkan melaksanakan semula map dan filter.

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 }

Susunan penting

Menapis sebelum memetakan mengelakkan anda mengubah elemen yang akhirnya akan dibuang. Letakkan penapis yang murah pada awal rangkaian untuk kejelasan dan kecekapan.

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]

Tiada perubahan di mana-mana

Kaedah ini tidak pernah mengubah tatasusunan sumber. Hal ini menjadikan saluran pemprosesan selamat dan boleh dijangka, serta sangat sesuai dengan gaya fungsian.

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 untuk hasil bersarang

Apabila map menghasilkan tatasusunan, flatMap memetakan dan meratakan satu aras dalam satu langkah.

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

Semakan pantas

Transformasi deklaratif.

Jawab dalam pelajaran interaktif

Ringkasan

Transformasi deklaratif menerangkan WHAT, bukan HOW. map mengubah, filter memilih dan reduce menggabungkan kepada satu nilai; rangkaikan semuanya menjadi saluran pemprosesan yang mudah dibaca. Tiada satu pun daripadanya mengubah sumber, penapisan awal adalah cekap dan reduce boleh membina apa-apa struktur. Gunakan flatMap apabila map menghasilkan tatasusunan.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Transformasi Data Deklaratif” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Transformasi Data Deklaratif”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Transformasi Data Deklaratif”?

Transformasikan data dengan map, filter dan reduce. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Transformasi Data Deklaratif” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Akademi JavaScript