JavaScript 中最大的錯誤（以及如何避免它們）

JavaScript 是一種非常強大且適應性強的語言，但它也可能存在難以檢測的問題。在這篇部落格文章中，我們將探討開發人員在使用 JavaScript 時發現的五個最常見的缺陷，以及這些問題的原因和解決方案。無論您是經驗豐富的開發人員還是新手，了解這些常見危險都會為您節省故障排除時間。

這篇部落格文章的作者是 Rupesh Sharma，也稱為 @hackyrupesh。

1.非預期的全域變數

問題

JavaScript 允許在不明確聲明的情況下定義變量，這可能會導致意外的全域變數。這在大型程式碼庫或與多個開發人員合作時尤其成問題，因為它可能導致衝突和難以調試的錯誤。

例子

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

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

在上面的範例中，userName 宣告時沒有使用 var、let 或 const，因此它會自動成為全域變數。這可能會導致意外行為，特別是如果稍後在程式碼中的其他地方使用 userName。

解決方案

始終使用 let、const 或 var 宣告變數。這可以清楚地表明變數是局部變數還是全域變量，並防止意外的全域變數。

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

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

參考

• Mozilla 開發者網路 (MDN)：JavaScript 變數

---

2. 濫用該關鍵字

問題

JavaScript 中 this 的值可以根據呼叫函數的上下文而改變。這可能會導致意外的行為，尤其是在使用回呼或事件處理程序時。

例子

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

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

在此範例中，greet 中的 this 關鍵字在作為回呼傳遞給 setTimeout 時引用全域物件（或在嚴格模式下未定義），而不是使用者物件。

解決方案

使用箭頭函數或bind()來確保它保持綁定到正確的物件。

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

或者，使用箭頭函數也可以解決這個問題，因為它們沒有自己的 this 上下文。

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

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

參考

• MDN：JavaScript 中的 this

---

3. 未定義和空的混亂

問題

JavaScript 同時存在 undefined 和 null，當它們互換使用或未正確檢查時，可能會導致混亂和錯誤。

例子

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"

此處，user.age 為 null，但 if 條件將其視為 false。如果 null 旨在作為有效狀態，這可能會導致問題。

解決方案

如果應用程式中的未定義和 null 都是有效值，請始終明確檢查它們。

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

使用嚴格相等 (===) 也可以幫助區分 undefined 和 null。

參考

• MDN：空
• MDN：未定義

---

4. 回調地獄

問題

回呼函數是 JavaScript 中處理非同步操作的常用方法。然而，當它們相互嵌套時，它們可以創建深度嵌套的結構，通常稱為“回調地獄”。這使得程式碼難以閱讀、維護和調試。

例子

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

這種深度嵌套的結構很難理解，更難調試。

解決方案

使用 Promises 或 async/await 來扁平化結構並使程式碼更具可讀性。

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

或者，使用非同步/等待：

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();

參考

• MDN：承諾
• MDN：非同步/等待

---

5. 浮點精度問題

問題

JavaScript 使用 IEEE 754 標準來表示數字，這可能會導致精確度問題，尤其是浮點運算。這可能會導致計算出現意外結果。

例子

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

由於浮點精度誤差，0.1 + 0.2 的結果並不完全是 0.3。

解決方案

為了避免這種情況，您可以將結果四捨五入到固定的小數位數。

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

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

或者，透過在執行運算之前縮放數字，然後再按比例縮小來處理整數。

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 ??

以上是JavaScript 中最大的錯誤（以及如何避免它們）的詳細內容。更多資訊請關注PHP中文網其他相關文章！