[Toc]
一、强大的babel
被称为下一代的JavaScript编译器,可以将es6的代码转换成es5的代码,从而让浏览器获得支持
Babel 的配置文件是.babelrc
,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。
该文件用来设置转码规则和插件,基本格式如下:
1 | { |
presets
字段设定转码规则,官方提供以下的规则集,你可以根据需要安装
1 | # 最新转码规则 |
然后,将这些规则加入.babelrc
1 | { |
注意,以下所有 Babel 工具和模块的使用,都必须先写好.babelrc
.
命令行转码
Babel 提供命令行工具@babel/cli
,用于命令行转码。它的安装命令如下:
1 | $ npm install --save-dev @babel/cli |
基本用法如下:
1 | # 转码结果输出到标准输出 |
babel-node
@babel/node
模块的babel-node
命令,提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能,而且可以直接运行 ES6 代码。
安装模块命令:
1 | $ npm install --save-dev @babel/node |
然后,执行babel-node
就进入 REPL 环境:
1 | $ npx babel-node |
babel-node
命令可以直接运行 ES6 脚本。将上面的代码放入脚本文件es6.js
,然后直接运行:
1 | # es6.js 的代码 |
babel/register模块
@babel/register
模块改写require
命令,为它加上一个钩子。此后,每当使用require
加载.js
、.jsx
、.es
和.es6
后缀名的文件,就会先用 Babel 进行转码。
安装模块:
1 | $ npm install --save-dev @babel/register |
使用时,必须首先加载@babel/register
:
1 | // index.js |
然后,就不需要手动对index.js
转码了:
1 | $ node index.js |
需要注意的是,@babel/register
只会对require
命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。
polyfill
Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如Iterator
、Generator
、Set
、Map
、Proxy
、Reflect
、Symbol
、Promise
等全局对象,以及一些定义在全局对象上的方法(比如Object.assign
)都不会转码。
举例来说,ES6 在Array
对象上新增了Array.from
方法。Babel 就不会转码这个方法。如果想让这个方法运行,可以使用core-js
和regenerator-runtime
(后者提供generator函数的转码),为当前环境提供一个垫片。
安装命令如下。
1 | $ npm install --save-dev core-js regenerator-runtime |
然后,在脚本头部,加入如下两行代码。
1 | import 'core-js'; |
Babel 默认不转码的 API 非常多,详细清单可以查看babel-plugin-transform-runtime
模块的definitions.js文件。
浏览器环境
Babel 也可以用于浏览器环境,使用@babel/standalone模块提供的浏览器版本,将其插入网页。
1 | <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> |
注意,网页实时将 ES6 代码转为 ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本。
Babel 提供一个REPL 在线编译器,可以在线将 ES6 代码转为 ES5 代码。转换后的代码,可以直接作为 ES5 代码插入网页运行。
二、let和const
1 |
|
另外,for
循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
1 | for (let i = 0; i < 3; i++) { |
上面代码正确运行,输出了 3 次abc
。这表明函数内部的变量i
与循环变量i
不在同一个作用域,有各自单独的作用域(同一个作用域不可使用 let
重复声明同一个变量)
暂时性死区
有些“死区”比较隐蔽,不太容易发现。
1 | function bar(x = y, y = 2) { |
上面代码中,调用bar
函数之所以报错(某些实现可能不报错),是因为参数x
默认值等于另一个参数y
,而此时y
还没有声明,属于“死区”。如果y
的默认值是x
,就不会报错,因为此时x
已经声明了。
1 | function bar(x = 2, y = x) { |
顶层对象的属性
顶层对象,在浏览器环境指的是window
对象,在 Node 指的是global
对象。ES5 之中,顶层对象的属性与全局变量是等价的。
1 | window.a = 1; |
上面代码中,顶层对象的属性赋值与全局变量的赋值,是同一件事。
顶层对象的属性与全局变量挂钩,被认为是 JavaScript 语言最大的设计败笔之一。这样的设计带来了几个很大的问题,首先是没法在编译时就报出变量未声明的错误,只有运行时才能知道(因为全局变量可能是顶层对象的属性创造的,而属性的创造是动态的);其次,程序员很容易不知不觉地就创建了全局变量(比如打字出错);最后,顶层对象的属性是到处可以读写的,这非常不利于模块化编程。另一方面,window
对象有实体含义,指的是浏览器的窗口对象,顶层对象是一个有实体含义的对象,也是不合适的。
ES6 为了改变这一点,一方面规定,为了保持兼容性,var
命令和function
命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let
命令、const
命令、class
命令声明的全局变量,不属于顶层对象的属性。也就是说,从 ES6 开始,全局变量将逐步与顶层对象的属性脱钩。
1 | var a = 1; |
上面代码中,全局变量a
由var
命令声明,所以它是顶层对象的属性;全局变量b
由let
命令声明,所以它不是顶层对象的属性,返回undefined
。
三、模板字符串
1 |
|
四、强大的函数
1 |
|
五、解构赋值
1 |
|
注意,ES6 内部使用严格相等运算符(===
),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined
,默认值才会生效。
1 | let [x = 1] = [undefined]; |
上面代码中,如果一个数组成员是null
,默认值就不会生效,因为null
不严格等于undefined
。
如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。
1 | function f() { |
上面代码中,因为x
能取到值,所以函数f
根本不会执行。上面的代码其实等价于下面的代码。
1 | let x; |
默认值可以引用解构赋值的其他变量,但该变量必须已经声明。
1 | let [x = 1, y = x] = []; // x=1; y=1 |
上面最后一个表达式之所以会报错,是因为x
用y
做默认值时,y
还没有声明
解构赋值的用途
(1)交换变量的值
1 | let x = 1; |
上面代码交换变量x
和y
的值,这样的写法不仅简洁,而且易读,语义非常清晰。
(2)从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
1 | // 返回一个数组 |
(3)函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
1 | // 参数是一组有次序的值 |
(4)提取 JSON 数据
解构赋值对提取 JSON 对象中的数据,尤其有用。
1 | let jsonData = { |
上面代码可以快速提取 JSON 数据的值。
(5)函数参数的默认值
1 | jQuery.ajax = function (url, { |
指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || 'default foo';
这样的语句。
(6)遍历 Map 结构
任何部署了 Iterator 接口的对象,都可以用for...of
循环遍历。Map 结构原生支持 Iterator 接口,配合变量的解构赋值,获取键名和键值就非常方便。
1 | const map = new Map(); |
如果只想获取键名,或者只想获取键值,可以写成下面这样。
1 | // 获取键名 |
(7)输入模块的指定方法
加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
1 | const { SourceMapConsumer, SourceNode } = require("source-map"); |
六、扩展的对象的功能
1 |
|
七、Symbol
1 |
|
八、Map和Set
1、Set
1 |
|
2、Map
1 |
|
九、数组的扩展功能
1、扩展方法1
1 |
|
2、扩展方法2
1 |
|
十、迭代器
1 |
|
十一、生成器
1、生成器
1 |
|
2、Generator的应用
1 |
|
十二、Promise
1、Promise对象
1 |
|
2、使用Promise封装ajax
1 |
|
3、Promise的其他方法
1 |
|
十三、async的用法
1 |
|
十四、class类
1、类的简介
1 |
|
2、类的继承
1 |
|
十五、module模块的应用
1 |
|
1 | // es6模块功能主要有两个命令构成:export和import |