Kaedah Tatasusunan JavaScript Diterangkan Melalui Senario Dunia Nyata

Pernah melihat dokumentasi kaedah tatasusunan JavaScript dan bertanya kepada diri sendiri bagaimana ia berfungsi dalam kehidupan sebenar?

Saya masih ingat betul-betul menghantukkan kepala saya ke dinding untuk memahami kaedah ini apabila saya mula mengekod. Percayalah, kaedah tatasusunan tidak ada hanya untuk memecahkan temu bual teknikal, ia adalah rakan anda yang berprestasi harian dalam pembangunan dunia sebenar.

Hari ini, saya akan menunjukkan kepada anda bila dan cara menggunakan kaedah tatasusunan ini dalam projek sebenar.

Apabila anda selesai membaca, anda akan melihat bahawa kaedah tatasusunan memberikan kejelasan dan kebolehbacaan kod anda... Dan, apatah lagi, membantu memastikan ia waras dan boleh diselenggara.

Mari kita mulakan dari yang asas sekali

peta() dan penapis()

Mula-mula, mari mulakan dengan beberapa kaedah tatasusunan yang kemungkinan besar anda akan gunakan setiap hari - map() dan penapis().

Membina Kalkulator Harga Produk dengan map()

Jadi, anda sedang membina tapak e-dagang dan anda mempunyai senarai produk yang perlu didiskaun sebanyak 20%.

Begini rupa data produk anda:

 const products = [
    { name: "Gaming Mouse", price: 59.99 },
    { name: "Mechanical Keyboard", price: 129.99 },
    { name: "4K Monitor", price: 349.99 }
];

Daripada menulis gelung untuk yang tidak kemas, map() menjadikan ini sangat bersih:

const discountedPrices = products.map(product => ({
    ...product,
    price: (product.price * 0.8).toFixed(2)
}));

Setiap harga diskaun sekarang dan kami menyimpan semua maklumat produk asal kami. Bersih dan ringkas.

Mewujudkan Ciri Carian Pintar dengan penapis()

Sekarang mari kita bina sesuatu yang lebih sejuk - carian pintar yang sebenarnya berfungsi merentasi pelbagai medan.

Anggap kita mempunyai data pengguna ini:

const users = [
    { name: "Sarah Smith", email: "sarah@gmail.com", role: "developer" },
    { name: "John Doe", email: "john@company.com", role: "designer" },
    { name: "Mike Wilson", email: "mike@gmail.com", role: "developer" }
];

Beginilah cara anda melakukan carian mudah dengan penapis():

const searchUsers = (query) => {
    return users.filter(user => 
        user.name.toLowerCase().includes(query.toLowerCase()) ||
        user.email.toLowerCase().includes(query.toLowerCase()) ||
        user.role.toLowerCase().includes(query.toLowerCase())
    );
};

Betul, anda boleh mencari melalui nama, e-mel dan peranan. Cuba gunakan searchUsers("dev") dan ia menapis pembangun sahaja.

Dan jika anda fikir ia bagus, tunggu sehingga kami dapat mengurangkan() dalam bahagian seterusnya.

reduce() - Lebih Daripada Jumlah Sekadar

Kebanyakan pembangun kebanyakannya menggunakan reduce() sahaja untuk menambah nombor. Tetapi hakikatnya ia mampu melakukan lebih banyak lagi--percayalah pada saya.

Mengira Jumlah Troli Beli-belah

Senario tulen adalah mengira jumlah kos produk dalam troli beli-belah, dengan mengambil kira diskaun dan cukai. Lihat ini:

const cartItems = [
    { name: "Nike Air Max", price: 129.99, quantity: 2, discount: 20 },
    { name: "Adidas Hoodie", price: 89.99, quantity: 1, discount: 0 },
    { name: "Running Socks", price: 12.99, quantity: 3, discount: 10 }
];


const cartTotal = cartItems.reduce((total, item) => {
    const itemTotal = item.price * item.quantity;
    const discount = (itemTotal * item.discount) / 100;
    return total + (itemTotal - discount);
}, 0);

Sedap, kan? Anda hanya perlu melaksanakan satu fungsi untuk kuantiti, diskaun dan jumlah pengiraan.

Alat Perangkaan Dokumen

Bagaimana pula dengan memproses dokumen teks? Kami mengira semua perkataan, aksara dan ayat:

const documentStats = paragraphs.reduce((stats, paragraph) => {
    return {
        words: stats.words + paragraph.split(' ').length,
        characters: stats.characters + paragraph.length,
        sentences: stats.sentences + paragraph.split(/[.!?]+/).length - 1,
        paragraphs: stats.paragraphs + 1
    };
}, { words: 0, characters: 0, sentences: 0, paragraphs: 0 });

