JavaScript 初學者容易犯的幾個錯誤,你中招沒?
JavaScript 是對初學者比較友好的一門程式語言,基本上花個半小時看下語法就能寫出能執行的程式碼。JavaScript 是動態指令碼語言,對資料型別沒有太多的限制,寫起來非常靈活。但正因為如此,初學者如果不深入瞭解語言本身,往往會犯一些錯誤,從而導致一些很難發現的 bug。
拋開 JavaScript 語言設計層面的問題不說,畢竟它是 Brendan Eich 當年用短短十天時間設計出來的,有點缺陷也是在所難免。作為開發者,我們該怎樣避免一些常見的低階錯誤呢?本文就列舉幾個常見錯誤,看看你有沒有似曾相識。
混淆 undefined 和 null
JavaScript 中的undefined
null
都可用來表示沒有值,但是二者之間有所區別。undefined
字面意思是“未定義”,但它的含義其實已經超出了變數未定義的範疇:嘗試讀取物件不存在的屬性、沒有return
語句的函式的返回值、聲明後沒有賦值的變數甚至顯式賦值為undefined
的變數等,它們的結果都是undefined
。用typeof
測試它的型別,是字串 'undefined'
。而 null
就比較純粹了,變數只有設定為null
才有這個值。另外,null
是物件型別,即typeof(null)
的值是字串'object'
。
需要注意的是,用if
判斷這兩個值都是false
,而且null==undefined
是成立的,這一點初學者通常容易搞混。因此,儘量統一把“沒有值”都設定為undefined
返回 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
之前,函式已經執行了return
。要解決這個問題,有兩個做法:要麼把表示式跟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)
這個括號在返回物件字面量的箭頭函式裡有點用處,因為不加圓括號()
的話,{}
只是函式體的開始和結束標記,要返回物件字面量,還要顯式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 很容易上手,但稍不注意還是比較容易犯錯。本文簡單介紹了幾種容易犯的錯,希望對你有所幫助。
更多前端技術乾貨盡在微信公眾號:1024譯站
相關推薦
JavaScript 初學者容易犯的幾個錯誤,你中招沒?
JavaScript 是對初學者比較友好的一門程式語言,基本上花個半小時看下語法就能寫出能執行的程式碼。JavaScript 是動態指令碼語言,對資料型別沒有太多的限制,寫起來非常靈活。但正因為如此,初學者如果不深入瞭解語言本身,往往會犯一些錯誤,從而導致一些很難發現的 bug。 拋開 JavaScript
程式設計師程式設計生涯中常會犯的7個錯誤,你中了嗎?
作為軟體開發人員生活和職業指導,我需要和很多程式設計師交流,幫助他們提升職業生涯,加速成長。 時間久了,我發現很多程式設計師總是犯著相同的錯誤,前仆後繼,卻毫不自知。 下面就是程式設計師在他們的軟體開發生涯中最常犯的7個錯誤。 ▼沒有明確的目標 心中沒有終點目標,那就只會隨波逐流。
【項目管理】經驗之談 | 資深項目經理都避免的5個坑,你中招了嗎?
尊重 最終 fail 同方 快速 這就是 tro 理解 動力 哈嘍!大家好! 那天看到最有趣的一句話就是 為了填坑,一位項目經理胖了20斤 。。。。。 今天就給大家介紹一下 項目經理要註意的那些“坑” 項目經理“誤踩雷區” 1 未告知成員工作目標 作為項目經理
電腦配置太低?使用這幾個網站,你的電腦軟件要少裝一半!
atp 一周 即使 exc 你們的 不用 過多 電腦軟件 提升 你還在為你的電腦配置太低導致軟件過多而卡頓感到煩惱?還是電腦遊戲太多,無法運行一些其他軟件而不開心?其實不用難過,小編教你們使用一些在線網站,可以輕松的將你的電腦上的軟件少安裝一半!你們準備好了嗎! 一.創客
Java程式設計師不可不知的幾個網站,你去過幾個?
看到網上IT友人積累的網址,非常不錯,不少我也知道,非常值得去學習,特此也借他人幫助記錄一下!!非常感謝!! 轉自:http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&i
陪王思聰刷了一年微博,他賺了幾個億,你呢?
王思聰一直是熱搜榜上的常客。 ig奪冠的熱潮還沒有褪去,王思聰吃熱狗的照片也是火的一塌糊塗,很快取代各種表情包,還出了各種手辦、手機殼、漫畫、衍生品層出不窮。 圖片源自網路,僅做配文展示,不做商用 豪擲113萬被稱為2018年最成功的營銷手段。 最近在繼不知妻美劉強東之
面試超常見的幾個問題,你真的會回答嗎?(內附詳細回答思路)
“請你自我介紹一下” 思路:1、這是面試的必考題。2、介紹內容要與個人簡歷一致。3、表述方式儘量口語化。4、切中要害,不談無關、無用的內容。5、條理要清晰,層次要分明。6、事先最好以文字的形式寫好背熟。 “你有什麼業餘愛好?” 思路:1、業餘愛好能在一定程度上反映應聘者的性格、觀念、心態,這是HR問該問
一個合格的web前端程式設計師應該具備的幾個條件,你知道嗎?
自己經常與前端程式設計師接觸,下面就來聊聊一個合格的WEB前端都需要具備些什麼?響應式頁面佈局既然是前端,那麼難免經常做頁面,有PC的頁面、有APP的頁面、還有手機端的頁面,還有PC和手機端共用的頁面,也就是響應式頁面,因為很多時候,為了節約各種成本,必須要實現一套能夠相容P
快速搞定Javascript初級知識【入個門,你看到的只是山底】
"John".constructor // 返回函式 String() { [native code] } (3.14).constructor // 返回函式 Number() { [native code] } fals
#套路非常深的一道Java面試題 ,你中招了嗎?
在求職的過程中,技術測試是不可缺少的一部分,也是最關鍵的一部分,但是有些面試官喜歡去抽一些“套路”比較深的題目,看看面試者對於程式設計的理解是否深刻,這其中的題目中,也不乏有佼佼者! 如果有想學習java的程式設計師,可來我們的java學習扣qun:79979,2590免費送java的視訊教程噢
神仙打架?細數玩刺激戰場中被檢測的幾種情況:你中招了嗎?
玩刺激戰場被封號了怎麼辦?不少人玩刺激戰場的時候會跳出各種彈框,基本分為幾種:模擬器玩家、模擬器過檢測玩家、WG玩家,還有人在問為什麼會別檢測甚至封號,講真的,什麼原因你心裡沒點13數嗎?一起來看看各種遊戲彈窗代表的含義吧。 1、提示:檢測到您使用模擬器登入遊戲,匹配模擬器玩家
程式設計師最喜歡說的十句話,你中招的有哪些?
【1】見鬼了,昨天還好好的 【2】不用擔心,這次肯定不會有問題了 【3】只需要改一行程式碼,不會影響其它程式的 【4】這問題我改了呀! 【5】在我機器上是好的… 【6】以前就有這個問題。 【7】執行那麼久,第一次出現這樣的問題啊,我之前都沒見過 【
物聯網絡卡的常見套路,你中招了嗎?
隨著社會的不斷進步和科技的發展,物聯網技術的運用也變的越來越廣泛,許多行業或領域都實現了智慧化。在這個物聯網技術勃發的年代,很多企業都想在這個時代佔有一席之地,紛紛投資物聯網終端產品,其實很多人不瞭解這個剛剛興起的行業,開始盲目跟風。而物聯網絡卡作為物聯網技術的核心,更是吸引了一大群人的投資和購
電腦裝機的十大誤區,你中招了嗎?
誤區一(最容易犯的錯誤):CPU核心越多速度越快! 不錯,人越多力量越大,但如果拔河比賽,8個普通人和4個大力士比賽,後者勝利。 實際對比: intel i3-4160(雙核四執行緒) CPU效能超過 AMD X4 860K(四核四執行緒) intel i5-4590
人臉識別門禁的那些“坑”,你中招了嗎?
現階段人臉識別產品生產廠商遇到的使用者,在第一時間尋問產品時,不去關注產品的品質、效能、安全性,盯住的只是價格。小編在這裡列舉一些使用者曾遇到的偽人臉識別技術、偽智慧應用的“坑”. 一、人臉識別硬體產品層面的“坑” 1、為什麼二手主機板、硬碟、記憶體條售賣火
Python面試基礎題十大陷阱,你中招了嗎?
我們在會碰到各種各樣的面試,有的甚至是HR專門為你設定的障礙,在python面試中也是,無論你是應聘Python web開發,爬蟲工程師,或是資料分析,還是自動化運維,這些python面試基礎題十大陷阱也許你會遇到,今天的python培訓總結出來給你以防萬一,收好不謝!問題1
小白學PYTHON時最容易犯的6個錯誤,看看你遇到過幾個
逗號 ice fault sep mpat 解釋器 github上 arw 別人 最近又在跟之前的同學一起學習python,一起進步,發現很多測試同學在初學python的時候很容易犯一些錯誤,特意總結了一下。其實這些錯誤不僅是在學python時會碰到,在學習其他語言的時候也
Python 初學者最容易犯的幾個錯誤
對於新手,初學Python時,總會遇到這樣那樣的報錯,想要弄懂Python錯誤資訊的含義可能還不知道怎麼做,這裡列出了一些比較常見的Python報錯問題,希望對於學習Python的人能夠有些幫助。 1)嘗試連線非字串值與字串(導致 “TypeError: Can’t con
炒幣為什麼一直虧,你可能犯了這幾個錯誤。
NO.1 關鍵詞:梭哈?、滿倉幹 投資市場從來不缺梭哈的人?,在幣圈更不缺!從我進入幣圈那會我就聽說過一句話“贏了會所嫩模,輸了下海乾活”,“十賭九輸”這個道理你應該懂吧?投資市場也是賭場。如果你繼續這樣下去,勸你還是離開這個市場吧,最起碼能給你留點買饅頭的錢。
go新手容易犯的幾個錯誤
前言 最近寫go遇到幾個坑,做個記錄,以免再犯。 高居榜首:通道未初始化 看下面的程式碼執行的結果是什麼? package main import ( "fmt" "time" ) type test struct { name string } t