ES6标准入门
《ES6标准入门》是一本开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性
ixygj197875
十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、Sass、Less、JavaScript、jQuery、JSON、Python、PHP、Bootstrap、Django等,著有《HTML宝典》、《揭秘CSS》、《Sass简明教程》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,多个开源项目托管在 GitHub。
展开
-
ECMAScript 和 JavaScript 的关系
ECMAScript 和 JavaScript 的关系一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给国际标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(E转载 2018-01-13 22:00:49 · 419 阅读 · 0 评论 -
ES6 与 ECMAScript 2015 的关系
ES6 与 ECMAScript 2015 的关系ECMAScript 2015(简称 ES2015)这个词,也是经常可以看到的。它与 ES6 是什么关系呢?2011 年,ECMAScript 5.1 版发布后,就开始制定 6.0 版了。因此,ES6 这个词的原意,就是指 JavaScript 语言的下一个版本。但是,因为这个版本引入的语法功能太多,而且制定过程当中,还有很转载 2018-01-13 22:02:33 · 4453 阅读 · 0 评论 -
ECMAScript 语法提案的批准流程
ECMAScript 语法提案的批准流程任何人都可以向标准委员会(又称 TC39 委员会)提案,要求修改语言标准。一种新的语法从提案到变成正式标准,需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。Stage 0 - Strawman(展示阶段)Stage 1 - Proposal(征求意见阶段)Stage 2 - Draft(草案阶段)Sta转载 2018-01-13 22:03:06 · 1284 阅读 · 0 评论 -
ECMAScript 的发展历史
ECMAScript 的发展历史ES6 从开始制定到最后发布,整整用了 15 年。前面提到,ECMAScript 1.0 是 1997 年发布的,接下来的两年,连续发布了 ECMAScript 2.0(1998 年 6 月)和 ECMAScript 3.0(1999 年 12 月)。3.0 版是一个巨大的成功,在业界得到广泛支持,成为通行标准,奠定了 JavaScript 语言的基转载 2018-01-13 22:04:07 · 1227 阅读 · 0 评论 -
ECMAScript 的部署进度
ECMAScript 的部署进度各大浏览器的最新版本,对 ES6 的支持可以查看kangax.github.io/es5-compat-table/es6/。随着时间的推移,支持度已经越来越高了,超过 90%的 ES6 语法特性都实现了。Node 是 JavaScript 的服务器运行环境(runtime)。它对 ES6 的支持度更高。除了那些默认打开的功能,还有一些语法功能已经实转载 2018-01-13 22:04:59 · 196 阅读 · 0 评论 -
Babel 转码器
Babel 转码器Babel是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在现有环境执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。// 转码前input.map(item => item + 1);// 转码后input.map(function (item) { return item + 1;});转载 2018-01-13 22:06:03 · 613 阅读 · 0 评论 -
Traceur 转码器
Traceur 转码器Google 公司的Traceur转码器,也可以将 ES6 代码转为 ES5 代码。直接插入网页Traceur 允许将 ES6 代码直接插入网页。首先,必须在网页头部加载 Traceur 库文件。 src="https://google.github.io/traceur-compiler/bin/traceur.js"> src="https:/转载 2018-01-13 22:06:57 · 3108 阅读 · 0 评论 -
let 命令
let 命令基本用法ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。以前,为变量赋值,只能直接指定值。let a = 1;let b = 2;let c = 3;ES6 允许写成下面这样。let [a, b, c] = [1, 2, 3];上面代码表示,可以从数组中提取值,按照对应位置,对变转载 2018-01-14 22:09:31 · 1884 阅读 · 0 评论 -
块级作用域
块级作用域ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。第一种场景,内层变量可能会覆盖外层变量。var tmp = new Date();function f() { console.log(tmp); if (false) { var tmp = 'hello world'; }}f(); // undefined上面代码的原转载 2018-01-14 22:11:10 · 278 阅读 · 0 评论 -
const 命令
const 命令const声明一个只读的常量。一旦声明,常量的值就不能改变。const PI = 3.1415;PI // 3.1415PI = 3;// TypeError: Assignment to constant variable.上面代码表明改变常量的值会报错。const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋转载 2018-01-14 22:12:28 · 310 阅读 · 0 评论 -
顶层对象的属性
顶层对象的属性顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象。ES5 之中,顶层对象的属性与全局变量是等价的。window.a = 1;a // 1a = 2;window.a // 2上面代码中,顶层对象的属性赋值与全局变量的赋值,是同一件事。顶层对象的属性与全局变量挂钩,被认为是 JavaScript 语言最大的设计败笔之一。转载 2018-01-14 22:13:40 · 564 阅读 · 0 评论 -
global对象
global对象ES5 的顶层对象,本身也是一个问题,因为它在各种实现里面是不统一的。浏览器里面,顶层对象是window,但 Node 和 Web Worker 没有window。浏览器和 Web Worker 里面,self也指向顶层对象,但是 Node 没有self。Node 里面,顶层对象是global,但其他环境都不支持。同一段代码为了能够在各种环境,都转载 2018-01-14 22:15:09 · 696 阅读 · 0 评论 -
数组的解构赋值
数组的解构赋值基本用法ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。以前,为变量赋值,只能直接指定值。let a = 1;let b = 2;let c = 3;ES6 允许写成下面这样。let [a, b, c] = [1, 2, 3];上面代码表示,可以从数组中提取值,按照对应位置,对转载 2018-01-15 22:44:39 · 340 阅读 · 0 评论 -
对象的解构赋值
对象的解构赋值解构不仅可以用于数组,还可以用于对象。let { foo, bar } = { foo: "aaa", bar: "bbb" };foo // "aaa"bar // "bbb"对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。let { bar, foo } =转载 2018-01-15 22:45:58 · 1720 阅读 · 0 评论 -
字符串的解构赋值
字符串的解构赋值字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。const [a, b, c, d, e] = 'hello';a // "h"b // "e"c // "l"d // "l"e // "o"类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。let {length : len} = 'hello';len // 5转载 2018-01-15 22:46:58 · 443 阅读 · 0 评论 -
数值和布尔值的解构赋值
数值和布尔值的解构赋值解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。let {toString: s} = 123;s === Number.prototype.toString // truelet {toString: s} = true;s === Boolean.prototype.toString // true上面代码中,数值和布尔值的包装对象都有toSt转载 2018-01-15 22:48:05 · 1126 阅读 · 0 评论 -
函数参数的解构赋值
函数参数的解构赋值函数的参数也可以使用解构赋值。function add([x, y]){ return x + y;}add([1, 2]); // 3上面代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。对于函数内部的代码来说,它们能感受到的参数就是x和y。下面是另一个例子。[[1, 2], [3, 4]].map(转载 2018-01-15 22:49:21 · 1757 阅读 · 0 评论 -
圆括号问题
圆括号问题解构赋值虽然很方便,但是解析起来并不容易。对于编译器来说,一个式子到底是模式,还是表达式,没有办法从一开始就知道,必须解析到(或解析不到)等号才能知道。由此带来的问题是,如果模式中出现圆括号怎么处理。ES6 的规则是,只要有可能导致解构的歧义,就不得使用圆括号。但是,这条规则实际上不那么容易辨别,处理起来相当麻烦。因此,建议只要有可能,就不要在模式中放置圆括号。转载 2018-01-15 22:50:01 · 550 阅读 · 0 评论 -
解构赋值的用途
解构赋值的用途变量的解构赋值用途很多。(1)交换变量的值let x = 1;let y = 2;[x, y] = [y, x];上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰。(2)从函数返回多个值函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。// 返回一个数组fun转载 2018-01-15 22:51:02 · 1387 阅读 · 0 评论 -
字符的 Unicode 表示法
字符的 Unicode 表示法JavaScript 允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。"\u0061"// "a"但是,这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表示。"\uD842\uDFB7"// "?""\u20BB7"// " 7"上面代码表示,如果直接在\u后面跟上超过0xFFF转载 2018-01-17 22:00:39 · 4662 阅读 · 1 评论 -
codePointAt()方法
codePointAt()方法JavaScript 内部,字符以 UTF-16 的格式储存,每个字符固定为2个字节。对于那些需要4个字节储存的字符(Unicode 码点大于0xFFFF的字符),JavaScript 会认为它们是两个字符。var s = "?";s.length // 2s.charAt(0) // ''s.charAt(1) // ''s.charCodeAt(0) // 553转载 2018-01-17 22:01:41 · 15907 阅读 · 0 评论 -
String.fromCodePoint()方法
String.fromCodePoint()方法ES5 提供String.fromCharCode()方法,用于从码点返回对应字符,但是这个方法不能识别 32 位的 UTF-16 字符(Unicode 编号大于0xFFFF)。String.fromCharCode(0x20BB7)// "ஷ"上面代码中,String.fromCharCode()不能识别大于0xFFFF的码点,所以0x20BB7就转载 2018-01-17 22:02:30 · 5420 阅读 · 2 评论 -
字符串的遍历器接口
字符串的遍历器接口ES6 为字符串添加了遍历器接口(详见《Iterator》一章),使得字符串可以被for...of循环遍历。for (let codePoint of 'foo') { console.log(codePoint)}点击打开链接// "f"// "o"// "o"除了遍历字符串,这个遍历器最大的优点是可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点。let t转载 2018-01-17 22:03:56 · 405 阅读 · 0 评论 -
at()方法
at()方法ES5 对字符串对象提供charAt()方法,返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符。'abc'.charAt(0) // "a"'?'.charAt(0) // "\uD842"上面代码中,charAt()方法返回的是 UTF-16 编码的第一个字节,实际上是无法显示的。目前,有一个提案,提出字符串实例的at()方法,可以识别 Unicode 编号大于0x转载 2018-01-17 22:04:50 · 2569 阅读 · 1 评论 -
normalize()方法
normalize()方法许多欧洲语言有语调符号和重音符号。为了表示它们,Unicode 提供了两种方法。一种是直接提供带重音符号的字符,比如Ǒ(\u01D1)。另一种是提供合成符号(combining character),即原字符与重音符号的合成,两个字符合成一个字符,比如O(\u004F)和ˇ(\u030C)合成Ǒ(\u004F\u030C)。这两种表示方法,在视觉和语义上都等价,但是 Ja转载 2018-01-17 22:05:53 · 14401 阅读 · 1 评论 -
includes(), startsWith(), endsWith()
includes(), startsWith(), endsWith()传统上,JavaScript 只有indexOf()方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。includes()方法:返回布尔值,表示是否找到了参数字符串。startsWith()方法:返回布尔值,表示参数字符串是否在原字符串的头部。endsWith()方法:返回布尔值,表示参数字符串转载 2018-01-17 22:06:43 · 302 阅读 · 0 评论 -
repeat()方法
repeat()方法repeat()方法返回一个新字符串,表示将原字符串重复n次。'x'.repeat(3) // "xxx"'hello'.repeat(2) // "hellohello"'na'.repeat(0) // ""参数如果是小数,会被取整。'na'.repeat(2.9) // "nana"如果repeat()方法的参数是负数或者Infinity,会报错。'na'.repeat(转载 2018-01-17 22:07:30 · 25652 阅读 · 0 评论 -
padStart()方法,padEnd()方法
padStart()方法,padEnd()方法ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。'x'.padStart(5, 'ab') // 'ababx''x'.padStart(4, 'ab') // 'abax''x'.padEnd(5, 'ab') // 'xabab''x'.pad转载 2018-01-17 22:08:17 · 79327 阅读 · 3 评论 -
模板字符串
模板字符串传统的 JavaScript 语言,输出模板通常是这样写的。$('#result').append( 'There are ' + basket.count + ' ' + 'items in your basket, ' + '' + basket.onSale + ' are on sale!');上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。$('#re转载 2018-01-17 22:09:25 · 608 阅读 · 0 评论 -
模板编译实例
模板编译实例下面,我们来看一个通过模板字符串,生成正式模板的实例。let template = ` `;上面代码在模板字符串之中,放置了一个常规模板。该模板使用放置 JavaScript 代码,使用输出 JavaScript 表达式。怎么编译这个模板字符串呢?一种思路是将其转换为 JavaScript 表达式字符串。echo('');for(let i=0; i <转载 2018-01-18 22:54:46 · 340 阅读 · 0 评论 -
标签模板
标签模板模板字符串的功能,不仅仅是上面这些。它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。alert`123`// 等同于alert(123)标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。但是,如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处转载 2018-01-18 22:56:06 · 1103 阅读 · 0 评论 -
String.raw()方法
String.raw()方法ES6 还为原生的 String 对象,提供了一个String.raw()方法。String.raw()方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。String.raw`Hi\n${2+3}!`;// "Hi\\n5!"String.raw`Hi\u000A!`;// 'Hi\\u000A转载 2018-01-18 22:57:08 · 9730 阅读 · 7 评论 -
模板字符串的限制
模板字符串的限制前面提到标签模板里面,可以内嵌其他语言。但是,模板字符串默认会将字符串转义,导致无法嵌入其他语言。举例来说,标签模板里面可以嵌入 LaTEX 语言。function latex(strings) { // ...}let document = latex`\newcommand{\fun}{\textbf{Fun!}} // 正常工作\newcommand{\unicode}{转载 2018-01-18 22:58:17 · 1057 阅读 · 0 评论 -
RegExp 构造函数
RegExp 构造函数在 ES5 中,RegExp构造函数的参数有两种情况。第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag)。var regex = new RegExp('xyz', 'i');// 等价于var regex = /xyz/i;第二种情况是,参数是一个正则表示式,这时会返回一个原有正则表达式的拷贝。var regex =转载 2018-01-19 22:07:56 · 994 阅读 · 0 评论 -
字符串的正则方法
字符串的正则方法字符串对象共有 4 个方法,可以使用正则表达式:match()、replace()、search()和split()。ES6 将这 4 个方法,在语言内部全部调用RegExp的实例方法,从而做到所有与正则相关的方法,全都定义在RegExp对象上。String.prototype.match调用RegExp.prototype[Symbol.match]转载 2018-01-19 22:08:45 · 432 阅读 · 0 评论 -
u 修饰符
u 修饰符ES6 对正则表达式添加了u修饰符,含义为“Unicode 模式”,用来正确处理大于\uFFFF的 Unicode 字符。也就是说,会正确处理四个字节的 UTF-16 编码。/^\uD83D/u.test('\uD83D\uDC2A') // false/^\uD83D/.test('\uD83D\uDC2A') // true上面代码中,\uD83D\uDC2A转载 2018-01-19 22:09:40 · 697 阅读 · 0 评论 -
y 修饰符
y 修饰符除了u修饰符,ES6 还为正则表达式添加了y修饰符,叫做“粘连”(sticky)修饰符。y修饰符的作用与g修饰符类似,也是全局匹配,后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于,g修饰符只要剩余位置中存在匹配就可,而y修饰符确保匹配必须从剩余的第一个位置开始,这也就是“粘连”的涵义。var s = 'aaa_aa_a';var r1 = /a+/g;va转载 2018-01-19 22:10:29 · 1006 阅读 · 0 评论 -
sticky 属性
sticky 属性与y修饰符相匹配,ES6 的正则对象多了sticky属性,表示是否设置了y修饰符。var r = /hello\d/y;r.sticky // true转载 2018-01-19 22:11:23 · 968 阅读 · 0 评论 -
flags 属性
flags 属性ES6 为正则表达式新增了flags属性,会返回正则表达式的修饰符。// ES5 的 source 属性// 返回正则表达式的正文/abc/ig.source// "abc"// ES6 的 flags 属性// 返回正则表达式的修饰符/abc/ig.flags// 'gi'转载 2018-01-19 22:12:17 · 782 阅读 · 0 评论 -
s 修饰符:dotAll 模式
s 修饰符:dotAll 模式正则表达式中,点(.)是一个特殊字符,代表任意的单个字符,但是行终止符(line terminator character)除外。以下四个字符属于”行终止符“。U+000A 换行符(\n)U+000D 回车符(\r)U+2028 行分隔符(line separator)U+2029 段分隔符(paragraph separa转载 2018-01-19 22:13:02 · 1257 阅读 · 0 评论