Six things to pay attention to in daily JavaScript code

Everyone needs to pay attention to whether some codes will go wrong in daily JavaScript development. Today we will summarize the six error-prone parts that need to be paid attention to in daily development of JavaScript. I believe many students need to read it. Look! Without further ado, let’s get straight to the point!

Immediately execute the function

Immediately execute the function, usually it can also be used as a closure, and can construct a function-level variable scope. The general writing method is as follows:

(function () {
  // code
})();

However, this writing method can easily cause some problems. For example, if the above code does not end with a semicolon:

var a = 1
(function () { // Uncaught TypeError: 1 is not a function
})()

, then it should be written like this:

void function () {
  // code
}();

Or:

!function () {
  // code
}();

;(function(){
   //code
})()

Which one you choose depends on personal preference. There is now a standard in js called standardjs standard, which advocates omitting the semicolon at the end of the line (I am not used to it). This habit needs to be changed.

2. Empty object null

Since the birth of JS, null has been given the Object class type. It can be said to be a lifelong bug of JS. It has never and will never happen again. will not change.

null does not have the basic characteristics of an object and belongs to the original data type. What I want to explain is that before judging whether a variable is an object, you should first judge whether it is null.

if (opt!== null && typeof opt=== 'object') {
  // opt是一个对象
}

3. Do not compare decimals arbitrarily

When doing calculations between decimals, pay attention to the precision issue before floating point numbers.

For example: Is 0.1+0.2 equal to 0.3? The answer is: 0.1+0.2=0.30000000000000004

Similarly: 0.4-0.3=0.10000000000000003

If such calculations exist, then first Convert the decimal to a string, and use toFixed to remove the decimal places for comparison:

(0.1 + 0.2).toFixed(2) === '0.30'

Note: When the difference between two numbers is small enough to a certain range, they can be considered equal. of.

Math.abs(0.1+0.2 - 0.3) <= 1e-10 // true

4. Always remember NaN

When it comes to NaN, there is a characteristic that everyone should think of, NaN!==NaN. Yes, that's cool.

If you need to determine whether a variable is NaN, just compare it with itself. If they are not equal, then it is NaN.

To determine whether a number is NaN, you can use the isNaN() method. But if you don’t know the specific data type of a variable, don’t use this method to judge easily, because isNaN has a strange characteristic: it will first convert the variable to be judged into a numerical value for calculation.

isNaN('abc') // true
isNaN('123') // false
isNaN('') // false
isNaN([]) // false
isNaN({}) // true

Then this will cause surprise to your judgment result.

Another point to note is that never compare any variable with NaN, such as: opt===NaN.

5. In addition to comparing null and undefined, never use non-strict == and! =

I believe you will see many articles and specifications saying that try to use === and! ==, do not use == and ! =, the reason is that the latter will perform forced type conversion (causing bugs that are difficult to find).

Take a look first:

'true' == true // => false
'true' == false // => false
[] == {} // => false
[] == [] // => false

If you have doubts about the above judgment, then remember a rule:

null == null // => true
undefined == undefined  // => true
null == undefined // => true
undefined == null // => true
x == null // => false (x 非 null 或 undefined）
x == undefined // => false (x 非 null 或 undefined）

That is, determine whether x is null or undefined, Then use ==, otherwise, never use it.

6. Use with caution || Set default value

Set a default value for a variable. I believe JS developers who have been in the game for many years will write like this:

page = page || 0;
data = data || '你好';

Explain it arg1 || arg2 means if arg1 can be converted to true, then take arg1, otherwise take arg2.

So let’s first take a look at the values ​​that cannot be converted to true?

1.undefined

2.null

3.NaN

4. Integer 0

5. Empty string “ ”

所以如果当用户传给arg1的参数是0或者为空字符串“”的时候，那么最终的值就会取默认的（||后面）值是不是？好，问题来了。如果用户传给后台的查询关键字data（上面代码）是空字符串“”，那么就应该按照空字符串“”去后台数据库查询，而结果传给后台的却是“你好”，显然查询结果也就不对。

好，回到主题，实际上只有undefined才应该被认为是用户没有指定其具体值，我曾看过有人这样理解（null 表示 用户让你给他把这个位置空着；而 undefined 表示 用户没发表意见）

so :

page = page !== undefined ? page : 0;
data = data !== undefined ? data :'你好';

只需判断undefined即可。

个人理解如果有需求，可以把null加进去判断。

The above is the detailed content of Six things to pay attention to in daily JavaScript code. For more information, please follow other related articles on the PHP Chinese website!