Pepijat iggest teratas dalam JavaScript (Dan Cara Mengelakkannya)

JavaScript ialah bahasa yang sangat kuat dan boleh disesuaikan, tetapi ia juga berpotensi untuk masalah yang sukar dikesan. Dalam artikel blog ini, kita akan melihat lima kelemahan paling biasa yang ditemui oleh pembangun semasa bekerja dengan JavaScript, serta sebab dan penyelesaian kepada isu ini. Sama ada anda seorang pembangun yang berpengalaman atau baru bermula, mengetahui bahaya biasa ini akan menjimatkan masa anda untuk menyelesaikan masalah.

Artikel blog ini dikarang oleh Rupesh Sharma, juga dikenali sebagai @hackyrupesh.

1. Pembolehubah Global yang Tidak Diingini

Masalahnya

JavaScript membenarkan pembolehubah ditakrifkan tanpa mengisytiharkannya secara eksplisit, yang boleh membawa kepada pembolehubah global yang tidak diingini. Ini amat bermasalah dalam pangkalan kod yang besar atau apabila bekerja dengan berbilang pembangun, kerana ia boleh membawa kepada konflik dan ralat yang sukar dinyahpepijat.

Contoh

function setUserName() {
    userName = "Alice"; // userName is now a global variable
}

setUserName();
console.log(userName); // Outputs: "Alice"

Dalam contoh di atas, nama pengguna diisytiharkan tanpa var, let, atau const, jadi ia secara automatik menjadi pembolehubah global. Ini boleh membawa kepada tingkah laku yang tidak dijangka, terutamanya jika nama pengguna kemudian digunakan di tempat lain dalam kod.

Penyelesaian

Sentiasa isytiharkan pembolehubah menggunakan let, const atau var. Ini menjelaskan sama ada pembolehubah adalah tempatan atau global dan menghalang pembolehubah global yang tidak disengajakan.

function setUserName() {
    let userName = "Alice"; // userName is now a local variable
}

setUserName();
console.log(userName); // ReferenceError: userName is not defined

Rujukan

• Rangkaian Pembangun Mozilla (MDN): Pembolehubah JavaScript

---

2. Menyalahgunakan Kata Kunci ini

Masalahnya

Nilai ini dalam JavaScript boleh berubah bergantung pada konteks di mana fungsi dipanggil. Ini boleh membawa kepada tingkah laku yang tidak dijangka, terutamanya apabila menggunakan panggilan balik atau pengendali acara.

Contoh

