1. 程式人生 > 實用技巧 >javascript錯誤_避免這些常見JavaScript錯誤

javascript錯誤_避免這些常見JavaScript錯誤

javascript錯誤

Out of the many scripting languages, JavaScript is a great option for beginners to learn. However, this does not mean that it is an easy language or that you won’t make mistakes when writing code. In this article, I will cover some of the most common JavaScript mistakes that beginners make with the intention of helping you avoid them.

在許多指令碼語言中,JavaScript是初學者學習的絕佳選擇。 但是,這並不意味著它是一種簡單的語言,也不意味著您在編寫程式碼時不會犯錯誤。 在本文中,我將介紹初學者為了幫助您避免它們而犯的一些最常見JavaScript錯誤。

載入之前引用程式碼 (Referencing code before it’s loaded)

JavaScript loads and runs the code in the order in which it appears in the document. If you have a script defined in the head HTML tag that accesses the HTML element(s) on the page, an error will be thrown. The following is an example of this mistake:

JavaScript按照在文件中出現的順序載入並執行程式碼。 如果您在頭HTML標記中定義了一個指令碼,該指令碼訪問了頁面上HTML元素,則將引發錯誤。 以下是此錯誤的示例:

Image for post

To avoid making this mistake when your script relies on the HTML elements on the page, either put the JavaScript code at the end of the file, or load the JavaScript file and add an attribute (such as “defer to the script” tag). Below is an example of using the defer attribute:

為避免在指令碼依賴頁面上HTML元素時犯此錯誤,請將JavaScript程式碼放在檔案的末尾,或載入JavaScript檔案並新增屬性(例如“ defer to the script”標記)。 下面是使用defer屬性的示例:

Image for post

Defer Attribute — This tells the browser to download only the scripts and only executes scripts after parsing the HTML file.

延遲屬性 -告訴瀏覽器僅下載指令碼,並且僅在解析HTML檔案後執行指令碼。

錯誤地使用==和===運算子 (Using == and === Operators incorrectly)

These are both comparison operators and return boolean values. The double equal operator (==), also known as a comparison operator, is used to compare two variables but ignores the data type of the variables. Whereas the triple equal operator (===), also known as a strict comparison operator, compares two variables and also checks the datatypes of the variables.

這些都是比較運算子,並且返回布林值。 雙重等於運算子(==),也稱為比較運算子,用於比較兩個變數,但忽略變數的資料型別。 而三重相等運算子(===)也稱為嚴格比較運算子,它比較兩個變數並檢查變數的資料型別。

Image for post

無塊級範圍 (No block-level scope)

Most programming languages allow developers to define variables with block-level scope in which the value of the variable becomes null outside the block. In JavaScript, however, the variable can be referenced outside the loop (scope). In the following example, variable “i” is accessible outside the for loop.

大多數程式語言都允許開發人員在塊級範圍內定義變數,其中變數的值在塊外變為空。 但是,在JavaScript中,可以在迴圈(範圍)之外引用該變數。 在以下示例中,變數“ i”可在for迴圈外訪問。

Image for post

缺少功能引數 (Missing function Parameters)

When you add a new parameter to a function, it is easy to forget to update all the function calls in the code. This can easily be avoided by adding a default value for the new parameter. For example, in the code below we have added a new parameter “color” to a function with a default value “black”. If — in our code — we forget to update any function call and the argument did not get passed in then the variable will be set to “black” and it will avoid any variable undefined errors in the code.

當您向函式新增新引數時,很容易忘記更新程式碼中的所有函式呼叫。 通過為新引數新增預設值,可以輕鬆避免這種情況。 例如,在下面的程式碼中,我們向具有預設值“ black”的函式添加了新引數“ color”。 如果-在我們的程式碼中-我們忘記更新任何函式呼叫並且未傳遞引數,則該變數將設定為“黑色”,這將避免程式碼中出現任何變數未定義的錯誤。

Image for post

未定義!==空 (Undefined !== Null)

At first, Null and Undefined may seem the same but they are far from it. Undefined means that a variable has been declared but has not been assigned any value. Whereas Null is an assignment value meaning that you can assign it to a variable. In the following example, you can see the comparison of Null and Undefined:

起初,Null和Undefined可能看起來相同,但相距甚遠。 未定義表示變數已宣告但尚未分配任何值。 而Null是分配值,意味著您可以將其分配給變數。 在以下示例中,您可以看到Null和Undefined的比較:

Image for post

加法和串聯 (Addition and concatenation)

JavaScript concatenates strings using ‘+’ operator. The same operator is also used for adding the numbers. As you know, we cannot define the type while declaring a variable in JavaScript, and if the types are not handled properly in the code this can lead to unpredictable results. An example is given below:

JavaScript使用'+'運算子連線字串。 同樣的運算子也用於新增數字。 如您所知,我們無法在JavaScript中宣告變數時定義型別,並且如果在程式碼中未正確處理型別,則可能導致不可預測的結果。 下面是一個示例:

Image for post

結論 (Conclusion)

The better you understand how JavaScript works, the better and more efficient your code will be. This will also speed up your web development skills. Conversely, a lack of proper understanding of JavaScript can lead to many problems so next time you are writing JavaScript code always remember the points mentioned above! Thanks and I hope you found this article helpful.

您越瞭解JavaScript的工作原理,您的程式碼就會越高效。 這也將加快您的Web開發技能。 相反,缺乏對JavaScript的正確理解會導致許多問題,因此,下次您編寫JavaScript程式碼時,請務必記住上述要點! 謝謝,希望對本文有所幫助。

翻譯自: https://codeburst.io/avoid-these-common-javascript-mistakes-11f5311c9ec3

javascript錯誤