JavaScript 是一種給網(wǎng)頁添加功能和交互的腳本語言，對于使用不同編程語言的初學者來說很容易理解。有了一些教程，你就可以馬上開始使用它了。

但很多初學者都會犯一些常見的錯誤。在這篇文章中，我們將介紹 9 個常見的錯誤（或者說不好的實踐）以及它們的解決方案，幫助你成為更好的 JavaScript 開發(fā)者。

[[345094]]

將賦值操作符（=）和相等操作符（==，===）混為一談

正如名稱所示，賦值操作符是用來給變量賦值的。開發(fā)者常常把它與相等操作符混淆。

舉個例子：

const name = "javascript"; 
 
if ((name = "nodejs")) { 
 
console.log(name); 
 
} 
 
// output - nodejs 

本例中，不是比較 name 變量和 nodejs 字符串，而是為 name 賦值 nodejs ，并將 nodejs 輸出到控制臺。

在 JavaScript 中，兩個等號（==）和三個等號（===）是比較操作符。

對于上述代碼，可以使用以下方法比較值：

const name = "javascript"; 
 
if (name == "nodejs") { 
 
console.log(name); 
 
} 
 
// no output 
 
// OR 
 
if (name === "nodejs") { 
 
console.log(name); 
 
} 
 
// no output 

這兩個比較操作符的區(qū)別是：兩個等號執(zhí)行寬松的比較，三個等號執(zhí)行嚴格的比較。

大致比較時，只比較值。但嚴格地說，值和數(shù)據(jù)類型都是要比較的。

下面的代碼更好地解釋了這一點：

const number = "1"; 
 
console.log(number == 1); 
 
// true 
 
console.log(number === 1); 
 
// false 

給變量 number 賦值 1 。如果將 number 用雙等號與 1 進行比較，會返回 true，因為兩個值都是 1。

然而，在用三個等號的情況下，因為每個值的數(shù)據(jù)類型不同，所以返回 false。

預期的回調(diào)是同步的

在 JavaScript 里，用回調(diào)方法處理異步操作。然而，Promises 和 async/await 是處理異步操作的首選方法，因為多次回調(diào)會導致回調(diào)地獄。

回調(diào)是不同步的。在延遲執(zhí)行完成操作之后，它們作為一個函數(shù)被調(diào)用。

例如，全局 setTimeout 接收回調(diào)函數(shù)作為第一個參數(shù)，接收持續(xù)時間（毫秒）作為第二個參數(shù)：

function callback() { 
 
console.log("I am the first"); 
 
} 
 
setTimeout(callback, 300); 
 
console.log("I am the last"); 
 
// output 
 
// I am the last 
 
// I am the first 

在 300ms 之后，調(diào)用回調(diào)函數(shù)。但是代碼的其余部分在完成前運行，因此，最后一個 console.log 將首先運行。

開發(fā)者經(jīng)常犯的一個錯誤就是誤解了回調(diào)是同步的，比如，認為回調(diào)函數(shù)一個值用于其他操作。

錯誤在于：

function addTwoNumbers() { 
 
let firstNumber = 5; 
 
let secondNumber; 
 
setTimeout(function () { 
 
secondNumber = 10; 
 
}, 200); 
 
console.log(firstNumber + secondNumber); 
 
} 
 
addTwoNumbers(); 
 
// NaN 

由于 secondNumber 不確定，所以輸出 NaN 。運行 firstNumber+secondNumber 的時候，仍然沒有定義 secondNumber ，因為 setTimeout 函數(shù)會在 200ms 之后執(zhí)行回調(diào)。

最好的方法是在回調(diào)函數(shù)中執(zhí)行剩余的代碼：

function addTwoNumbers() { 
 
let firstNumber = 5; 
 
let secondNumber; 
 
setTimeout(function () { 
 
secondNumber = 10; 
 
console.log(firstNumber + secondNumber); 
 
}, 200); 
 
} 
 
addTwoNumbers(); 
 
// 15 

this 指代錯誤

在 JavaScript 中，this 是一個常被誤解的概念。在 JavaScript 使用 this，你需要理解它的作用是什么，這里的 this 跟其他語言中的 this 用法不同。

以下是關于 this 的常見錯誤的示例：

const obj = { 
 
name: "JavaScript", 
 
printName: function () { 
 
console.log(this.name); 
 
}, 
 
printNameIn2Secs: function () { 
 
setTimeout(function () { 
 
console.log(this.name); 
 
}, 2000); 
 
}, 
 
}; 
 
obj.printName(); 
 
// JavaScript 
 
