前言

拋開 JavaScript 語言設(shè)計層面的問題不說，畢竟它是 Brendan Eich 當(dāng)年用短短十天時間設(shè)計出來的，有點缺陷也是在所難免。作為開發(fā)者，我們該怎樣避免一些常見的低級錯誤呢？本文就列舉幾個常見錯誤，看看你有沒有似曾相識。

混淆 undefined 和 null

JavaScript 中的undefined和null都可用來表示沒有值，但是二者之間有所區(qū)別。undefined字面意思是“未定義”，但它的含義其實已經(jīng)超出了變量未定義的范疇：嘗試讀取對象不存在的屬性、沒有return語句的函數(shù)的返回值、聲明后沒有賦值的變量甚至顯式賦值為undefined的變量等，它們的結(jié)果都是undefined。用typeof測試它的類型，是字符串'undefined'。而null就比較純粹了，變量只有設(shè)置為null才有這個值。另外，null是對象類型，即typeof(null)的值是字符串'object'。

需要注意的是，用if判斷這兩個值都是false，而且null==undefined是成立的，這一點初學(xué)者通常容易搞混。因此，盡量統(tǒng)一把“沒有值”都設(shè)置為undefined，這樣就省去了判斷區(qū)分的麻煩。

返回undefined的函數(shù)：

const f = () => {}

設(shè)置變量的值為undefined：

x = undefined;

判斷屬性是否為undefined：

typeof obj.prop === 'undefined'
obj.prop === undefined

判斷變量是否為undefined：

typeof x === 'undefined'

變量聲明后沒有賦值，自動就有了undefined值。

如果一定要判斷null，用全等判斷：

obj.prop === null
x === null

使用typeof是無法判斷null的，因為它是對象類型。

混淆數(shù)字相加和字符串拼接

在 JavaScript 中，加號+操作符既可用于數(shù)字相加，也可以用于字符串拼接。由于 JavaScript 是動態(tài)語言，操作符會自動將變量轉(zhuǎn)成相同數(shù)據(jù)類型再運算。比如：

let x = 1 + 1; // 2

結(jié)果是 2，是我們期望的數(shù)字相加操作，因為兩個值都是數(shù)字。

但是，如果是下面這種表達式：

let x = 1 + '1'; // “11”

結(jié)果是'11'，因為第一個數(shù)字會轉(zhuǎn)換成字符串。這里的加號+運算符被用作字符串拼接，而不是數(shù)字相加。這里能直接看到表達式的值還算清楚，如果是由多個變量組成的表達式就很難判斷類型了。

為了解決這個問題，我們可以把字符串都轉(zhuǎn)成數(shù)字類型，再進行運算。例如：

let x = 1;  
let y = '2';  
let z = Number(x) + Number(y);

這樣，運行結(jié)果就是3了。Number函數(shù)接收任意類型的值，如果能轉(zhuǎn)成數(shù)字就返回數(shù)字，否則返回NaN。還可以用new Number(...).valueOf()函數(shù)：

let x = 1;  
let y = '2';  
let z = new Number(x).valueOf() + new Number(y).valueOf();

由于new Number(...)是實例化一個構(gòu)造函數(shù)，返回的是一個對象，并不是數(shù)字類型。如果要得到原始的數(shù)字類型，需要用該對象的valueOf方法。其實還有個更簡潔的方法：

let x = 1;  
let y = '2';  
let z = +x + +y;

變量前面的 + 作用是將它轉(zhuǎn)換成數(shù)字，或者NaN，跟Number函數(shù)的作用相同。

return 語句換行問題

JavaScript 語法規(guī)定換行代表語句結(jié)束。例如：

const add = (a, b) => {  
  return  
  a + b;  
}
add(1,2); // undefined

本以為會返回 3，實際上是undefined。這是因為在a + b之前，函數(shù)已經(jīng)執(zhí)行了return。要解決這個問題，有兩個做法：要么把表達式跟return放在一行，要么把表達式套一層括號。

const add = (a, b) => {  
  return a + b;  
}
// 或者
const add = (a, b) => {  
  return (  
    a + b  
  );  
}

加括號為什么可以換行呢？因為括號里的是表達式，不是語句。表達式可以拆成多行，如果很長的話。用箭頭函數(shù)會更直觀：

const add = (a, b) => a + b

箭頭函數(shù)里的單行表達式自帶return效果，當(dāng)然也可以在表達式外面套一層括號：

const add = (a, b) => (a + b)

這個括號在返回對象字面量的箭頭函數(shù)里有點用處，因為不加圓括號()的話，{}只是函數(shù)體的開始和結(jié)束標記，要返回對象字面量，還要顯式return {...}。

如果某行代碼中的語句不完整，JavaScript 解析器會將下一行的語句合并一起解析。比如：

const power = (a) => {  
  const  
    power = 10;  
  return a ** 10;  
}
// 等同于：
const power = (a) => {  
  const  power = 10;  
  return a ** 10;  
}

但是對于完整的語句，比如return，就不會合并多行。

用 return 跳出 forEach 循環(huán)

JavaScript 數(shù)組有個 forEach 方法，用于對數(shù)組元素進行循環(huán)操作。初學(xué)者很容易聯(lián)想到 for循環(huán)的break或continue關(guān)鍵字，用來中止循環(huán)。但是對不起，forEach沒有這兩個關(guān)鍵字。那用return行不行？可以用，但它的作用就是提前返回函數(shù)，跟continue的效果類似，用于結(jié)束本次循環(huán)。要跳出整個循環(huán)，return做不到。

const nums = [1, 2, 3, 4, 5, 6];
let firstEven;
nums.forEach(n => {
  if (n % 2 ===0 ) {
    firstEven = n;
    return n;
  }
});
console.log(firstEven); // 6

代碼本意是想找出第一個偶數(shù)，找到就退出循環(huán)。但實際并沒有退出循環(huán)，因此最終結(jié)果是最后一個偶數(shù)。
有解決辦法嗎？這種情況可以用for循環(huán)，或者用數(shù)組filter、find之類的方法。

總結(jié)

雖然 JavaScript 很容易上手，但稍不注意還是比較容易犯錯。本文簡單介紹了幾種容易犯的錯，希望對你有所幫助。

以上就是JavaScript初學(xué)者容易犯的幾個錯誤的詳細內(nèi)容，更多關(guān)于JS的資料請關(guān)注腳本之家其它相關(guān)文章！