BUG encountered in JavaScript

I will give you a detailed summary of the bugs and problems that you often encounter in JavaScript development. Friends who need it can refer to it.

Even the best JavaScript developers make mistakes. Sometimes the execution result of the program is different from expected, and sometimes it cannot run at all. Here I have summarized 10 common mistakes that I believe both junior and senior developers may encounter.

Equality confusion

Is x equal to y? Is x true? In JavaScript, how to correctly judge equality is very important, but many people seem to be confused. To briefly summarize, there are mainly three situations: conditional judgment (if, &&, etc.), equality operator (==), and strict equality operator (===).

Even, sometimes assignment (=) is accidentally used as an equality operator. Don’t make a mistake!

Avoid using assignment (=)

Assignment (=) assigns the expression on the right to the variable on the left, for example:

var a = 3;

This statement declares a new variable a with a value of 3.

An expression can be anything in the program. Imagine it is analogized to a noun in the language, and the operator (,-,*,/) is analogized to a verb. A common mistake among beginners is to misuse assignment (=) as the equality operator.

if (a=4){...}

The code does not execute as expected.

Use the equality operator with caution

The equality operator (==) and its twin inequality operator (!=) are very good It is useful, but it is also very dangerous, so use it as little as possible. Next, we will introduce why:

0 == '0'

Under the equal sign, 0 and 0 are equal! Because the interpreter found that the left and right types were inconsistent, it first performed implicit type conversion. This can lead to all kinds of problems, and it can be difficult to find the cause when something goes wrong.

If you really want to determine whether the number contained in a string is really the same as a certain number, it is recommended that you do this:

parseInt(0) === parseInt('0')

Therefore, it is recommended to use the strict equality/inequality operator .

0 === '0'

will return false.

Missing Curly Brace

As your program becomes more complex, especially if you use JavaScript objects to store data, the curly braces will get longer and longer. Come more and more. Here is a piece of code, but one curly bracket is missing:

{
 “status”: “OK”,
 “results”: [{
 “id”: 12,
 “title”: “Coding JavaScript For Dummies”,
 “author”: “Chris Minnick and Eva Holland”,
 “publication_date”: ““,
 “summary_short”: ““,
 “link”: {
 “type”: “review”,
 “url”: ““,
 “link_text”: “Read the New York Times Review 
of Coding JavaScript For Dummies”
 },
 “awards”: [{
 “type”: “Nobel Prize”,
 “url”: ““,
 }]
}

Can you see where something is missing? When in doubt, a good editor can be very helpful. Sublime Text has a very nice feature. When you place the cursor on a certain brace, the matching brace will be highlighted.

##Unmatching quotation marks

When defining a string, You are free to use single or double quotes. However, if a string starts with a single quote and ends with a double quote, it won't work. And you need to pay attention to the single quotes or double quotes in the string itself.

var movieName = “Popeye'; // error!
var welcomeMessage = ‘Thank you, ‘ + firstName + ‘, let's learn JavaScript!' // error!

In general, I personally think it is a very flexible and easy-to-use function, but you must be careful!

Missing necessary parentheses

This error is often found in conditional statements, especially when there are multiple conditions.

if (x > y) && (y < 1000) {
...
}

If you look carefully, you will find that there are missing brackets. The correct one should be like this:

if ((x > y) && (y < 1000)) {
...
}

Missing semicolon

Statements in JavaScript should end with a semicolon. But if these statements each occupy one line, then it doesn't matter if you don't write a semicolon. However, it is not recommended because of potential problems. If you use automatic code beautification tools, you may mistakenly merge different lines of code and cause errors.

The best strategy is to always add semicolons.

Capitalization errors

JavaScript is case-sensitive. You need to be careful when naming variables and functions, and you can’t get the capitalization wrong. For example, the getElementById function of the Document object is often written incorrectly as getElementByID.

Quoting before loading

JavaScript code is usually executed in sequence. If you reference elements created later, an error will be reported.

<html>
<head>
 <script>
 document.getElementById(“myp”).innerHTML = “This p is my p”;
 </script>
</head>
<body>
 <p id = “myp”>This p is your p.</p>
</body>
</html>

When the script is executed, the browser does not know what myp is yet.

There are many ways to avoid this problem:

Put the code at the end, that is, after 36cc49f0c466276486e50c850b7e4956

Put the code into the function, and combine it with the body onload binding.

<html>
<head>
 <script>
 function nameMyp() {
 document.getElementById(“myp”).innerHTML = “This p is my p”;
 }
 </script>
</head>
<body onload = “nameMyp();”>
 <p id = “myp”>This p is your p</p>
</body>
</html>

Abuse of reserved words as variable names

A problem that is difficult to track down is the use of reserved words as variable names. There are over 60 reserved words in JavaScript. Of course, you can't memorize them all to avoid using them. The best way is to name variables with more descriptive characters.

For example, name is a reserved word. If you prefer to use name, it's better to be more specific, such as firstName, lastName, dogName and nameOfTheWind.

Scope issue

JavaScript中有函数作用域和全局作用域。如果你没有使用var关键字来声明，那么它是全局的。为了确保不同作用域的安全隔离，建议使用var。译者补充：建议使用let，更加安全，可参考本文：ES6之”let”能替代”var”吗?。

函数调用缺少参数

在JavaScript中，在函数调用的时候少了几个参数，有时候并不会出错，但可能达不到预期的执行结果。所以，确保你传入了足够的函数参数。

从0开始

永远不要忘记数组是从0开始。

var myArray = new Array();
myArray[10] = “List of 10 Common Mistakes”;
myArray.length; // 输出11!

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中详细介绍mixins和extends用法

在canvas中如何实现轨迹回放功能

在vue.js中通过vue-router如何实现无效路由提示

在Vue中extend 、component有哪些区别？

The above is the detailed content of BUG encountered in JavaScript. For more information, please follow other related articles on the PHP Chinese website!