obj.printNameIn2Secs(); 
 
// undefined 

第一個結果是 JavaScript ，因為 this.name 正確地指向?qū)ο蟮?name 屬性。第二個結果是 undefined ，因為 this 未指代對象的屬性（包括 name）。

原因在于 this 依賴于正在調(diào)用該函數(shù)的對象。每個函數(shù)都有一個 this 變量，但是它的指向由調(diào)用 this 的對象決定。

bj.printName() 的 this 直接指向 obj 。 obj.printNameIn2Secs 的 this 直接指向 obj 。然而，但是 this 在回調(diào)函數(shù) setTimeout 中沒有指向任何對象，因為沒有任何對象調(diào)用它。

如果一個對象調(diào)用 setTimeout ，則執(zhí)行 obj.setTimeout... 。因為沒有對象調(diào)用這個函數(shù)，所以使用默認對象（即 window ）。

window 上沒有 name ，故返回 undefined 。

在 setTimeout 中保留 this 指代的最好方法是使用 bind 、 call 、 apply 或箭頭功能（在 ES6 中引入）。不同于常規(guī)函數(shù)，箭頭函數(shù)不創(chuàng)建自己的 this 。

所以，下面的代碼會保留 this 指代：

const obj = { 
 
name: "JavaScript", 
 
printName: function () { 
 
console.log(this.name); 
 
}, 
 
printNameIn2Secs: function () { 
 
setTimeout(() => { 
 
console.log(this.name); 
 
}, 2000); 
 
}, 
 
}; 
 
obj.printName(); 
 
// JavaScript 
 
obj.printNameIn2Secs(); 
 
// JavaScript 

忽視對象的可變性

JavaScript 對象中的引用數(shù)據(jù)類型不像字符串、數(shù)字等原始數(shù)據(jù)類型。比如，在鍵值對對象中：

const obj1 = { 
 
name: "JavaScript", 
 
}; 
 
const obj2 = obj1; 
 
obj2.name = "programming"; 
 
console.log(obj1.name); 
 
// programming 

obj1 和 obj2 在內(nèi)存中指向相同的地址。

在數(shù)組中：

const arr1 = [2, 3, 4]; 
 
const arr2 = arr1; 
 
arr2[0] = "javascript"; 
 
console.log(arr1); 
 
// ['javascript', 3, 4] 

開發(fā)者經(jīng)常犯的一個錯誤是忽略了 JavaScript 的這個特性，而這將導致意外的錯誤。

如果出現(xiàn)這種情況，訪問原始屬性的任何嘗試都會返回 undefined 或者引發(fā)錯誤。

最好的方法是，當你想復制一個對象的時候，總是創(chuàng)建一個新的引用。為了達到這個目的，擴展運算符（在 ES6 中引入的 ... ）就是一個完美的解決方案。

比如，在鍵值對對象中：

const obj1 = { 
 
name: "JavaScript", 
 
}; 
 
const obj2 = { ...obj1 }; 
 
console.log(obj2); 
 
// {name: 'JavaScript' } 
 
obj2.name = "programming"; 
 
console.log(obj.name); 
 
// 'JavaScript' 

在數(shù)組中：

const arr1 = [2, 3, 4]; 
 
const arr2 = [...arr1]; 
 
console.log(arr2); 
 
// [2,3,4] 
 
arr2[0] = "javascript"; 
 
console.log(arr1); 
 
// [2, 3, 4] 

保存數(shù)組和對象至瀏覽器儲存

使用 JavaScript 的時候，開發(fā)者可能希望利用 localStorage 來保存值。然而，一個常見的錯誤是直接將數(shù)組和對象保存在 localStorage 中。 localStorage 只接收字符串。

JavaScript 將對象轉(zhuǎn)換成字符串以保來保存，其結果是對象保存為 [Object Object] ，數(shù)組保存為逗號分隔開的字符串。

比如：

const obj = { name: "JavaScript" }; 
 
window.localStorage.setItem("test-object", obj); 
 
console.log(window.localStorage.getItem("test-object")); 
 
// [Object Object] 
 
const arr = ["JavaScript", "programming", 45]; 
 
window.localStorage.setItem("test-array", arr); 
 
console.log(window.localStorage.getItem("test-array")); 
 
// JavaScript, programming, 45 

在保存這些對象時，很難訪問它們。例如，對于一個對象，通過 .name 訪問它會導致錯誤。因為 [Object Object] 現(xiàn)在是一個字符串，而不包含 name 屬性。

