JavaScript初學者容易犯的幾個錯誤
前言
拋開 javascript 語言設計層面的問KxLKoSXsIn題不說,畢竟它是 Brendan Eich 當年用短短十天時間設計出來的,有點缺陷也是在所難免。作為開發者,我們該怎樣避免一些常見的低階錯誤呢?本文就列舉幾個常見錯誤,看看你有沒有似曾相識。
混淆 undefined 和 null
javaScript 中的undefined和null都可用來表示沒有值,但是二者之間有所區別。undefined字面意思是“未定義”,但它的含義其實已經超出了變數未定義的範疇:嘗試讀取物件不存在的屬性、沒有return語句的函式的返回值、聲明後沒有賦值的變數甚至顯式賦值為undefined的變數等,它們的結果都是undefined。用typeof測試它的型別,是字串'undefined'。而null就比較純粹了,變數只有設定為null才有這個值。另外,null是物件型別,即typeof(null)的值是字串'object'。
需要注意的是,用if判斷這兩個值都是false,而且null==undefined是成立的,這一點初學者通常容易搞混。因此,儘量統一把“沒有值”都設定為unwww.cppcns.comdefined,這樣就省去了判斷區分的麻煩。
返回undefined的函式:
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的,因為它是物件型別。
混淆數字相加和字串拼接
在 JavaScript 中,加號+操作符既可用於數字相加,也可以用於字串拼接。由於 JavaScript 是動態語言,操作符會自動程式設計客棧將變數轉成相同資料型別再運算。比如:
let x = 1 + 1; // 2
結果是 2,是我們期望的數字相加操作,因為兩個值都是數字。
但是,如果是下面這種表示式:
let x = 1 + '1'; // “11”
結果是'11',因為第一個數字會轉換成字串。這裡的加號+運算子被用作字串拼接,而不是數字相加。這裡能直接看到表示式的值還算清楚,如果是由多個變數組成的表示式就很難判斷型別了。
為了解決這個問題,我們可以把字串都轉成數字型別,再進行運算。例如:
let x = 1; let y = '2'; let z = Number(x) + Number(y);
這樣,執行結果就是3了。Number函式接收任意型別的值,如果能轉成數字就返回數字,否則返回NaN。還可以用new Number(...).valueOf()函式:
let x = 1; let y = '2'; let z = new Number(x).valueOf() + new Number(y).valueOf();
由於new Number(...)是例項化一個建構函式,返回的是一個物件,並不是數字型別。如果要得到原始的數字型別,需要用該物件的valueOf方法。其實還有個更簡潔的方法:
let x = 1; let y = '2'; let z = +x + +y;
變數前面的 + 作用是將它轉換成數字,或者NaN,跟Number函式的作用相同。
return 語句換行問題
JavaScript 語法規定換行代表語句結束。例如:
const add = (a,b) => { return a + b; } add(1,2); // undefined
本以為會返回 3,實際上是undefined。這是因為在a + b之前,函式已經執行了retKxLKoSXsInurn。要解決這個問題,有兩個做法:要麼把表示式跟return放在一行,要麼把表示式套一層括號。
const add = (a,b) => { return a + b; } // 或者 const add = (a,b) => { return ( a + b ); }
加括號為什麼可以換行呢?因為括號裡的是表示式,不是語句。表示式可以拆成多行,如果很長的話。用箭頭函式會更直觀:
const add = (a,b) => a + b
箭頭函式裡的單行表示式自帶return效果,當然也可以在表示式外面套一層括號:
const add = (a,b) => (a + b)
這個括號在返回物件字面量的箭頭函式裡有點用處,因為不加圓括號()的話,{}只是函http://www.cppcns.com數體的開始和結束標記,要返回物件字面量,還要顯式return {...}。
如果某行程式碼中的語句不完整,JavaScript 解析器會將下一行的語句合併一起解析。比如:
const power = (a) => { const power = 10; return a ** 10; } // 等同於: const power = (a) => { const power = 10; return a ** 10; }
但是對於完整的語句,比如return,就不會合並多行。
用 return 跳出 forEach 迴圈
JavaScript 陣列有個 forEach 方法,用於對陣列元素進行迴圈操作。初學者很容易聯想到 for迴圈的break或continue關鍵字,用來中止迴圈。但是對不起,forEach沒有這兩個關鍵字。那用return行不行?可以用,但它的作用就是提前返回函式,跟continue的效果類似,用於結束本次迴圈。要跳出整個迴圈,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
程式碼本意是想找出第一個偶數,找到就退出迴圈。但實際並沒有退出迴圈,因此最終結果是最後一個偶數。
有解決辦法嗎?這種情況可以用for迴圈,或者用陣列filter、find之類的方法。
總結
雖然 JavaScript 很容易上手,但稍不注意還是比較容易犯錯。本文簡單介紹了幾種容易犯的錯,希望對你有所幫助。
以上就是JavaScript初學者容易犯的幾個錯誤的詳細內容,更多關於js的資料請關注我們其它相關文章!