给初学者:JavaScript 的常见注意点

作者: CarterLi 原文:https://segmentfault.com/a/1190000012730162

上篇说了一些 JS 中数组操作的常见误区,这次来总结一下初学者常见的其他易错点。

写立即执行函数时前置 void

立即执行函数(IIFE)在 JS 非常常用,作用就是构造一个函数级的变量作用域。常见的写法如下:

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

这样写可能会被 JS 理解成为一个函数调用

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

从今天改变习惯,这样写:

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

有些人喜欢以 ! 打头,个人习惯问题。

在 standardjs 规范日益流行的今天,忽略行尾分号成为了主流(但是笔者不喜欢),更要改变这个习惯

注:standardjs 本身禁止行首括号(https://standardjs.com/readme-zhcn.html#user-content-细则)

检查一个变量是否为对象之前,首先判断其值是否为 null

虽然不愿承认,JS 标准说:

typeof null === 'object' // true

毋庸置疑的, null 不具备作为对象类型的基本特征,是原始类型。这是一个广为人知的 JS 的 bug,,它从 JS 诞生开始就存在,从未、而且永远不会被修复

我们不必去探究它的黑历史,但是我们写代码时判断一个变量的类型时,首先需要判断它是否为 null

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

做数值计算时,注意 JS 数值类型的精度

在 JS 里,所有的 number 原始值都是一个双精度浮点数,对应 Java 的 double 类型,对应标准 IEEE754。小心它的精度问题。

做整数处理时,注意数值的大小

JS 最大可存储的安全整数(不存在精度问题)为 9007199254740991 (16位,Number.MAXSAFEINTEGER ),注意比 Java 的 long 类型最大整数 9223372036854775807 (19位) 小几个数量级,所以有时 JS 的 number 类型是不能精确存储 Java 的整数的(当然通常情况下不是问题)。

问题通常出在前后端数据传输上。数据库中的主键通常是一个自增长的长整型数,有可能会超出 JS 的安全整数范围,这时请考虑使用字符串传输。

做小数计算时,注意浮点数的精度问题

例如:0.1+0.2 => 0.30000000000000004,0.4-0.3 => 0.10000000000000003

将小数转化为字符串时,永远记得使用 toFixed 取小数点后若干位数字:

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

比较小数相等时,切记不要直接使用 ===,而要使用相减取绝对值的方式(表示两数相差在一定范围内即认为他们相等)。

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

NaN !== NaN

NaN 之所以 NB,因为它有一个独一无二的特性。对!独一无二!那就是:

NaN === NaN // false
var a = NaN; a === a // false

NaN 不等于它自己。你可以使用这个特性判断一个变量是否为 NaN,一个变量如果不等于它自己,这个变量一定是 NaN

还有一个方式是使用 Number.isNaN。注意如果不已知这个变量的类型是数字时,不要使用 isNaN做判断,因为 isNaN 有个很诡异的特性:它会先将待判断的变量转换为数值类型。

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

永远不要写 someVal===NaN

正确使用 parseInt

首先parseInt接受两个参数,第一个参数为待parse的字符串(如果不是字符串则会首先转换为字符串);第二个参数为使用的进制数。

如果不传第二个参数,则进制由第一个参数决定。什么意思呢?比如以 0x 开头的字符串,会被解析为16进制数。

我们知道以数字 0 开头的数字为8进制数(非严格模式),比如 011 === 9,0 本身也是8进制数。那么问题来了, parseInt('011') = ?

答案是看浏览器。目前绝大多数浏览器都会作为10进制数解析,结果为11。但是还有一些老旧的浏览器以8进制数解析(例如IE8和一批老Android浏览器)

所以如果你非要用 parseInt:

parseInt 使用规则一:请传入第二个参数

回到 parseInt 本身的含义。顾名思义这个函数是在parse,被parse的一定是个字符串。如果第一个参数不是字符串,那么会首先被转换为字符串。

问: parseInt(0.0000000008) =?

答:

  1. String(0.0000000008) => '8e-10'
  2. parseInt('8e-10') => 8

自己打开调试器去试

parseInt使用规则二:永远不要使用parseInt给小数取整

建议对于数值转换一概使用强制转换函数 Number,如果你JS用6了可以使用 +(正号)。 如果需要对某个数字取整,建议使用 Math.trunc。如果你能确定数值在 32 位以内,可以使用 x|0~~x等方式

parseInt的用处在于转换一些CSS里带单位的值: parseInt('10px',10) => 10。但这里建议使用parseFloat,可以解析小数又没有进制问题。

除了用于比较 null 或 undefined,永远不要使用非严格相等 ==

绝不要简单的把非严格相等 == 理解为两者表示的数字一样,它有一套非常复杂的转换规则:它会先将 %%转换为 @@,然后把 !! 转换为 **,如果 %%?? 类型,还会 xx 一把……

看不懂对吧,我相信你就算看懂了也记不住的。不然请问:

'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 // 或 x == undefined

是最简单的判断 x 为 null 或 undefined 的方式,相对应的

x != null // 或 x != undefined

是最简单的判断 x 非 null 和 undefined 的方式。这就是 == 存在的唯一意义。

日期处理

new Date(year, month, day) 注意其参数的数值范围

由于可能的历史传承原因,JS 内置对象 Date 的构造函数比较特殊。

  1. 如果 year 是 0 ~ 99 之间,year 默认加 1900。比如 1 代表公元 1901 年,99 代表公元 1999 年,100 代表公元 100 年。(你问 -1 是几?公元前 1 年。。。)
  2. month 从 0 开始算。0 代表一月,1 代表二月,以此类推。12 代表下一年的一月(自动进位)

第一点不知道也没什么,毕竟一般不会操作公元 99 年之前的时间。但第二点就很容易出错,切记它是以 0 开始的数字。

这样得到的日期对象是本地时间(采用客户端时区)

new Date(dateString) 注意浏览器时区问题以及浏览器兼容性

时常有后端接口返回一个日期字符串的情况:

new Date('2018-01-01') // => "2018/1/1 08:00:00" 新版浏览器,IE 11
new Date('2018-01-01') // => "2018/1/1 00:00:00" 某些旧版安卓
new Date('2018-01-01') // => "Invalid Date" IE 8(这个忽略。。。)

可以看到,浏览器基本都是把日期字符串当做 UTC 时间处理的。而

new Date('2018/01/01') // => "2018/1/1 00:00:00" 包括 IE 8 在内所有浏览器

所以对于日期字符串,请注意字符串中是使用横杠还是斜杠。对于横杠可以考虑将 - 替换成 /,或者补全完整的带时区的 ISO8601 字符串。考虑到负数时区的问题,不推荐将小时数清零的做法。

PS:将日期对象取当天 0 点为 date.setHours(0,0,0,0)PS2:取当前时间的 Unix 时间戳可以 Date.now()

补:慎用 || 填充默认值

这反而是 JS 老鸟更容易犯的错误。给用户传入的对象填充默认值是很常见的行为,他们总是随手就写:

config.prop1 = config.prop1 || 233;
config.prop2 = config.prop2 || 'balabala';

expr1||expr2 的意思是:如果expr1能转换成true则返回expr1,否则返回expr2

expr1||expr2<=>Boolean(expr1)?expr1:expr2

哪些值不能转换为 true 呢?

  1. null
  2. undefined
  3. NaN
  4. 0 !!!
  5. 空字符串('') !!!

如果用户指定了传入参数的值为 0 或者是空字符串的配置项,它的值就会被强制替换为默认值,然而实际上只有 undefined 应该被认为是用户没有指定其值(语义上可以这样理解: null表示 用户让你给他把这个位置空着;而 undefined 表示 用户没发表意见

所以就应该是这样:

config.prop1 = config.prop1 !== undefined ? config.prop1 : 233;
config.prop2 = config.prop2 !== undefined ? config.prop2 : 'balabala';

很长。。。你可以搞个全局的函数简化这一操作,或者考虑使用 lodash 的 defaults 方法

觉得本文对你有帮助?请分享给更多人。

原文发布于微信公众号 - 程序员宝库(chengxuyuanbaoku)

原文发表时间:2018-01-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据结构与算法

1487 大批整数排序

个人博客:doubleq.win 1487 大批整数排序  时间限制: 3 s  空间限制: 16000 KB  题目等级 : 黄金 Gold 题解 题目描述 ...

2815
来自专栏Jimoer

Java设计模式学习记录-迭代器模式

这次要介绍的是迭代器模式,也是一种行为模式。我现在觉得写博客有点应付了,前阵子一天一篇,感觉这样其实有点没理解透彻就写下来了,而且写完后自己也没有多看几遍,上次...

923
来自专栏决胜机器学习

有趣的算法(九) ——蛇形数组

有趣的算法(九)——蛇形数组 (原创内容,转载请注明来源,谢谢) 一、问题阐述 给定一个数字,需要返回的内容如下图所示: 输入5,得到结果: ? 输入10,得到...

3329
来自专栏Python小屋

Python编程一定要注意的那些“坑”(九):0与False

问题描述:在编程时,经常需要单独编写一个函数用来判断某个事件是否成立,如果成立就返回正常结果,否则返回False。在主调函数中根据被调函数的返回值决定下一步的操...

1283
来自专栏C/C++基础

STL四种智能指针

STL一共给我们提供了四种智能指针:auto_ptr、unique_ptr、shared_ptr和weak_ptr,auto_ptr是C++98提供的解决方案,...

3733
来自专栏老司机的简书

老司机出品——包教包会之玩转正则表达式

结束了CoreAnimation系列之后,老司机心里仿佛也轻松了许多。今天说说开发中的一个利器吧,正则表达式。

1713
来自专栏Golang语言社区

Go语言中反射的正确使用

介绍 反射是元数据编程的一种形式,指的是程序获得本身结构的一种能力。不同语言的反射模型实现不一样,本文中的反射,仅仅指的是Go语言中的反射模型。 反射有两个问题...

3696
来自专栏编程

C语言/C加加新手入门学习经验资料分享,基础知识大汇总!

C语言是面向过程的,而C++是面向对象的 相信这么努力的你 已经置顶了我 学习C语言始终要记住“曙光在前头”和“千金难买回头看”,“千金难买回头看”是学习知识的...

2359
来自专栏程序员互动联盟

【专业技术】STL hash_map使用(一)

今天在使用STL中的hash_map模板遇到使用PTCHAR作为Key时无法对字符串进行正确比较的问题。 hash_map类在头文件hash_map中,和所有其...

3298
来自专栏码洞

《快学 Go 语言》第 3 课 —— 分支与循环

上面这个等式每一个初学编程的同学都从老师那里听说过。它并不是什么严格的数据公式,它只是对一般程序的简单认知。数据结构是内存数据关系的静态表示,算法是数据结构从一...

1073

扫码关注云+社区

领取腾讯云代金券