ECMAScript 6 简介
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在
2015 年 6 月正式发布了。它的目标,是使得 JavaScript
语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
ECMAScript 和 JavaScript
的关系
一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?
要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者
Netscape 公司,决定将 JavaScript 提交给标准化组织
ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262
号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为
ECMAScript,这个版本就是 1.0 版。
该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫
JavaScript,有两个原因。一是商标,Java 是 Sun
公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript
...
console 对象与控制台
console 对象
console对象是 JavaScript 的原生对象,它有点像 Unix
系统的标准输出stdout和标准错误stderr,可以输出各种信息到控制台,并且还提供了很多有用的辅助方法。
console的常见用途有两个。
调试程序,显示网页代码运行时的错误信息。
提供了一个命令行接口,用来与网页代码互动。
console对象的浏览器实现,包含在浏览器自带的开发工具之中。以
Chrome 浏览器的“开发者工具”(Developer
Tools)为例,可以使用下面三种方法的打开它。
按 F12 或者Control + Shift + i(PC)/
Command + Option + i(Mac)。
浏览器菜单选择“工具/开发者工具”。
在一个页面元素上,打开右键菜单,选择其中的“Inspect Element”。
打开开发者工具以后,顶端有多个面板。
Elements:查看网页的 HTML 源码和 CSS 代码。
Resources:查看网页加载的各种资源文件(比如代码文件、字体文件
CSS 文件等),以及在硬盘上创建的各种内容 ...
编程风格
概述
“编程风格”(programming
style)指的是编写代码的样式规则。不同的程序员,往往有不同的编程风格。
有人说,编译器的规范叫做“语法规则”(grammar),这是程序员必须遵守的;而编译器忽略的部分,就叫“编程风格”(programming
style),这是程序员可以自由选择的。这种说法不完全正确,程序员固然可以自由选择编程风格,但是好的编程风格有助于写出质量更高、错误更少、更易于维护的程序。
所以,编程风格的选择不应该基于个人爱好、熟悉程度、打字量等因素,而要考虑如何尽量使代码清晰易读、减少出错。你选择的,不是你喜欢的风格,而是一种能够清晰表达你的意图的风格。这一点,对于
JavaScript 这种语法自由度很高的语言尤其重要。
必须牢记的一点是,如果你选定了一种“编程风格”,就应该坚持遵守,切忌多种风格混用。如果你加入他人的项目,就应该遵守现有的风格。
缩进
行首的空格和 Tab 键,都可以产生代码缩进效果(indent)。
Tab 键可以节省击键次数,但不同的文本编辑器对 Tab
的显示不尽相同,有的显示四个空格,有的显示两个空格,所以有人觉得,空格 ...
错误处理机制
Error 实例对象
JavaScript
解析或运行时,一旦发生错误,引擎就会抛出一个错误对象。JavaScript
原生提供Error构造函数,所有抛出的错误都是这个构造函数的实例。
12var err = new Error('出错了');err.message // "出错了"
上面代码中,我们调用Error()构造函数,生成一个实例对象err。Error()构造函数接受一个参数,表示错误提示,可以从实例的message属性读到这个参数。抛出Error实例对象以后,整个程序就中断在发生错误的地方,不再往下执行。
JavaScript
语言标准只提到,Error实例对象必须有message属性,表示出错时的提示信息,没有提到其他属性。大多数
JavaScript
引擎,对Error实例还提供name和stack属性,分别表示错误的名称和错误的堆栈,但它们是非标准的,不是每种实现都有。
message:错误提示信息
name:错误名称(非标准属性)
stack:错误的堆栈(非标准属性)
使用name和message这两个属 ...
数据类型的转换
概述
JavaScript
是一种动态类型语言,变量没有类型限制,可以随时赋予任意值。
1var x = y ? 1 : 'a';
上面代码中,变量x到底是数值还是字符串,取决于另一个变量y的值。y为true时,x是一个数值;y为false时,x是一个字符串。这意味着,x的类型没法在编译阶段就知道,必须等到运行时才能知道。
虽然变量的数据类型是不确定的,但是各种运算符对数据类型是有要求的。如果运算符发现,运算子的类型与预期不符,就会自动转换类型。比如,减法运算符预期左右两侧的运算子应该是数值,如果不是,就会自动将它们转为数值。
1'4' - '3' // 1
上面代码中,虽然是两个字符串相减,但是依然会得到结果数值1,原因就在于
JavaScript 将运算子自动转为了数值。
本章讲解数据类型自动转换的规则。在此之前,先讲解如何手动强制转换数据类型。
强制转换
强制转换主要指使用Number()、String()和Boolean()三个函数,手动将各种类型的值,分别转换成数字、字符串或者布尔值。
Numbe ...
其他运算符,运算顺序
void 运算符
void运算符的作用是执行一个表达式,然后不返回任何值,或者说返回undefined。
12void 0 // undefinedvoid(0) // undefined
上面是void运算符的两种写法,都正确。建议采用后一种形式,即总是使用圆括号。因为void运算符的优先性很高,如果不使用括号,容易造成错误的结果。比如,void 4 + 7实际上等同于(void 4) + 7。
下面是void运算符的一个例子。
123var x = 3;void (x = 5) //undefinedx // 5
这个运算符的主要用途是浏览器的书签工具(Bookmarklet),以及在超级链接中插入代码防止网页跳转。
请看下面的代码。
123456<script>function f() { console.log('Hello World');}</script><a href="http://example.com" onclick="f(); ret ...
二进制位运算符
概述
二进制位运算符用于直接对二进制位进行计算,一共有7个。
二进制或运算符(or):符号为|,表示若两个二进制位都为0,则结果为0,否则为1。
二进制与运算符(and):符号为&,表示若两个二进制位都为1,则结果为1,否则为0。
二进制否运算符(not):符号为~,表示对一个二进制位取反。
异或运算符(xor):符号为^,表示若两个二进制位不相同,则结果为1,否则为0。
左移运算符(left
shift):符号为<<,详见下文解释。
右移运算符(right
shift):符号为>>,详见下文解释。
头部补零的右移运算符(zero filled right
shift):符号为>>>,详见下文解释。
这些位运算符直接处理每一个比特位(bit),所以是非常底层的运算,好处是速度极快,缺点是很不直观,许多场合不能使用它们,否则会使代码难以理解和查错。
有一点需要特别注意,位运算符只对整数起作用,如果一个运算子不是整数,会自动转为整数后再执行。另外,虽然在
JavaScript
内部,数值都是以64位浮点数的形式储存,但是 ...
布尔运算符
概述
布尔运算符用于将表达式转为布尔值,一共包含四个运算符。
取反运算符:!
且运算符:&&
或运算符:||
三元运算符:?:
取反运算符(!)
取反运算符是一个感叹号,用于将布尔值变为相反值,即true变成false,false变成true。
12!true // false!false // true
对于非布尔值,取反运算符会将其转为布尔值。可以这样记忆,以下六个值取反后为true,其他值都为false。
undefined
null
false
0
NaN
空字符串('')
12345678910!undefined // true!null // true!0 // true!NaN // true!"" // true!54 // false!'hello' // false![] // false!{} // false
上面代码中,不管什么类型的值,经过取反运算后,都变成了布尔值。
如果对一个值连续做两次取反运算,等于将其转为对应的布尔值,与Boolean函数的作用相同。 ...
比较运算符
概述
比较运算符用于比较两个值的大小,然后返回一个布尔值,表示是否满足指定的条件。
12 > 1 // true
上面代码比较2是否大于1,返回true。
注意,比较运算符可以比较各种类型的值,不仅仅是数值。
JavaScript 一共提供了8个比较运算符。
> 大于运算符
< 小于运算符
<= 小于或等于运算符
>= 大于或等于运算符
== 相等运算符
=== 严格相等运算符
!= 不相等运算符
!== 严格不相等运算符
这八个比较运算符分成两类:相等比较和非相等比较。两者的规则是不一样的,对于非相等的比较,算法是先看两个运算子是否都是字符串,如果是的,就按照字典顺序比较(实际上是比较
Unicode 码点);否则,将两个运算子都转成数值,再比较数值的大小。
非相等运算符:字符串的比较
字符串按照字典顺序进行比较。
12'cat' > 'dog' // false'cat' > 'catalog' // false
JavaScript 引 ...
算术运算符
运算符是处理数据的基本方法,用来从现有的值得到新的值。JavaScript
提供了多种运算符,覆盖了所有主要的运算。
概述
JavaScript 共提供10个算术运算符,用来完成基本的算术运算。
加法运算符:x + y
减法运算符: x - y
乘法运算符: x * y
除法运算符:x / y
指数运算符:x ** y
余数运算符:x % y
自增运算符:++x 或者
x++
自减运算符:--x 或者
x--
数值运算符: +x
负数值运算符:-x
减法、乘法、除法运算法比较单纯,就是执行相应的数学运算。下面介绍其他几个算术运算符,重点是加法运算符。
加法运算符
基本规则
加法运算符(+)是最常见的运算符,用来求两个数值的和。
11 + 1 // 2
JavaScript 允许非数值的相加。
12true + true // 21 + true // 2
上面代码中,第一行是两个布尔值相加,第二行是数值与布尔值相加。这两种情况,布尔值都会自动转成数值,然后再相加。
比较特殊的是,如果是两个字符串相加,这时加法运算符会变成连接运算符,返回一个新的字符串,将两个原字符串 ...