Kaedah JavaScript penting Setiap Pemula Perlu Tahu

JavaScript adalah seperti pisau pengaturcaraan Tentera Swiss—ia serba boleh, penting dan penuh dengan alatan yang anda tidak tahu anda perlukan. Tetapi sebagai seorang pemula, mudah untuk terjerat dalam gelung dan ditenggelami oleh kod yang panjang dan berulang. Bayangkan cuba mencari item secara manual dalam kotak alat yang tidak kemas—menjemukan, bukan?

Di sinilah kaedah JavaScript masuk. Alat terbina dalam ini membolehkan anda memanipulasi tatasusunan, menapis data dan memudahkan tugas yang rumit dengan mudah. Anggap ia sebagai pintasan yang menjimatkan masa dan usaha anda, menukar kod yang tidak kemas kepada sesuatu yang bersih dan cekap.

Dalam artikel ini, kami akan meneroka lima kaedah JavaScript penting—map(), filter(), reduce(), forEach(), dan find(). Menguasai ini akan menjadikan kod anda lebih tajam, lebih pantas dan lebih menyeronokkan untuk ditulis.

“Pengaturcaraan bukan tentang apa yang anda tahu; ia mengenai apa yang anda boleh fikirkan." – Chris Pine.

1. map() – Mengubah Tatasusunan

Apa Fungsinya:
Fikirkan map() sebagai pembantu peribadi yang mengambil senarai tugasan, melaksanakan tugas untuk setiap item dan memberikan anda senarai baharu dengan hasilnya. Ia sesuai untuk menukar data tanpa menyentuh yang asal.

Bayangkan anda mempunyai timbunan kemeja-T kosong, dan anda ingin mencetak reka bentuk pada kesemuanya. Daripada mengubah tindanan asal, anda mencipta tindanan baru dengan reka bentuk yang digunakan. Begitulah cara map() berfungsi—ia menggunakan fungsi pada setiap item dan memberi anda tatasusunan baharu.

Contoh:
Begini cara anda boleh menggandakan setiap nombor dalam tatasusunan menggunakan map():

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

Pecahan:

• nombor: Tatasusunan asal kekal tidak disentuh.
• num * 2: Fungsi digunakan pada setiap elemen.
• dua kali ganda: Tatasusunan baharu dengan nilai diubah.

Kes Penggunaan Praktikal:
Katakan anda mempunyai senarai harga produk dalam dolar dan anda ingin menukarnya kepada mata wang lain. Dengan map(), anda boleh melakukan penukaran dalam satu langkah.

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

Mengapa Ia Berguna:
map() membantu anda mengelakkan tugasan berulang dan memastikan kod anda bersih. Daripada menggunakan gelung untuk memanipulasi tatasusunan, kaedah ini melakukan pengangkatan berat untuk anda.

Sentiasa ingat bahawa map() mencipta tatasusunan baharu. Jika anda ingin mengubah suai data di tempatnya, ini bukan alat untuk tugas itu.

2. filter() – Memilih Item Tertentu

Apa Fungsinya:
filter() mencipta tatasusunan baharu yang mengandungi hanya elemen yang memenuhi syarat tertentu. Anggap ia sebagai bouncer di kelab, hanya membenarkan mereka yang memenuhi kriteria.

Bayangkan anda sedang menyusun almari pakaian anda dan hanya menyimpan pakaian yang sesuai dengan anda dengan sempurna. filter() membantu anda memilih apa yang anda perlukan dan meninggalkan yang lain—mudah dan cekap.

Contoh:
Mari tapis nombor genap daripada tatasusunan:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

Pecahan:

• nombor: Tatasusunan asal kekal tidak disentuh.
• Syarat: nombor % 2 !== 0 semak jika nombor ganjil.
• Keputusan: Tatasusunan baharu, OddNumbers, dibuat dengan nilai yang ditapis.

Kes Penggunaan Praktikal:
Katakan anda menguruskan senarai produk dan anda ingin menapis item yang kehabisan stok.

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

Bila Menggunakannya:

• Ekstrak hanya data yang berkaitan daripada set data.
• Permudahkan proses dengan bekerja hanya dengan perkara yang anda perlukan.

Mengapa Pemula Suka:
Tidak seperti gelung, penapis() adalah mudah. Ia mengurangkan kemungkinan ralat dan anda boleh mencapai lebih banyak lagi dengan kurang kod.

3. mengurangkan() – Mengagregatkan Data

Katakanlah, anda berada di kaunter pembayaran kedai runcit dan juruwang sedang menambah semua harga barangan anda untuk memberikan jumlah keseluruhan. Beginilah cara reduce() berfungsi—ia menggabungkan semua elemen dalam tatasusunan menjadi satu nilai, seperti jumlah, produk atau sebarang hasil tersuai.