Jadi, tidakkah anda nampak betapa cantiknya reduce() mengendalikan berbilang perkara sekaligus? Ini adalah lebih baik daripada menggunakan gelung berasingan.

Petua Pro: Jika panggil balik reduce() anda menjadi terlalu besar, fungsi kecil sentiasa boleh digunakan.

find() dan some()

Mari kita atasi dua kaedah yang akan menjadikan sistem pengesahan dan penyederhanaan anda lebih mudah.

Mencipta Sistem Pengesahan Pengguna

Pernah membina sistem log masuk? Begini cara find() menjadikan carian pengguna mati mudah:

 const products = [
    { name: "Gaming Mouse", price: 59.99 },
    { name: "Mechanical Keyboard", price: 129.99 },
    { name: "4K Monitor", price: 349.99 }
];

Tiada lagi gelung yang kikuk atau penyataan jika kompleks. find() mengembalikan apa yang anda perlukan.

Membina Alat Penyederhanaan Kandungan

Di sinilah beberapa() bersinar - menyemak kandungan terhadap perkataan atau corak yang dilarang:

const discountedPrices = products.map(product => ({
    ...product,
    price: (product.price * 0.8).toFixed(2)
}));

Lihat bagaimana sesetengah() membantu kami menyemak berbilang keadaan sekaligus. Bersih, boleh dibaca dan boleh diselenggara.

Petua cepat: beberapa() berhenti menyemak sebaik sahaja ia menemui padanan. Sesuai untuk prestasi apabila berurusan dengan set data yang besar.

flat() dan flatMap()

Perata Susunan

Pernahkah anda cuba meratakan tatasusunan bersarang? flat() ialah kawan baik anda. Ia melancarkan tatasusunan bersarang tersebut ke dalam satu tahap:

const users = [
    { name: "Sarah Smith", email: "sarah@gmail.com", role: "developer" },
    { name: "John Doe", email: "john@company.com", role: "designer" },
    { name: "Mike Wilson", email: "mike@gmail.com", role: "developer" }
];

Anda juga boleh menentukan kedalaman yang anda ingin ratakan dengan parameter kedalaman. Jika tiada kedalaman, ia lalai kepada 1.

flatMap() - sistem ulasan dengan berbilang balasan

Fikirkan flatMap() sebagai gabungan flat() dan map() pada tatasusunan bersarang. Ia memetakan tatasusunan anda DAN meratakan hasilnya - sekali gus!

Berikut ialah sistem ulasan sebenar di mana setiap ulasan boleh mempunyai berbilang balasan:

const searchUsers = (query) => {
    return users.filter(user => 
        user.name.toLowerCase().includes(query.toLowerCase()) ||
        user.email.toLowerCase().includes(query.toLowerCase()) ||
        user.role.toLowerCase().includes(query.toLowerCase())
    );
};

flatMap() sesuai apabila anda perlu mengubah item DAN mengendalikan hasil bersarang. Ia seperti mendapat dua kaedah dengan harga satu!

Ini satu lagi contoh praktikal - mengekstrak hashtag daripada siaran media sosial:

const cartItems = [
    { name: "Nike Air Max", price: 129.99, quantity: 2, discount: 20 },
    { name: "Adidas Hoodie", price: 89.99, quantity: 1, discount: 0 },
    { name: "Running Socks", price: 12.99, quantity: 3, discount: 10 }
];


const cartTotal = cartItems.reduce((total, item) => {
    const itemTotal = item.price * item.quantity;
    const discount = (itemTotal * item.discount) / 100;
    return total + (itemTotal - discount);
}, 0);

Lihat bagaimana flatMap() mengendalikan kedua-dua transformasi DAN meratakan hasil kosong yang berpotensi? Cukup licin!

setiap() dan termasuk()

Membina Sistem Pengesahan Borang

Mari kita cuba mencipta sesuatu yang kita gunakan setiap hari - pengesah borang yang mantap. Begini cara setiap() menjadikannya bersih:

const documentStats = paragraphs.reduce((stats, paragraph) => {
    return {
        words: stats.words + paragraph.split(' ').length,
        characters: stats.characters + paragraph.length,
        sentences: stats.sentences + paragraph.split(/[.!?]+/).length - 1,
        paragraphs: stats.paragraphs + 1
    };
}, { words: 0, characters: 0, sentences: 0, paragraphs: 0 });

setiap() menyemak sama ada SEMUA peraturan lulus. Anda boleh lihat ia sesuai untuk pengesahan di mana anda memerlukan segala-galanya adalah benar.

Membina Penyemak Kebenaran