const user = {
    name: "Alice",
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

setTimeout(user.greet, 1000); // Outputs: "Hello, my name is undefined"

Dalam contoh ini, kata kunci dalam salam ini merujuk kepada objek global (atau tidak ditentukan dalam mod ketat) apabila dihantar sebagai panggilan balik kepada setTimeout, bukannya objek pengguna.

Penyelesaian

Gunakan fungsi anak panah atau bind() untuk memastikan ini kekal terikat pada objek yang betul.

setTimeout(user.greet.bind(user), 1000); // Outputs: "Hello, my name is Alice"

Sebagai alternatif, menggunakan fungsi anak panah juga boleh menyelesaikan isu kerana mereka tidak mempunyai konteks ini sendiri.

const user = {
    name: "Alice",
    greet: function() {
        setTimeout(() => console.log(`Hello, my name is ${this.name}`), 1000);
    }
};

user.greet(); // Outputs: "Hello, my name is Alice"

Rujukan

• MDN: ini dalam JavaScript

---

3. Kekeliruan Tidak Tertakrif dan Null

Masalahnya

JavaScript mempunyai kedua-dua undefined dan null, yang boleh menyebabkan kekeliruan dan pepijat apabila ia digunakan secara bergantian atau tidak disemak dengan betul.

Contoh

let user = {
    name: "Alice",
    age: null
};

if (user.age) {
    console.log(`User's age is ${user.age}`);
} else {
    console.log("Age is not provided");
}
// Outputs: "Age is not provided"

Di sini, user.age adalah batal, tetapi syarat if menganggapnya sebagai palsu. Ini boleh menyebabkan isu jika null bertujuan untuk menjadi keadaan yang sah.

Penyelesaian

Sentiasa semak undefined dan null secara eksplisit jika kedua-duanya adalah nilai yang sah dalam aplikasi anda.

if (user.age !== null && user.age !== undefined) {
    console.log(`User's age is ${user.age}`);
} else {
    console.log("Age is not provided");
}

Menggunakan kesaksamaan yang ketat (===) juga boleh membantu membezakan antara undefined dan null.

Rujukan

• MDN: Batal
• MDN: Tidak ditentukan

---

4. Neraka Panggilan Balik

Masalahnya

Fungsi panggil balik ialah cara biasa untuk mengendalikan operasi tak segerak dalam JavaScript. Walau bagaimanapun, apabila mereka bersarang antara satu sama lain, mereka boleh mencipta struktur bersarang dalam, sering dirujuk sebagai "neraka panggilan balik." Ini menjadikan kod sukar dibaca, diselenggara dan nyahpepijat.

Contoh

doSomething(function(result1) {
    doSomethingElse(result1, function(result2) {
        doAnotherThing(result2, function(result3) {
            doFinalThing(result3, function(finalResult) {
                console.log(finalResult);
            });
        });
    });
});

Struktur bersarang dalam ini sukar untuk diikuti dan lebih sukar untuk dinyahpepijat.

Penyelesaian

Gunakan Janji atau async/tunggu untuk meratakan struktur dan menjadikan kod lebih mudah dibaca.

doSomething()
    .then(result1 => doSomethingElse(result1))
    .then(result2 => doAnotherThing(result2))
    .then(result3 => doFinalThing(result3))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

Atau, menggunakan async/menunggu:

async function executeTasks() {
    try {
        const result1 = await doSomething();
        const result2 = await doSomethingElse(result1);
        const result3 = await doAnotherThing(result2);
        const finalResult = await doFinalThing(result3);
        console.log(finalResult);
    } catch (error) {
        console.error(error);
    }
}

executeTasks();

Rujukan

• MDN: Janji
• MDN: tak segerak/menunggu

---

5. Isu Ketepatan Titik Terapung

Masalahnya

JavaScript menggunakan standard IEEE 754 untuk mewakili nombor, yang boleh membawa kepada isu ketepatan, terutamanya dengan aritmetik titik terapung. Ini boleh menyebabkan keputusan yang tidak dijangka dalam pengiraan.

Contoh

console.log(0.1 + 0.2); // Outputs: 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // Outputs: false

Hasil 0.1 + 0.2 bukanlah 0.3 tepat kerana ralat ketepatan titik terapung.

Penyelesaian

Untuk mengelakkan perkara ini, anda boleh membundarkan keputusan kepada nombor tetap tempat perpuluhan.

function isEqual(a, b) {
    return Math.abs(a - b) < Number.EPSILON;
}

console.log(isEqual(0.1 + 0.2, 0.3)); // Outputs: true

Sebagai alternatif, bekerjasama dengan integer dengan menskalakan nombor sebelum melakukan operasi dan kemudian mengecilkannya semula.

console.log((0.1 * 10 + 0.2 * 10) / 10); // Outputs: 0.3

References

• MDN: Number.EPSILON
• The Problem with Floating Point Arithmetic

---

Conclusion

JavaScript is a language full of idiosyncrasies and hidden risks, but knowing the most frequent flaws and how to avoid them allows you to develop cleaner, more dependable code. From unwanted global variables to floating-point accuracy concerns, each of these flaws can create major difficulties if not addressed. However, with proper coding methods and the correct tools, you can reduce these concerns and make your JavaScript code more resilient.

this blog written by Chatgpt ??

Atas ialah kandungan terperinci Pepijat iggest teratas dalam JavaScript (Dan Cara Mengelakkannya). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!