通過使用 JSON.stringify （將對象轉(zhuǎn)換為字符串）和 JSON.parse （將字符串轉(zhuǎn)換為對象），可以更好地保存本地存儲對象和數(shù)組。通過這種方式可以輕松訪問對象。

上述代碼的正確版本為：

const obj = { name: "JavaScript" }; 
 
window.localStorage.setItem("test-object", JSON.stringify(obj)); 
 
const objInStorage = window.localStorage.getItem("test-object"); 
 
console.log(JSON.parse(objInStorage)); 
 
// {name: 'JavaScript'} 
 
const arr = ["JavaScript", "programming", 45]; 
 
window.localStorage.setItem("test-array", JSON.stringify(arr)); 
 
const arrInStorage = window.localStorage.getItem("test-array"); 
 
console.log(JSON.parse(arrInStorage)); 
 
// JavaScript, programming, 45 

不使用默認值

為動態(tài)變量設置默認值是一個很好的預防意外錯誤的方法。這里有一個常見錯誤的例子：

function addTwoNumbers(a, b) { 
 
console.log(a + b); 
 
} 
 
addTwoNumbers(); 
 
// NaN 

由于 a 為 undefined ， b 也為 undefined ，因此結果為 NaN 。你可以使用默認值防止類似錯誤，比如：

function addTwoNumbers(a, b) { 
 
if (!a) a = 0; 
 
if (!b) b = 0; 
 
console.log(a + b); 
 
} 
 
addTwoNumbers(); 
 
// 0 

此外，可以在 ES6 中這樣使用默認值：

function addTwoNumbers(a = 0, b = 0) { 
 
console.log(a + b); 
 
} 
 
addTwoNumbers(); 
 
// 0 

此示例雖小，但強調(diào)了默認值的重要性。

另外，如果沒有提供期望，開發(fā)者可以提供一個錯誤或者警告信息。

變量命名錯誤

是的，開發(fā)者還是會犯這個錯誤。命名是困難的，但開發(fā)人員沒有其他選擇。注解和命名變量一樣，都是編程的好習慣。

比如：

function total(discount, p) { 
 
return p * discount 
 
} 

變量 discount 沒問題，但是 p 或者 total 呢？是什么的 total ？最好是：

function totalPrice(discount, price) { 
 
return discount * price 
 
} 

對變量進行適當?shù)拿浅Ｖ匾?，因為在特定的時間和將來，可能有別的開發(fā)者使用這個代碼庫。

適當?shù)孛兞繒屫暙I者很容易理解項目是如何運行的。

檢查布爾值

const isRaining = false 
 
if(isRaining) { 
 
console.log('It is raining') 
 
} else { 
 
console.log('It is not raining') 
 
} 
 
// It is not raining 

上面的示例中是一種常見的檢查 Boolean 值的方法，但是在測試某些值時還是出現(xiàn)了錯誤。

在 JavaScript 中，比較 0 和 false 會返回 true ，比較 1 和 true 會返回 true 。這就是說，如果 isRaining 是 1，那么它就是 true 。

這常在對象中出現(xiàn)錯誤，比如：

const obj = { 
 
name: 'JavaScript', 
 
number: 0 
 
} 
 
if(obj.number) { 
 
console.log('number property exists') 
 
} else { 
 
console.log('number property does not exist') 
 
} 
 
// number property does not exist 

盡管存在 number 屬性，但 obj.number 返回 0 ，這是一個假值，因此執(zhí)行了 else 代碼。

所以，除非你確定了要使用的值的范圍，否則你應該測試布爾值和對象中的屬性：

if(a === false)... 
 
if(object.hasOwnProperty(property))... 

使人迷惑的添加和連接

在 JavaScript 中，加號（ + ）有兩種功能：相加和連接。相加是針對數(shù)字，而連接是針對字符串。有些開發(fā)者經(jīng)常誤用這個操作符。

比如：

const num1 = 30; 
 
const num2 = "20"; 
 
const num3 = 30; 
 
const word1 = "Java" 
 
const word2 = "Script" 
 
console.log(num1 + num2); 
 
// 3020 
 
console.log(num1 + num3); 
 
// 60 
 
console.log(word1 + word2); 
 
// JavaScript 

將字符串和數(shù)字相加時，JavaScript 會把數(shù)字轉(zhuǎn)換成字符串。而數(shù)字相加時，則進行數(shù)學運算。

總結

除了上面羅列出的，肯定還有更多錯誤（小錯誤或大錯誤）。所以，你需要知道最新的語言發(fā)展動態(tài)。

學習和避免這些錯誤將有助于你構建更好、更可靠的 Web 應用程序和工具。