一些你可能不知道JavaScript细节

@Barret李靖 分享的一些关于JavaScript的读书笔记,写到了一些与平常不注意的JavaScript细节,帮助你更好的理解代码的源头。值得看看。

《JavaScript 权威指南》这本书从第四版开始,一直到第六版,每个版本我都逐字逐句读过几遍,然而每一遍下来的感受却完全不一样。上上周的周一,再次翻开了这本犀牛书,这一次我是带着批判精神和研究精神过来的,所以看的时候也写下了一些感受和笔记,都是些容易被忽略的点,部分内容犀牛书上不一定有提到。

之前都发在 微博 上,稍微整理了一番,放在这里,方便阅读。

语句/表达式

换个角度理解语句(statemaents)和表达式(expressions):表达式不会改变程序的运行状态,而语句会。还有一种叫做表达式语句,可以理解为表达式和语句的交集,如({a:1})"use strict;"等,我觉得没必要死扣,意义不大。

字符集

ES3 要求 JS 必须实现 Unicode 2.1 及后续版本,而 ES5 只要求支持 Unicode 3 及后续版本。Unicode 字符 2005 年超过了十万字符,至今仍在不断增修,最新版本是 8.0。

分号

如果你写 JS 代码不喜欢带分号,而又搞不清什么时候必须加分号,可以这么做:在以 “(“、”[“ 、”/“、”+”、”-“ 开头的语句前面都加上一个分号,如 ;(a + b).toString()

进制

ES5 严格模式中禁止使用八进制。目前各种引擎对 JS 的实现是存在差异的,部分支持八进制,部分不支持。八进制被禁止的原因:String 和 Number 之间经常被相互转换,而以0 开头的八进制数据特别容易让人迷惑,也容易让机器迷惑,比如 09 是该被转换成 9 还是直接报错?十六进制不存在这个问题,如 0x98。更多信息参阅 这里

精度

JS 采用 IEEE-754 浮点数表示法,这是一种二进制表示法,由于精度原因 JS 不能表示所有的实数。它能展示的浮点数个数是有限的,比如它不能准确地表示三分之一的数值字面量。这也导致了它在浮点数的计算上存在误差,如 0.3-0.2 != 0.2-0.1,因为在计算的过程中,存在数据的溢出,丢失了精度。

d228b1f1be849b4347c24a632ffdebcb

null/undefined

系统级、出乎意料的或者类似错误的值的空缺使用 undefined,而程序级、正常的或意料之中的值的空缺使用 null。平时编程给变量赋值时,不要使用 undefined 而应该用 null。值得注意的是 ES3 中的 undefined 是可以被重新赋值的,ES5 修复了这个 bug。通常我们使用 void 0 来还原/代替 undefined 的值。

eval

eval 是个不好把握的东西,它在 ES3 中更像是 Function,而在 ES5 中更像是一个运算符(严格模式下不允许设置别名,否则报错,且将其作为保留字)。实际上 ES3 中也不允许给 eval 设置别名,然而很多实现却依然允许,并将其作为全局代码来执行,浏览器尤其是 IE 对它实现相当混乱,没有什么规律可循,不过 IE 中提供了一个 execScript 函数,类似全局的 eval,这个函数每次执行都会返回 null。

需要使用 eval 的场景并不多,尽量少用,一般需求使用 new Function 就能满足。

引用

删除属性存在的坑:a = {n: {x: 2}}, b = a.n; delete a.n; 这段代码执行之后,b.x 依然等于 2,原因是 {x:2} 这个对象被 a 和 b 同时引用,delete 指令只删除了 a 对它的引用,b 上的引用依然存在。这种问题有可能造成内存泄漏。

Object 扩展

Object 的 freeze 方法过于严格;defineGetter/lookupGetter 和对应的 Setter 是很好用的属性。

26ce63d07977eda343598dd2f6d0acdf

toLocalString

如图,你可能还不知道 JavaScript 的 toLocaleString 还可以这么玩。

54fe375bf60cb57373c09b99ddbce5b2

this语义

this 上下文只存在两种语义,一种是被当作方法调用,this 指向调用它的对象;一种是作为函数调用,指向 Global 对象(严格模式下为 undefined)。它没有作用域的限制,如下图所示,a 由于是作为函数被调用,所以它指向的是 window,故而返回 false。

4ee343c7a011eab360e17bd4fe81903f

类型

JavaScript 可以被调用执行的均为 Function 类型,但是也存在可调用的 Object,如低版本 IE 中的一些宿主对象:document.getElementById、alert 等,在很多浏览器中 typeof RegExp 同样是 Object。这绝对是一个不标准的实现,在浏览器摒弃/修正这些错误类型之前应该尽量少依赖它们。

864ac788d81e7d3cc6700d13ed33b219

IE8 getter/setter

Object.defineProperty 虽然是 ES5 的东西,早在 IE8 就已经支持了,但支持得并不完善,比如 writable、enumerable、configurable 这些配置项设置就无效,IE8 下主要支持 getter/setter。

80ac297b7e2340a7b9e046eabeb44b99

JSON.stringify

JSON.stringify 接受三个参数,很多人都知道第三个参数可以设置空白字符来美化输出,但是你可能不知道第二个参数的作用,它为 {Array|Function} 类型,如果为 Array 则用于过滤 key,如果为 Function 则可以对 value 做处理,如图所示。

f8a78914a6290a0d6f1f44ca1591ef64

Symbol

ES6 中添加了一种新的数据类型,Symbol,它是一种原始数据类型(图一),具备对象的特性(图二),并可以指向同一个引用(图三),能够作为对象的 key 但不可枚举(图四),内置的 Symbol 会影响程序的执行(图五),Symbol.iterator 是个举足轻重的符号,能够让元素具备迭代属性(图六),花样很多。

附图见:http://weibo.com/1812166904/DqMwR8O6z

伪数组添加 Symbol.iterator 的几个办法:鸭式辨型的 iterator 函数、yield 函数和直接使用 Array 的遍历符号。

附图见:http://weibo.com/1812166904/DqMBYebPw

Set/WeakSet

Set/WeakSet 这种数据结构,不能说没用,但确实也没啥大用,前者就是个不允许出现重复成员的数组,顺便还带了点 ES6 的特性,后者虽说可以一定程度上防止内存泄漏,但是也容易出错,比如某个引用已经被垃圾回收了,再去使用它可能就返回 null。它们都是 ES6 的配套产物。而 Map/WeakMap 倒是两个非常不错的设计,常规的 Object 结构都为 String-Val 键值对,而它扩展为 AllType-Val,任意类型都可以作为它的 Key,无论是服务端编程还是客户端编程,这个属性都带来了极大的便利性。

19a2ecb1496c58d282552d00a735c03d

正则

理解正则零宽的含义:正则中所谓的零宽断言,类似于锚点字符,它们匹配指定的位置而不会匹配内容,如 ^ 匹配开头,$ 匹配结尾,\b 匹配单词边界;(?=p) 匹配「接下来的字符与 p 匹配」的位置,(?!p) 匹配「接下来的字符不与 p 匹配」的位置。\b 字符匹配单词边界,实际上就是匹配 \w 与 \W 之间的位置(\w 匹配 [a-zA-Z0-9])。很少会有人用到 \B,它匹配的是非单词边界位置,简单理解就是 \w & \w 之间位置或者 \W & \W 之间位置。

c00353017331947b348d83c73eeaa685

持续学习和分享…

内容都是片段化的分享,比较多,也比较杂,就没有全部列举出来,感兴趣的同学可以 follow 我的 微博,我的想法和笔记都会在上面同步。

感受

在这之前犀牛书已经翻阅了差不多六七遍,很多内容都已经深深地刻在了脑海里,但时间久了也会忘记些,时而巩固复习下,毕竟是前端最基础部分。

带着问题去看书,收获是完全不一样的。犀牛书不难啃,难的是你对这些知识点的理解深度。

原文标题:JavaScript 被忽视的细节

来自:http://www.barretlee.com/blog/2016/04/18/javascript-detail/


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流