那些 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,因为在计算的过程中,存在数据的溢出,丢失了精度。

系统级、出乎意料的或者类似错误的值的空缺使用 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 是很好用的属性。

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

this语义

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

类型

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

IE8 getter/setter

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

JSON.stringify

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

Symbol

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

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

Set/WeakSet

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

正则

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

持续学习和分享…

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

感受

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

====================================分割线================================
文章转载自 开源中国社区[http://www.oschina.net]

时间: 2024-07-28 17:55:59

那些 JavaScript 容易被忽视的细节的相关文章

解析网站优化容易被忽视的细节

在企业网站优化过程中我们会遇到很多细节问题,很多站长特别是新手seoer不太在意容易忽视这些细节,但是细节决定成败,这些细节的问题很可能会影响到网站优化的进行,反过来说如果站长们将细节做到完美会更有竞争优势.今天易水上海seo解析企业网站优化容易被忽视的几个细节: 第一:目录结构的优化细节,对于目录结构站长们都很熟悉,这里我们打个比方http://www.xxx.com/yy这个是一级目录,http://www.xxx.com/yy/zz这个是二级目录,以此类推,这里需要注意的是,对于每个页面到

站长分析:SEOer容易忽视的细节

"泰山不拒细壤,故能成其高;江海不择细流,故能就其深."所以,大礼不辞小让,细节决定成败.在SEO界,想成功的人很多,但是愿意把小事做细的人很少.在SEO界中并不缺少雄韬伟略的战略家,缺少的是精益求精的执行者.在SEO中,谁的优化方案更和搜索引擎的胃口,谁的排名就会高.由此可以看出,在SEO界中并没有永远的成功者,也没有永远的失败者.那么如何在SEO更长久的利于不败之地呢?现在竞争如此激烈,如何脱颖而出呢?答案一词记之曰"细节".下面笔者将在几个我们容易忽视的细节和

SEO中易忽视的细节之404页面制作

SEO中一个很重要的环节就是对于细节的把握,如果我们能够尽可能的按照SEO要求中的细节来操作,那么SEO做起来绝对是没有问题的,而且会少走很多的弯路.最近感觉自己SEO中遇到很多的问题就出在细节上,例如任何SEO教程中对我们关键词密度的要求都在于2%-8%,但是我们却怀着侥幸的心理,妄自增加一些关键词的密度,但是这样的时候往往把握了主关键词,却忽略了可能隐藏的高密度关键词,从而因为关键词密度过高导致网站被K.这样的例子还有很多,今天北京SEO要为大家介绍的就是另外一个我们容易忽视的细节:404页

SEOer们忽视的细节问题

摘要: 目前的SEOer们每天的工作内容绝大多数都是围绕在文章和外链上,但在这些看似简单重复的工作当中,往往有很多被我们忽视的细节问题都在影响着工作的效果. 你很可能就是导致跳出 目前的SEOer们每天的工作内容绝大多数都是围绕在文章和外链上,但在这些看似简单重复的工作当中,往往有很多被我们忽视的细节问题都在影响着工作的效果. 你很可能就是导致跳出率过高的"罪魁祸首" 为什么这么说呢?不知道大家有没有这样的习惯,每次发布完文章之后,就会点开相关的文章页面看看排版有没有问题,图片的显示是

网站建设中容易忽视的细节:网站副导航

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 看过很多企业网站的结构,很多企业网站里面也都加入了副导航.什么叫做副导航呢?简单点说就是在网站左侧或者右侧有一个导航条,一般都是产品导航.很多企业在网站建设中,都不知道网站副导航的作用,所以也都没加.今天老冯(冯东阳)就给大家说一下你容易忽视的细节:网站副导航. 网站副导航的作用是什么呢? 只所以在首页增加网页副导航,是为了方便用户更直接的找

Seo,我们容易忽视那些细节?

如果你们公司有seo专员,你问其他员工什么是seo的时候,我相信90%的人都会说,seo就是发帖啊.如果你在开周例会的时候,老板就会说,小庞啊,最近网站的排名往下掉,你要多发一些贴啊.甚至作为老同学问正在某公司做seo的陈某,网站被你优化得怎么样了?哎,别提了,每天发那么多外链,排名还是那么惨不忍睹.作为SEOer的你,这些情况你是否每天都会遇到? 也许看到上面这段话,你会说,靠,不用看下去就知道这篇又弹什么seo要以用户体验为中心,不能单靠外链来取胜那样的老调了.错了,我一直认为怎么提升用户体

细节决定成败 内链建设不能忽视的细节

  随着搜索引擎的越来越人性化,搜索引擎对于站点的内部结构的要求也越来越高.对此,现今如果你想要你的关键词有一个好的稳定的排名,你不仅仅需要一个强大的外链做支持,你还需要有一个合理的站内内部结构做坚实的后盾.通王科技创始人王通就曾公开表示他认为一个完善合理的内链结构的重要性高于外链. 笔者认为我们在做我们站点的内链构建的时候,我们不仅仅需要考虑到搜索引擎索引,同时我们还需要考虑到用户的友好体验度.我们在内链建设中需要注意各个细节,有一句话说的很好,细节决定成败.的确只有我们做好内链建设的各个细节

数据中心照明设计方案 你不该忽视的细节

忽视照明恐造成机房误操作 在数据中心设计中,照明往往是最不被关注的.然而,照明不足会导致人为误操作的发生.因此,能否辨认接线板上的标签和线缆颜色显得格外重要,特别是在有压力下工作时.事实上,现在大多数的机柜和设备都是纯黑色,由于很少有光会被反射到过道里,这首先就使得照明变得很难.但是照明装置经常会被放置在机柜和电缆托盘之上,甚至使得光线不能照进过道里.以下这些技巧阐述了在数据中心设计中,IT专业人士可以结合其他一些最佳实践,使用一些方法改善机柜和过道照明. 与大多数办公室里所使用的类似,数据中心

细节决定成败 细数SEO中容易忽视的细节

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 笔者是个大学生,从事SEO也算是个兼职,算是为自己的未来加一点筹码吧.从学习SEO开始到现在,也快半年了,几乎每天泡论坛,当然中间也几乎放弃过SEO,但是后来由于种种原因,终于又回来了,算是遇上贵人了吧.我泡论坛有个非常不好的习惯,喜欢潜水,大家千万不要学我,一直的潜水搞的我论坛等级都很低,郁闷哪,最近才开始活跃起来.今天就闲来无事,自己写点