关注
分享
《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 · 407 阅读 · 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 · 4436 阅读 · 0 评论 -
ECMAScript 语法提案的批准流程
ECMAScript 语法提案的批准流程任何人都可以向标准委员会（又称 TC39 委员会）提案，要求修改语言标准。一种新的语法从提案到变成正式标准，需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。Stage 0 - Strawman（展示阶段）Stage 1 - Proposal（征求意见阶段）Stage 2 - Draft（草案阶段）Sta转载 2018-01-13 22:03:06 · 1257 阅读 · 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 · 1204 阅读 · 0 评论 -
ECMAScript 的部署进度
ECMAScript 的部署进度各大浏览器的最新版本，对 ES6 的支持可以查看kangax.github.io/es5-compat-table/es6/。随着时间的推移，支持度已经越来越高了，超过 90%的 ES6 语法特性都实现了。Node 是 JavaScript 的服务器运行环境（runtime）。它对 ES6 的支持度更高。除了那些默认打开的功能，还有一些语法功能已经实转载 2018-01-13 22:04:59 · 188 阅读 · 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 · 602 阅读 · 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 · 3072 阅读 · 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 · 1837 阅读 · 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 · 270 阅读 · 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 · 303 阅读 · 0 评论 -
顶层对象的属性
顶层对象的属性顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。window.a = 1;a // 1a = 2;window.a // 2上面代码中，顶层对象的属性赋值与全局变量的赋值，是同一件事。顶层对象的属性与全局变量挂钩，被认为是 JavaScript 语言最大的设计败笔之一。转载 2018-01-14 22:13:40 · 558 阅读 · 0 评论 -
global对象
global对象ES5 的顶层对象，本身也是一个问题，因为它在各种实现里面是不统一的。浏览器里面，顶层对象是window，但 Node 和 Web Worker 没有window。浏览器和 Web Worker 里面，self也指向顶层对象，但是 Node 没有self。Node 里面，顶层对象是global，但其他环境都不支持。同一段代码为了能够在各种环境，都转载 2018-01-14 22:15:09 · 690 阅读 · 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 · 332 阅读 · 0 评论 -
对象的解构赋值
对象的解构赋值解构不仅可以用于数组，还可以用于对象。let { foo, bar } = { foo: "aaa", bar: "bbb" };foo // "aaa"bar // "bbb"对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。let { bar, foo } =转载 2018-01-15 22:45:58 · 1695 阅读 · 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 · 436 阅读 · 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 · 1114 阅读 · 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 · 1747 阅读 · 0 评论 -
圆括号问题
圆括号问题解构赋值虽然很方便，但是解析起来并不容易。对于编译器来说，一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到（或解析不到）等号才能知道。由此带来的问题是，如果模式中出现圆括号怎么处理。ES6 的规则是，只要有可能导致解构的歧义，就不得使用圆括号。但是，这条规则实际上不那么容易辨别，处理起来相当麻烦。因此，建议只要有可能，就不要在模式中放置圆括号。转载 2018-01-15 22:50:01 · 537 阅读 · 0 评论 -
解构赋值的用途
解构赋值的用途变量的解构赋值用途很多。（1）交换变量的值let x = 1;let y = 2;[x, y] = [y, x];上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。（2）从函数返回多个值函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。// 返回一个数组fun转载 2018-01-15 22:51:02 · 1379 阅读 · 0 评论 -
字符的 Unicode 表示法
字符的 Unicode 表示法JavaScript 允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。"\u0061"// "a"但是，这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。"\uD842\uDFB7"// "?""\u20BB7"// " 7"上面代码表示，如果直接在\u后面跟上超过0xFFF转载 2018-01-17 22:00:39 · 4624 阅读 · 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 · 15849 阅读 · 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 · 5395 阅读 · 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 · 394 阅读 · 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 · 2558 阅读 · 1 评论 -
normalize()方法
normalize()方法许多欧洲语言有语调符号和重音符号。为了表示它们，Unicode 提供了两种方法。一种是直接提供带重音符号的字符，比如Ǒ（\u01D1）。另一种是提供合成符号（combining character），即原字符与重音符号的合成，两个字符合成一个字符，比如O（\u004F）和ˇ（\u030C）合成Ǒ（\u004F\u030C）。这两种表示方法，在视觉和语义上都等价，但是 Ja转载 2018-01-17 22:05:53 · 14355 阅读 · 1 评论 -
includes(), startsWith(), endsWith()
includes(), startsWith(), endsWith()传统上，JavaScript 只有indexOf()方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。includes()方法：返回布尔值，表示是否找到了参数字符串。startsWith()方法：返回布尔值，表示参数字符串是否在原字符串的头部。endsWith()方法：返回布尔值，表示参数字符串转载 2018-01-17 22:06:43 · 292 阅读 · 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 · 25558 阅读 · 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 · 78767 阅读 · 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 · 600 阅读 · 0 评论 -
模板编译实例
模板编译实例下面，我们来看一个通过模板字符串，生成正式模板的实例。let template = ` `;上面代码在模板字符串之中，放置了一个常规模板。该模板使用放置 JavaScript 代码，使用输出 JavaScript 表达式。怎么编译这个模板字符串呢？一种思路是将其转换为 JavaScript 表达式字符串。echo('');for(let i=0; i <转载 2018-01-18 22:54:46 · 329 阅读 · 0 评论 -
标签模板
标签模板模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。alert`123`// 等同于alert(123)标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处转载 2018-01-18 22:56:06 · 1072 阅读 · 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 · 9679 阅读 · 7 评论 -
模板字符串的限制
模板字符串的限制前面提到标签模板里面，可以内嵌其他语言。但是，模板字符串默认会将字符串转义，导致无法嵌入其他语言。举例来说，标签模板里面可以嵌入 LaTEX 语言。function latex(strings) { // ...}let document = latex`\newcommand{\fun}{\textbf{Fun!}} // 正常工作\newcommand{\unicode}{转载 2018-01-18 22:58:17 · 1047 阅读 · 0 评论 -
RegExp 构造函数
RegExp 构造函数在 ES5 中，RegExp构造函数的参数有两种情况。第一种情况是，参数是字符串，这时第二个参数表示正则表达式的修饰符（flag）。var regex = new RegExp('xyz', 'i');// 等价于var regex = /xyz/i;第二种情况是，参数是一个正则表示式，这时会返回一个原有正则表达式的拷贝。var regex =转载 2018-01-19 22:07:56 · 980 阅读 · 0 评论 -
字符串的正则方法
字符串的正则方法字符串对象共有 4 个方法，可以使用正则表达式：match()、replace()、search()和split()。ES6 将这 4 个方法，在语言内部全部调用RegExp的实例方法，从而做到所有与正则相关的方法，全都定义在RegExp对象上。String.prototype.match调用RegExp.prototype[Symbol.match]转载 2018-01-19 22:08:45 · 419 阅读 · 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 · 685 阅读 · 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 · 983 阅读 · 0 评论 -
sticky 属性
sticky 属性与y修饰符相匹配，ES6 的正则对象多了sticky属性，表示是否设置了y修饰符。var r = /hello\d/y;r.sticky // true转载 2018-01-19 22:11:23 · 956 阅读 · 0 评论 -
flags 属性
flags 属性ES6 为正则表达式新增了flags属性，会返回正则表达式的修饰符。// ES5 的 source 属性// 返回正则表达式的正文/abc/ig.source// "abc"// ES6 的 flags 属性// 返回正则表达式的修饰符/abc/ig.flags// 'gi'转载 2018-01-19 22:12:17 · 772 阅读 · 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 · 1248 阅读 · 0 评论