Beberapa tips praktis pengoptimalan JavaScript yang perlu diketahui

Cara cepat memulai dengan VUE3.0: Masukkan pembelajaran

"Kesulitan:?" " Waktu membaca yang disarankan: 5 min "

Video utama

mengurangi kode mie if...

• if...else , kita harus memikirkan apakah ada metode pengoptimalan yang lebih baik.
• Misalnya sekarang kita perlu menghitung harga makanan di Mai Lao berdasarkan namanya, Anda boleh melakukannya.

• Cara penulisan seperti ini akan membuat isi fungsi memiliki banyak pernyataan penilaian bersyarat. Saat kita ingin menambahkan produk di lain waktu, kita perlu mengubah logika dalam fungsi dan menambahkan pernyataan if...else else membuka dan menutup sampai batas tertentu. Prinsipnya adalah ketika kita perlu menambahkan logika, kita harus mencoba menyelesaikan perubahan persyaratan dengan memperluas entitas perangkat lunak daripada memodifikasi kode yang ada untuk menyelesaikan perubahan.
• Ini adalah metode optimasi yang sangat klasik. Kita dapat menggunakan struktur data yang mirip dengan Map untuk menyimpan semua produk.

• Dengan cara ini, kita tidak perlu mengubah logika getPrice ketika kita perlu menambahkan produk lain di lain waktu. Tentu saja, lebih banyak orang di sini yang suka menggunakan foodMap secara langsung di tempat penggunaannya ide ini.
• Kemudian beberapa siswa akan bertanya saat ini, bagaimana jika saya tidak ingin hanya menggunakan string untuk key ? Kemudian Anda dapat menggunakan new Map . Idenya serupa, dan entitas tambahan diperluas untuk menyimpan perubahan.

Operasi saluran pipa menggantikan loop yang berlebihan.

• Ada daftar makanan Mai Moulao

• Jika Anda ingin mencari makanan yang termasuk dalam Set 1, bagaimana cara menemukannya?
• Di atas adalah metode yang sering kita gunakan sebelumnya. Tentunya, penggantian kita dengan filter dan map sebagai ganti loop for tidak hanya dapat membuat kode lebih efisien, tetapi juga membuat semantik lebih jelas array过滤terlebih dahulu dan kemudian重组.

Find menggantikan loop berlebihan

• atau contoh di atas. Jika kita ingin mencari makanan tertentu sesuai dengan nilai atribut dalam array objek makanan ini, penggunaan find akan keluar.

include menggantikan loop yang berlebihan

• . Mirip dengan dua detail di atas, ini semua adalah fungsi yang sudah ada, yaitu fungsi bawaan yang tidak perlu kita tulis ulang dengan terampil akan menghemat banyak waktu.
• Seperti yang kita ketahui bersama, semangkuk mie acar daging sapi Kang Fu Lao Tan terdiri dari asinan kubis , mie , potongan daging sapi , puntung rokok, dan kulit kaki kami menulisnya lebih ringkas?

• Demikian pula, tidak hanya asinan kubis dan mie daging sapi Kang Fu yang dapat dimainkan seperti ini, tetapi semua operasi serupa untuk menemukan elemen tertentu dalam array dapat dipanggil menggunakan fungsi includes .

result return value

• Ketika kita menulis beberapa fungsi dengan nilai kembalian, kita sering kesulitan dalam memberi nama variabel nilai kembalian. Bahkan untuk beberapa fungsi yang panjang, kita tidak menggunakan variabel tetapi langsung return . Kebiasaan ini sebenarnya buruk karena kita perlu memperjelas logikanya lagi ketika kita mengacu pada kode ini lain kali.
• Biasanya, dalam fungsi kecil, kita bisa menggunakan result sebagai nilai kembalian.

Pengembalian awal

• Namun, menggunakan result sebagai nilai pengembalian di atas tidak berlaku untuk semua situasi. Terkadang kita perlu mengakhiri isi fungsi lebih awal untuk mencegah rekan kerja berikutnya membaca program yang berlebihan.

• Pada contoh berikut, selectedKey kita tidak ada, kita harus segera return , sehingga kita tidak perlu melanjutkan membaca kode berikut, jika tidak maka akan menambah banyak biaya pembacaan ketika menghadapi fungsi yang lebih kompleks.

Untuk menjaga objek tetap utuh

• , seringkali ketika kita mendapatkan data yang dikembalikan oleh backend melalui permintaan, maka akan diproses sesuai dengan beberapa atribut. Jika atribut yang perlu diproses sedikit, banyak siswa yang terbiasa menggunakan metode pertama.
• Namun kenyataannya, kebiasaan ini buruk, karena ketika Anda tidak yakin apakah fungsi ini perlu menambahkan atribut ketergantungan di masa mendatang, Anda harus menjaga integritas objek. Seperti yang saya sebutkan di artikel terakhir saya, belajarlah menerima perubahan getDocDetail tidak terbatas pada Untuk menggunakan icon dan content , mungkin ada atribut seperti title dan date di masa mendatang, jadi sebaiknya kita meneruskan objek lengkap secara langsung, yang tidak hanya akan memperpendek daftar parameter tetapi juga membuat kode lebih banyak dapat dibaca.

Penggunaan operator yang cerdik

• Ketika kita perlu membuat variabel baru, dan terkadang kita perlu memeriksa apakah variabel yang direferensikan oleh nilainya adalah null atau tidak terdefinisi, kita dapat menggunakan penulisan sederhana.

Di akhir tulisan

• , pertama-tama saya ingin mengucapkan terima kasih kepada Anda semua yang telah membaca ini. Saya akan membagikan artikel ini di sini dan merangkum beberapa metode optimasi yang sangat mendasar. Saya harap dapat membantu semua orang.

[Tutorial video terkait yang direkomendasikan: web front-end]

Di atas adalah rincian dari beberapa tips praktis optimasi JavaScript yang perlu diketahui. Untuk lebih lanjut, harap perhatikan artikel terkait lainnya di situs web PHP Cina!