视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript代码日常注意六点
2020-11-27 20:00:56 责编:小采
文档

大家在日常JavaScript开发中都需要注意一些代码是否会出错,而我们今天来总结一下JavaScript中日常开发需要注意的六点易错部分,相信很多同学都需要来看看哦!废话少说我们直接开始进入正题吧!

立即执行函数

立即执行函数,通常也可作闭包,能够构造一个函数级别的变量作用域。一般写法如下:

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

但是这中写法容易造成一些问题,如上面的代码如果没有分号结尾的话:

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

那么应该这样写:

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

或者:

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

选择哪种看个人喜好,现在js中有个规范叫standardjs规范, 提倡省略行尾的分号(个人不太习惯),需要改变这个习惯。

2.空对象null

从JS诞生以来,赋予了null为Object类型,可以说是JS的一个终生bug,从未、以后也不会改变。

null不具备作为对象的基本特征,属于原始数据类型。我想说明的是在判断一个变量是否是对象之前,应该先判断其是否为null。

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

3.不要随意对小数做比较

在做小数之间的计算时候,注意浮点数之前的精度问题。

如:0.1+0.2是否等于0.3? 答案是:0.1+0.2=0.30000000000000004

类似:0.4-0.3=0.10000000000000003

如果存在此类计算,那么先把小数转为字符串,使用toFixed去小数若干位进行比较:

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

注意:两个数的差值小到一定范围的时候,即可以认为他们是相等的。

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

4.时刻记住NaN

一说到NaN,那么有个特性大伙应该都会想起,NaN !==NaN。对,就这么屌。

如果你需要判断一个变量是否为NaN,只需要把它跟它自己比较,如果不相等,那么就是NaN。

判断一个数字是否为NaN,可以使用isNaN()方法。但是如果不知道某个变量的具体数据类型的时候,不要轻易用该方法来判断,因为isNaN有个诡异特性:它会先把要判断的变量先转换成数值来计算。

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

那么这时候会对你的判断结果造成意外。

还有一个注意点就是,永远不要拿任何变量跟NaN来比较,如:opt===NaN。

5.除了比较null和undefined,永远不要使用非严格==和!=

相信你会看到很多文章、规范都会说尽量使用===和!==,不使用==和!=,原因在于后者会进行强制类型转换(造成难以查找的bug)。

先看一下:

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

如果你对以上判断存在疑惑,那就记住一个规则:

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

也即是判断x是否为null或者undefined,那么就用==,否则,永远不要使用。

6.慎用 || 设置默认值

给一个变量设置一个默认值,相信入坑多年的JS开发者都会这样写:

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

解释下arg1 || arg2的意思是如果arg1能够转换为true,那么就取arg1,否则取arg2。

那么我们先看一下不可以转化为true的值有哪些?

1.undefined

2.null

3.NaN

4.整数0

5.空字符串 “ ”

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

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

so :

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

只需判断undefined即可。

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

下载本文
显示全文
专题