Frontend Academy · Pelajaran

Kaedah Array: map filter reduce find

Ubah, tapis dan agregat array dengan kaedah tertib tinggi berbanding gelung manual. Rantaikan kaedah tersebut untuk pipeline data yang ekspresif.

Pelajaran 1 daripada 413 langkah

Kaedah Array: map filter reduce find ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Mengapa Kaedah Array?

Gelung for imperatif boleh digunakan, tetapi menyembunyikan tujuan kod. Kaedah peringkat tinggi Array mengisytiharkan perkara yang Anda kehendaki dan bukannya cara untuk melakukan lelaran. Kaedah ini menghasilkan kod yang lebih kemas, boleh diuji dan boleh digabungkan, serta dibaca seperti prosa.

Array.map() — Mengubah Setiap Elemen

map() mengembalikan tatasusunan baharu yang setiap elemennya telah diubah oleh panggilan balik. Tatasusunan asal tidak diubah. Gunakannya apabila Anda perlu menukar satu tatasusunan kepada tatasusunan yang lain.

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() — Memilih Elemen yang Sepadan

filter() mengembalikan tatasusunan baharu yang hanya mengandungi elemen yang panggilan baliknya mengembalikan nilai benar. Panggilan balik itu ialah fungsi predikat.

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() — Mengumpulkan Nilai

reduce(callback, initialValue) mengumpulkan semua elemen menjadi satu nilai. Panggilan balik menerima pengumpul dan elemen semasa. Nilai awal ialah nilai permulaan pengumpul.

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() — Padanan Pertama

find() mengembalikan elemen pertama yang sepadan dengan predikat, atau undefined jika tiada padanan. Gunakannya untuk mencari item berdasarkan ID atau nilai sifat.

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() serupa dengan find(), tetapi mengembalikan indeks elemen yang sepadan, atau -1 jika tidak ditemui. Ia berguna untuk mencari kedudukan elemen yang hendak dikemas kini dalam tatasusunan.

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

Array.some() dan Array.every()

some() mengembalikan true jika sekurang-kurangnya satu elemen lulus ujian. every() mengembalikan true hanya jika semua elemen lulus. Kedua-duanya menghentikan semakan pada keputusan muktamad yang pertama.

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() — Memetakan Kemudian Meratakan

flatMap() memetakan setiap elemen, kemudian meratakan hasilnya sebanyak satu aras. Ia setara dengan .map(...).flat(), tetapi lebih cekap.

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

Merangkaikan Kaedah Array

Kaedah mengembalikan tatasusunan baharu, jadi Anda boleh merangkaikannya. Baca rangkaian dari kiri ke kanan: tapis dahulu, kemudian ubah, dan akhirnya kumpulkan.

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() dan Array.includes()

at(-1) mendapatkan elemen terakhir. includes(value) menyemak sama ada sesuatu nilai wujud. Ini jauh lebih kemas berbanding arr[arr.length - 1] dan 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

Ketidakbolehubahan: Jangan Ubah

map, filter dan reduce mengembalikan tatasusunan baharu. push, pop dan splice mengubah tatasusunan asal. Dalam keadaan React, sentiasa cipta tatasusunan baharu (dengan spread atau map) dan bukannya mengubah keadaan secara langsung.

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

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

Semakan Pantas

Kaedah tatasusunan manakah yang mengembalikan tatasusunan baharu yang mengandungi elemen yang panggilan baliknya mengembalikan true?

Jawab dalam pelajaran interaktif

Imbas Kembali: Kaedah Array

map() mengubah setiap elemen. filter() memilih elemen yang sepadan. reduce() mengumpulkan elemen menjadi satu nilai. find() mengembalikan padanan pertama. some()/every() menguji keahlian. Rangkaian kaedah ini menggantikan gelung bersarang dengan saluran data yang mudah dibaca dan bersifat pengisytiharan.

Percuma untuk bermula

Pelajari HTML 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: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Kaedah Array: map filter reduce find” percuma?

Ya — teks penuh “Kaedah Array: map filter reduce find” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Kaedah Array: map filter reduce find”?

Ubah, tapis dan agregat array dengan kaedah tertib tinggi berbanding gelung manual. Rantaikan kaedah tersebut untuk pipeline data yang ekspresif. Anda berlatih Frontend Academy 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 Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy 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 1 daripada 4.

Berapa lamakah pelajaran “Kaedah Array: map filter reduce find” 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 Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy 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 Frontend Academy