Apa Fungsinya:
reduce() memproses elemen tatasusunan demi elemen dan mengurangkannya menjadi nilai output tunggal berdasarkan fungsi yang anda tentukan.

Contoh:
Mari kita hitung jumlah keseluruhan tatasusunan:

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

Pecahan:

• penumpuk: Menjejaki jumlah yang sedang berjalan (bermula pada 0).
• currentValue: Merujuk kepada item semasa dalam tatasusunan yang sedang diproses.
• Keputusan: Menggabungkan semua nombor menjadi satu jumlah.

Kes Penggunaan Praktikal:
Katakan anda sedang membina troli beli-belah dalam talian. Anda perlu mengira jumlah kos semua item yang telah dipilih oleh pengguna.

const products = [
  { name: 'Laptop', inStock: true },
  { name: 'Phone', inStock: false },
  { name: 'Tablet', inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// Output: [{ name: 'Laptop', inStock: true }, { name: 'Tablet', inStock: true }]

Mengapa Ia Istimewa:
reduce() bukan hanya untuk nombor—anda boleh menggunakannya untuk:

• Gabungkan rentetan.
• Leperkan tatasusunan.
• Bina objek secara dinamik.

Twist Seronok:
Jom jadi kreatif! Anda boleh menggunakan reduce() untuk mengira bilangan kali setiap huruf muncul dalam perkataan:

const numbers = [5, 10, 15, 20];
const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(total); // Output: 50

Mengapa Pemula Perlu Mempelajarinya:
Walaupun reduce() mungkin berasa agak maju pada mulanya, menguasainya membuka kunci kemungkinan yang tidak berkesudahan untuk memudahkan operasi yang kompleks. Ia seperti pisau Swiss Army dengan kaedah tatasusunan—serbaguna dan berkuasa.

“Selesaikan masalah dahulu. Kemudian, tulis kod itu.” – John Johnson.
Dengan reduce(), anda menyelesaikan masalah dengan cekap dengan kod yang elegan dan minimum.

4. forEach() – Kuda Kerja Mesra untuk Tatasusunan

Mari Tetapkan Adegan:
Fikirkan diri anda sebagai tukang masak di dapur yang menyediakan beberapa hidangan. Anda meneliti setiap bahan dalam senarai anda, memotong, memotong dadu atau perasa mengikut keperluan. Anda tidak menukar senarai ramuan itu sendiri—anda hanya melakukan tindakan untuk setiap item. Inilah yang dilakukan oleh forEach().

Apa Fungsinya:
forEach() membolehkan anda mengulangi tatasusunan dan melaksanakan fungsi untuk setiap elemen. Tidak seperti map() atau penapis(), ia tidak mengembalikan tatasusunan baharu—ia hanya melakukan tindakan.

Contoh:
Mari cetak setiap buah dalam senarai:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

Apa Yang Berlaku Di Sini:

• Input: Susunan buah-buahan.
• Tindakan: Fungsi ini merekodkan mesej yang diperibadikan untuk setiap buah.
• Keputusan: Tiada tatasusunan baharu dibuat—ia hanya melaksanakan tindakan.

Kes Penggunaan Praktikal:
Katakan anda sedang menguruskan senarai tugasan dan ingin mencatatnya sebagai "selesai":

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

Mengapa Ia Berbeza daripada Kaedah Lain:
Tidak seperti map(), yang mencipta tatasusunan baharu, forEach() memfokuskan semata-mata pada kesan sampingan—tindakan yang tidak menghasilkan hasil langsung tetapi mengubah suai atau berinteraksi dengan sesuatu di luar tatasusunan.

Contohnya:

• Menghantar permintaan API untuk setiap item dalam senarai.
• Mengemas kini DOM untuk senarai elemen.
• Melog nilai ke konsol.

Bila Menggunakannya:

• Gunakan forEach() apabila:
• Anda hanya mahu mengulangi tatasusunan.
• Anda perlu melakukan operasi tanpa memerlukan tatasusunan baharu.

Perkara Yang Perlu Diperhatikan Pemula:
Memandangkan forEach() tidak mengembalikan apa-apa, ia tidak sesuai untuk operasi rantaian. Jika anda memerlukan tatasusunan yang diubah, kekalkan pada map() atau penapis().

Contoh Kreatif:
Mari hantar e-mel terima kasih kepada setiap pelanggan dalam senarai (hanya disimulasikan):

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

Mengapa Pemula Suka:
forEach() adalah mudah dan intuitif. Ini adalah langkah pertama dalam mempelajari cara bekerja dengan tatasusunan dengan berkesan.

Ingat ini: "Kesederhanaan kod bukanlah ketiadaan kerumitan—ia adalah seni untuk menguasainya."
forEach() ialah alat pertama anda untuk mengendalikan kerumitan dengan cara yang mudah.

5. find() – Menemui Perlawanan Pertama

Anda sedang memburu harta karun dengan peta, dan petunjuknya berkata, "Cari syiling emas pertama di dalam hutan." Anda mula mencari, tetapi sebaik sahaja anda melihat syiling pertama berkilauan di bawah pokok, anda berhenti. Anda telah menemui apa yang anda perlukan, dan selebihnya syiling tidak penting. Beginilah cara find() berfungsi—ia membantu anda mencari item pertama dalam tatasusunan yang sepadan dengan keadaan anda dan berhenti menjaganya.

Apa Fungsinya:
find() mengimbas melalui tatasusunan dan mengembalikan elemen pertama yang memenuhi syarat dalam fungsi anda. Jika tiada padanan ditemui, ia akan kembali tidak ditentukan.

Contoh Kod:
Mari cari nombor pertama yang lebih besar daripada 20:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

Apa Yang Berlaku:

• Syarat num > 20 disemak untuk setiap elemen.
• Setelah 25 memenuhi syarat, carian dihentikan dan 25 dikembalikan.
• Tiada elemen lanjut disemak selepas perlawanan pertama.

Fikirkan find() sebagai sedang memburu pemulung di mana anda diberitahu, "Cari bunga merah pertama." Anda tidak mengumpulkan setiap bunga merah (itulah yang akan dilakukan oleh penapis()). Sebaliknya, anda berhenti sebaik sahaja anda melihatnya dan menjerit, “Ok!”

Kes Penggunaan Praktikal:
Katakan anda menguruskan senarai kenalan dan ingin mencari orang pertama dengan alamat e-mel tertentu.

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

Mengapa Pemula Suka:
find() adalah mudah untuk digunakan dan menjimatkan masa apabila anda hanya memerlukan satu hasil. Ia seperti menggunakan lampu suluh untuk mencari objek tunggal dalam bilik gelap—ia tidak cuba menerangi seluruh bilik.

Contoh Kreatif:
Mari kita bawa ini ke dunia e-dagang. Katakan anda mempunyai senarai produk dan anda ingin mencari produk pertama yang dijual.

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

Mengendalikan Kes Tepi:
Bagaimana jika tiada item yang sepadan dengan keadaan anda? Jangan risau—find() akan kembali tidak ditentukan. Anda boleh menangani perkara ini dengan anggun dengan sandaran:

const products = [
  { name: 'Laptop', inStock: true },
  { name: 'Phone', inStock: false },
  { name: 'Tablet', inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// Output: [{ name: 'Laptop', inStock: true }, { name: 'Tablet', inStock: true }]

Mengapa find() Berkuasa:

• Kecekapan: Berhenti sebaik sahaja ia menemui perlawanan pertama.
• Kejelasan: Jelaskan niat anda dalam kod—mencari satu item.
• Penggunaan Dunia Sebenar: Sesuai untuk mencari pengguna tunggal, produk atau titik data dalam set data yang besar.

Kesimpulan

JavaScript ialah alat yang berkuasa, dan lima kaedah ini—map(), filter(), reduce(), forEach(), dan find()—adalah kunci untuk membuka kunci potensi sebenarnya. Ia membantu anda menulis kod yang lebih bersih, lebih cekap sambil menyelamatkan anda daripada gelung yang tidak berkesudahan dan tugasan yang berlebihan. Anggap mereka sebagai pisau Swiss Army dalam kotak alat pembangun anda: serba boleh, boleh dipercayai dan dibina untuk menjadikan hidup anda lebih mudah.

Menguasai kaedah ini bukan sekadar mempelajari sintaks—ia juga tentang berfikir seperti seorang pengaturcara. Sama ada anda menukar data dengan map(), menapis bunyi dengan penapis(), menjumlahkan semuanya dengan reduce(), mengulang dengan lancar dengan forEach(), atau mencari permata tersembunyi itu dengan find(), anda sedang membina kemahiran yang akan menjadikan kod anda lebih profesional dan berkesan.

Ingat, keajaiban pengekodan bukan dalam menulis program yang panjang dan kompleks—ia adalah dalam mencari penyelesaian yang elegan untuk masalah harian. Mulakan secara kecil-kecilan: pilih satu kaedah, percubaan dengannya dan cuba dalam projek anda yang seterusnya. Lebih banyak anda berlatih, lebih banyak kaedah ini akan terasa seperti sifat kedua.

"Kod terbaik ialah kod yang anda tidak perlu jelaskan." – Martin Fowler
Gunakan kaedah ini untuk menulis kod yang bercakap untuk dirinya sendiri.

Beritahu saya pendapat anda dalam ulasan! Pernahkah anda menggunakan kaedah ini dalam projek anda? Saya ingin mendengar pengalaman anda.

Artikel ini pada asalnya diterbitkan di Hashnode

Atas ialah kandungan terperinci Kaedah JavaScript penting Setiap Pemula Perlu Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!