Artikel yang meringkaskan 5 petua pengoptimuman kod JavaScript

Dalam artikel ini, kami akan memperkenalkan 5 petua pengoptimuman kod untuk membantu menulis kod yang lebih cekap dan elegan. Petua ini terdiri daripada menggunakan operator spread untuk memudahkan kod kepada menggunakan async/await untuk mengendalikan kod tak segerak.

1. Gunakan operator hamparan untuk menyahbina objek dan tatasusunan

Operator hamparan diwakili oleh tiga titik ... dan boleh digunakan untuk memusnahkan objek dan tatasusunan. Untuk objek, ia membolehkan penciptaan objek baharu dengan mudah menggunakan subset sifat objek lain.

const numbersObj = { a: 1, b: 2, c: 3 };
const newObject = { ...numbersObj, b: 4 };
console.log(newObject); // { a: 1, b: 4, c: 3 }

Untuk tatasusunan, gunakan operator hamparan untuk mengekstrak dan memanipulasi elemen tatasusunan dengan mudah.

const numbersArray = [1, 2, 3, 4, 5];
const newArray = [...numbersArray.slice(0, 2), 6, ...numbersArray.slice(4)];
console.log(newArray); // [ 1, 2, 6, 5 ]

Mengenai operator pemusnah, jika anda berminat, anda boleh merujuk kepada:

• 5 senario biasa dan contoh tugasan pemusnahan JavaScript
• Mari kita bincangkan tentang pemusnahan objek dalam JavaScript sekali lagi

2 Gunakan async/wait untuk memudahkan kod tak segerak

async/await ialah cara untuk. memudahkan pemprosesan kod tak segerak dalam kaedah JavaScript. Ia membenarkan menulis kod tak segerak dengan cara yang kelihatan dan berkelakuan seperti kod segerak.

async function getData() {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();
    console.log(data);
}
getData();

3. Gunakan objek proksi untuk akses harta lanjutan

Objek Proksi dalam JavaScript membenarkan akses pemintasan dan harta tersuai. Ini berguna untuk pengesahan data lanjutan, pengelogan, dsb.

Objek Proksi digunakan untuk mencipta proksi bagi objek untuk melaksanakan pemintasan dan penyesuaian operasi asas (seperti carian atribut, tugasan, penghitungan, panggilan fungsi, dll.).

const target = {};
const handler = {
    get: (target, prop) => {
        console.log(`获取属性：${prop}`);
        return target[prop];
    },
    set: (target, prop, value) => {
        console.log(`属性 ${prop} 更新为 ${value}`);
        target[prop] = value;
    },
};
const proxy = new Proxy(target, handler);

proxy.name = "DevPoint";
console.log(proxy.name);

4. Optimumkan logik bersyarat menggunakan operator ternary

Operator ternary ialah cara ringkas untuk menulis pernyataan if-else mudah dalam JavaScript. Ini adalah cara yang ringkas dan cekap untuk menyatakan keadaan dan akibatnya yang sepadan.

const x = 5;
const result = x > 0 ? "positive" : "negative";
console.log(result); // positive

Ia juga boleh bersarang untuk keadaan yang lebih kompleks.

const age = 30;
const result =
    age < 18 ? "未成年人" : age >= 18 && age < 60 ? "成年人" : "老年人";
console.log(result); // 成年人

5 Gunakan IIFE untuk melindungi privasi data

IIFE ialah singkatan daripada Immediately Invoked Function Expression (ungkapan fungsi yang dipanggil serta-merta), iaitu fungsi JavaScript yang dilaksanakan serta-merta apabila ia ditakrifkan, dan buat skop peribadi untuk pembolehubah. Ini berguna untuk melindungi privasi data kerana ia memastikan pembolehubah yang diisytiharkan dalam IIFE tidak boleh diakses dari luar.

Anda boleh menggunakan format ini untuk mencipta pakej untuk aplikasi anda, meletakkan logik kod ke dalam ruang nama untuk mengelakkan konflik berubah-ubah untuk memastikan kod peribadi, dan pakej peribadi ini sesuai untuk pengenalan kepada halaman dengan <script> tag. Anda biasanya boleh melihat bahawa kod statistik WEB diperkenalkan ke dalam halaman dengan cara ini.

(function () {
    let key = "这是一个安全密钥";
})();
console.log(key); // ReferenceError: key is not defined

Apa yang IIFE benar-benar mahir ialah keupayaan untuk mencipta skop Sebarang pembolehubah dalam IIFE tidak dapat dilihat oleh dunia luar. Kurangkan penjanaan pembolehubah global dan elakkan kemungkinan konflik nama pembolehubah.

Mari kita lihat contoh:

(function initGame() {
    // 无法在 IIFE 外部访问的私有变量
    var lives;
    var player;

    init();

    // 在 IIFE 之外无法访问的私有函数
    function init() {
        lives = 5;
        player = "devpoint";
    }
})();

Dalam contoh ini, dua pembolehubah diisytiharkan, kedua-duanya adalah peribadi, iaitu, hanya sah untuk IIFE itu sendiri. Ia tidak boleh diakses oleh sesiapa di luar IIFE. Selain itu, terdapat kaedah init, yang tidak boleh diakses dari luar.

Jika anda telah membaca kod sumber jQuery, anda harus biasa dengan kod berikut:

(function ($, global, document) {
    // 对 jQuery 使用 $，对 window 使用 global
})(jQuery, window, document);

Ringkasan

Dengan mengumpulkan petua pengekodan ini, anda boleh meningkatkan penulisan keanggunan dan kebolehselenggaraan Keupayaan kod.

Pembelajaran yang disyorkan: "Tutorial Video JavaScript"

Atas ialah kandungan terperinci Artikel yang meringkaskan 5 petua pengoptimuman kod JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!