閱讀801 返回首頁    go 阿裏雲 go 技術社區[雲棲]


5常見的JavaScript開發錯誤避免

JavaScript是網絡的動態語言,它被全球開發人員廣泛接受。事實上,JavaScript的普及為其偉大的社區做出了貢獻。

<>

目前,新的圖書館,框架和工具經常被發布,使JavaScript更強大,在有能力的開發人員手中是非常有用的,而其已建立的資源隨著時間的推移不斷改進。

JavaScript是活動存儲庫中名為GitHub的第一種語言。

在LiveEdu.tv中也可以看到同樣的趨勢,其中有48,567個JavaScript相關視頻是由熱心學習者和工程師的用戶群創造的,他們希望提高自己的職業和技能。

許多開發人員在前端旅程中利用了JavaScript,但是大多數初學者和經驗豐富的JavaScript程序員都存在常見的JavaScript開發錯誤。在這篇文章中 - 我們將會遇到一些常見的錯誤,以避免在開發過程中使用它們。

1.內存管理

內存管理在開發時至關重要,而且在使用JavaScript時也是有效的。許多開發者根本就不考慮內存管理的錯誤。這可能導致他們遇到幾個有問題的實例,因為它們的應用程序將使用比預期更多的內存,並且還可能會遇到崩潰整個係統的風險。大多數這些發展是在不考慮內存泄漏的情況下完成的。

JavaScript是垃圾回收語言,因此它提供了有效處理內存所需的所有工具。

“Roots”用於處理JavaScript中的垃圾收集。Roots是一個全局變量,用於存儲對代碼不同部分的引用。為了使用根變量獲得一些有效性,使用了Sweep-and-Mark算法。通過遵循Mozilla的簡單指南,您可以在JavaScript中閱讀有關內存管理的更多信息。

  1. ==(比較)和=(賦值)

比較和賦值運算符通常被JavaScript開發人員困惑。即使從經驗豐富的開發人員或尚未發現兩個運營商之間的差異的初學者也可能發生錯字。

賦值運算符(“=”)與比較運算符(“==”)完全不同。賦值運算符負責為變量分配一個值,而比較運算符比較兩個值,返回1或0.出現真正的問題是JavaScript缺少檢測到這種類型的錯誤的錯誤機製,因此完全取決於開發者來管理這個問題。下麵我們來看一個例子。

展開| 選擇| 包裹| 行號

var x = 23;
if(x == 23){do something; }

上述代碼將執行沒有任何錯誤。在第一個語句中,變量x將被賦值為23.第二個語句檢查“x”的值是否等於23.如果為true,則該條件下的代碼將被執行。現在,我們來看下麵的代碼行。

展開| 選擇| 包裹| 行號
var x = 12;
如果(x = 2){做某事; }
現在,您可以在上麵的代碼中看到一個打字錯誤。在第一個語句中,x的值最初分配給12後,現在將其分配給2。對於這種類型的錯誤,將不會有任何錯誤消息,因為語句if(x = 2)評估為true或1,則會導致代碼中其餘部分的行為發生級聯變化。根本不需要!

'+'符號作為連接和加法

JavaScript開發中的另一個常見錯誤是沒有正確使用“+”運算符。“+”的行為根據其使用的上下文而改變。我們來看看兩種不同的場景。

情景1

展開| 選擇| 包裹| 行號
var x = 23 + 8;
上述語句將返回31並將其存儲到變量x中。一切都好

情景2

展開| 選擇| 包裹| 行號
var x = 23 +“8”;
上述語句也將執行,但最終結果將被存儲在x中是238.奇怪?其實不是!

'+'操作符與字符串一起工作,因此結果是238而不是31.

最好通過自我意識來避免錯誤,或者您可以在每次要添加時簡單地使用parseInt()函數涉及用戶輸入。

展開| 選擇| 包裹| 行號
var x = 23 + parseInt(“8”,23);

4.未定義vs Null

當涉及到undefined和null時,JavaScript的作用有點不同。它可以不同地處理變量和對象,並將變量分配給“未定義”,並將對象分配給“null”,尤其是在第一次初始化時。

如果您沒有處理默認分配,錯誤可能會很容易地蔓延到您的程序中。為了確保您忽略這些問題,您需要檢查對象是否不為null,並且對象的類型未定義。此外,未定義的檢查應首先進行,如下麵的代碼所示。

展開| 選擇| 包裹| 行號
if(typeof object!==“undefined”&& object!== null){do something;}
上麵的代碼行可以正常工作。但是,以下代碼行會拋出錯誤。

展開| 選擇| 包裹| 行號
if(object!== null && typeof object!==“undefined”){do something;}

5.阻止級別範圍

的錯誤我們將討論的最後一個錯誤是JavaScript開發人員無法了解塊級別範圍。與其他編程語言不同,塊級範圍不像其他編程語言那樣工作。讓我們借鑒一個例子來理解它。

展開| 選擇| 包裹| 行號

for(var i = 0; i <5; i ++){
    做一點事;
}

的console.log(ⅰ);

以上代碼行將返回i的值為5.令人驚訝?不要這樣,JavaScript是如何在塊級別工作的。它帶有最後一個已知值,變量的壽命不限於for循環的範圍。這種行為被普遍稱為可變提升。

那麼,你如何處理這種行為呢?您可以將let關鍵字用於ECMAScript 6中現已發布的優勢。您可以在詳細的JavaScript變量教程中查看更多信息。

最後的想法

就是這樣!如果您注意到並確保這些錯誤不會進行到您的JavaScript開發,並且可以節省大量的時間!

最後更新:2017-08-13 22:27:40

  上一篇:go  萬億級數據洪峰下的分布式消息引擎
  下一篇:go  阿裏雲發布ECS企業級產品家族 19款實例族涵蓋173個應用場景