JavaScript初學者容易犯的幾個錯誤
前言
拋開 JavaScript 語言設計層面的問題不說,畢竟它是 Brendan Eich 當年用短短十天時間設計出來的,有點缺陷也是在所難免。作為開發(fā)者,我們該怎樣避免一些常見的低級錯誤呢?本文就列舉幾個常見錯誤,看看你有沒有似曾相識。
混淆 undefined 和 null
JavaScript 中的undefined和null都可用來表示沒有值,但是二者之間有所區(qū)別。undefined字面意思是“未定義”,但它的含義其實已經(jīng)超出了變量未定義的范疇:嘗試讀取對象不存在的屬性、沒有return語句的函數(shù)的返回值、聲明后沒有賦值的變量甚至顯式賦值為undefined的變量等,它們的結果都是undefined。用typeof測試它的類型,是字符串'undefined'。而null就比較純粹了,變量只有設置為null才有這個值。另外,null是對象類型,即typeof(null)的值是字符串'object'。
需要注意的是,用if判斷這兩個值都是false,而且null==undefined是成立的,這一點初學者通常容易搞混。因此,盡量統(tǒng)一把“沒有值”都設置為undefined,這樣就省去了判斷區(qū)分的麻煩。
返回undefined的函數(shù):
const f = () => {}
設置變量的值為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
結果是 2,是我們期望的數(shù)字相加操作,因為兩個值都是數(shù)字。
但是,如果是下面這種表達式:
let x = 1 + '1'; // “11”
結果是'11',因為第一個數(shù)字會轉(zhuǎn)換成字符串。這里的加號+運算符被用作字符串拼接,而不是數(shù)字相加。這里能直接看到表達式的值還算清楚,如果是由多個變量組成的表達式就很難判斷類型了。
為了解決這個問題,我們可以把字符串都轉(zhuǎn)成數(shù)字類型,再進行運算。例如:
let x = 1; let y = '2'; let z = Number(x) + Number(y);
這樣,運行結果就是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(...)是實例化一個構造函數(shù),返回的是一個對象,并不是數(shù)字類型。如果要得到原始的數(shù)字類型,需要用該對象的valueOf方法。其實還有個更簡潔的方法:
let x = 1; let y = '2'; let z = +x + +y;
變量前面的 + 作用是將它轉(zhuǎn)換成數(shù)字,或者NaN,跟Number函數(shù)的作用相同。
return 語句換行問題
JavaScript 語法規(guī)定換行代表語句結束。例如:
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效果,當然也可以在表達式外面套一層括號:
const add = (a, b) => (a + b)
這個括號在返回對象字面量的箭頭函數(shù)里有點用處,因為不加圓括號()的話,{}只是函數(shù)體的開始和結束標記,要返回對象字面量,還要顯式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)操作。初學者很容易聯(lián)想到 for循環(huán)的break或continue關鍵字,用來中止循環(huán)。但是對不起,forEach沒有這兩個關鍵字。那用return行不行?可以用,但它的作用就是提前返回函數(shù),跟continue的效果類似,用于結束本次循環(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),因此最終結果是最后一個偶數(shù)。
有解決辦法嗎?這種情況可以用for循環(huán),或者用數(shù)組filter、find之類的方法。
總結
雖然 JavaScript 很容易上手,但稍不注意還是比較容易犯錯。本文簡單介紹了幾種容易犯的錯,希望對你有所幫助。
以上就是JavaScript初學者容易犯的幾個錯誤的詳細內(nèi)容,更多關于JS的資料請關注腳本之家其它相關文章!
相關文章
全面解析Bootstrap中tooltip、popover的使用方法
這篇文章主要為大家詳細解析了Bootstrap中tooltip、popover的使用方法,了解提示框、彈出框的實現(xiàn)原理,感興趣的朋友可以參考一下2016-06-06深入理解JavaScript Promise鏈式調(diào)用與錯誤處理機制
在JavaScript的異步編程中,Promise是一個非常重要的概念,它允許我們以鏈式的方式處理異步操作,使得代碼更加清晰和易于管理,本文將通過一系列代碼示例,深入探討Promise的鏈式調(diào)用和錯誤處理機制,需要的朋友可以參考下2024-09-09javascript刪除數(shù)組元素并且數(shù)組長度減小的簡單實例
本篇文章主要是對javascript刪除數(shù)組元素并且數(shù)組長度減小的簡單實例進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02微信小程序?qū)崿F(xiàn)密碼顯示與隱藏的睜眼閉眼功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)密碼顯示與隱藏的睜眼閉眼功能,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧2023-02-02