Begini caranya termasuk() menjadikan semakan kebenaran sangat mudah dilakukan:

const users = [
    { id: 1, email: "alex@tech.com", password: "hashed_password_1", attempts: 0 },
    { id: 2, email: "sam@tech.com", password: "hashed_password_2", attempts: 1 }
];

const authenticateUser = (email, password) => {
    const user = users.find(u => u.email === email);
    if (!user) return { status: "error", message: "User not found" };

    if (user.attempts >= 3) return { status: "error", message: "Account locked" };

    return validatePassword(user, password);
};

termasuk() menjadikan kod kami dibaca seperti bahasa Inggeris biasa. Jauh lebih baik daripada pernyataan kompleks jika atau gelung.

Memesan Data Anda (sort())

Pernahkah anda perlu mengisih data selain daripada susunan abjad asas? sort() adalah jauh lebih berkuasa daripada yang difikirkan oleh kebanyakan pembangun.

Membangunkan Penyusun Jadual Tersuai

Berikut ialah penyusun jadual dunia sebenar yang mengendalikan jenis data yang berbeza:

const bannedWords = ["spam", "scam", "inappropriate"];

const moderateContent = (content) => {
    const containsBannedWords = bannedWords.some(word => 
        content.toLowerCase().includes(word)
    );

    const hasSpamPatterns = content.includes("!!!") || content === content.toUpperCase();

    return {
        isSpam: containsBannedWords || hasSpamPatterns,
        reason: containsBannedWords ? "Banned words detected" : "Spam patterns found"
    };
};

Tiada lagi fungsi berasingan untuk lajur yang berbeza. Hanya satu penyusun mengendalikan segala-galanya!

Membina Sistem Papan Pendahulu

Lihat penyusun papan pendahulu ini yang mengendalikan pecah seri:

 const products = [
    { name: "Gaming Mouse", price: 59.99 },
    { name: "Mechanical Keyboard", price: 129.99 },
    { name: "4K Monitor", price: 349.99 }
];

Lihat cara kami mengendalikan berbilang kriteria pengisihan? Skor dahulu, kemudian menang, kemudian masa bermain terendah memecahkan seri.

Petua cepat: Sentiasa buat salinan tatasusunan anda sebelum mengisih jika anda perlu mengekalkan susunan asal.

Amalan dan Prestasi Terbaik

Sebelum anda pergi, mari kita akhiri ini dengan sedikit kebijaksanaan yang akan menjadikan kaedah tatasusunan anda berfungsi dengan lebih baik.

Bila Menggunakan Kaedah Yang Mana

Berikut ialah panduan praktikal saya berdasarkan perkara yang anda cuba lakukan:

const discountedPrices = products.map(product => ({
    ...product,
    price: (product.price * 0.8).toFixed(2)
}));

Jadi, berhenti bimbang tentang forEach vs for-gelung. Fokus pada perkara ini.

Lakukan dan jangan lakukan yang Sebenarnya Penting

Terakhir sebelum anda pergi. Sentiasa cari cara untuk melakukan perkara yang lebih mudah dan lebih baik. Contohnya:

Sebaliknya:

const users = [
    { name: "Sarah Smith", email: "sarah@gmail.com", role: "developer" },
    { name: "John Doe", email: "john@company.com", role: "designer" },
    { name: "Mike Wilson", email: "mike@gmail.com", role: "developer" }
];

Sentiasa lakukan ini:

const searchUsers = (query) => {
    return users.filter(user => 
        user.name.toLowerCase().includes(query.toLowerCase()) ||
        user.email.toLowerCase().includes(query.toLowerCase()) ||
        user.role.toLowerCase().includes(query.toLowerCase())
    );
};

Itu sahaja! Anda kini mempunyai pengetahuan dunia sebenar yang praktikal tentang kaedah tatasusunan JavaScript. Gunakannya dengan bijak!

Ingat: Kebolehbacaan kod adalah lebih baik daripada pengoptimuman mikro. Pilih kaedah yang menjadikan kod anda paling jelas dahulu.

Persoalan? Tekan saya dalam komen di bawah! ?

---

Ikuti saya di X (dahulu twitter) untuk kebijaksanaan JavaScript setiap hari! Saya berkongsi petua kod bersaiz gigitan, menyahpepijat masalah dunia sebenar dan mengetahui tentang pembangunan web.

Kekal ingin tahu dan ingat: Pembangun pintar menyalin-tampal, tetapi yang bijak memahami perkara yang mereka salin. Jumpa anda di post seterusnya! ✨

Atas ialah kandungan terperinci Kaedah Tatasusunan JavaScript Diterangkan Melalui Senario Dunia Nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!