ECMAScript 6 语法和应用

高洛峰
课程大纲
认识 ES6
» 函数的参数
ES6 兼容性解决
let 和 const » 解构赋值
箭头函数 » Class 的用法
数组的新增方法
» JSON 的新应用
Map 数据结构
字符串和新增方法和模版字符串 » Module 模块
» ES7-ES11 的一些新特性介绍
ECMAScript 和 JavaScript 的关系
ECMA 是“ European Computer Manufacturers Association” 的缩写，中文称欧洲计算机制造联合
会。这个组织的目标是评估，开发和认可电信和计算机标准。

ECMA 是标准， JavaScript 是实现

类似 HTML5 是标准， IE10 、 Chrome 、 FF 都是实现
目的是让所有前端脚本都实现 ECMA
目前只有 JavaScript 实现 ECMA 标准， ECMAScript ≈ JS

ECMAScript 简称 ECMA 或 ES （ ES6 ）

目前版本
高级浏览器支持 ES6
低级浏览器主要支持 ES3.1
ECMA 标准出台流程
ECMAScript 是跨多个平台的许多厂商（包括浏览器厂商在内的各方组成）实施的不断发展的标
准。 ES6 （ ECMAScript 2015 ）花费六年的时间敲定，是一个很大的发行版。新的年度发布流程被制
定，以简化流程并更快地添加功能。 ES11 （ ES2020 ）是目前的最新版本。推动 JavaScript 提案沿着
一条严格的发展道路前进 :

Stage 0: strawman—— 最初想法的提交。

Stage 1: proposal （提案）——由至少一名成员倡导的正式提案文件，该文件包括 API 事例。
Stage 2: draft （草案）——功能规范的初始版本，该版本包含功能规范的两个实验实现。
Stage 3: candidate （候选）——提案规范通过审查并从厂商那里收集反馈
Stage 4: finished （完成）——提案准备加入 ECMAScript ，但是到浏览器或者 Nodejs 中可能需要更长的时间
时间 版本 说明
1996 年 11 月 JavaScript 的创造者 Netscape 公司将 JavaScript 提交给标准化组织 ECMA 。
1997 年 ES1 ECMA 发布 262 号标准文件（ ECMA-262 ），规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript (ES).
1998 年 ES2 内容编辑加工，没有特性修改。
1999 年 ES3 有较完善的修改，成为 JavaScript 的通行标准，得到了广泛支持。
2000 年 ES4 2008 年终止也称作 JavaScript 2 ，因改动太大没有通过， Harmony 项目启动来跟进， ES4 大部分内容被 ES6 继承 .
Harmony 部分内容放到 ES6 之后。

2009 年 ES5(ES3.1) 新功能主要包括： JSON 对象（包含 parse/stringify 等方法）、 Array 和 Object 增加一些方法，严格模式（ use stric
t ），函数的 bind 方法。

2011 年 ES5.1 成为 ISO 国际标准（ ISO/IEC 16262:2011) ， 到了 2012 年底，主流浏览器都支持 ECMAScript 5.1 的全部功能
2015 年 ES2015(ES6) 做了大量的更新，但向后兼容。 ES6 是一次重大改进。
部分功能： let/const 、变量的解构赋值、 Promise 、箭头函数…

2016 年 ES2016(ES7) 新功能主要包括：

1. Array.prototype.includes 检查数组中是否存在值；（区别 ES6 字符串的 includes 方法）
2. Exponentiation Operator 求幂运算 (a ** b 等价于 Math.pow(a,b))

2017 年 ES2017(ES8) 部分功能：

1.Object.values/entries/getOwnPropertyDescriptors
2.String.prototype.padStart/padEnd
3. 函数参数列表和调用中的尾逗号（ Trailing commas ）
4.Async Functions 异步函数（ async/await ）

2018 年 ES2018(ES9) 现在已经可用了。新增异步迭代、 Promise.finally() 、 Rest/Spread 属性、正则表达式命名捕获组、正则表达式反向断

言、非转义序列的模板字符串 ......
接触 ES6 的意义
对语法的改进，功能的增加
使用 Vue 、 React 、小程序、 Nodejs 等都在用
ES6 以上版本再等等
let 和 const 命令
ES6 新增 let 和 const 命令，用来声明变量，用法类
似于 var
let 声明的变量，只在 let 命令所在的代码块内有效
let 命令不存在变量提升
let 命令不允许在相同作用域内，重复声明同一个变量
» const 命令声明一个只读的常量。一旦声明，常量
的值就不能改变
» const 命令声明的常量不得改变值。即一旦声明，
就必须立即初始化。
» const 命令声明的常量，只在声明所在的块级作用
域内有效
» const 命令声明的常量不提升，只能在声明的位置
后使用
» const 命令声明的常量，与 let 一样不可重复声
明
» const 命令声明的复合类型的数据（主要是对象和
数组），变量指向的内存地址
箭头函数 Arrow Function
» 关于箭头函数中的 this 的指向
ES6 允许使用“箭头”（ => ）定义
不需要参数或需要多个参数，就用圆括号代 » 普通函数的 this ：指向它的调用者，如果没有
代码块部分多于一条语句，就用大括号括起 调用者则默认指向 window.
来，并且用 return 返回 » 箭头函数的 this: 指向箭头函数定义时所处的
箭头函数返回对象时，必须在对象外面加上括 对象，而不是箭头函数使用时所在的对象，默
号 认使用父级的 this.
箭头函数使得表达更加简洁
箭头函数能够简化回调函数
» 综上：箭头函数没有自己的 this ，它的 this 是
继承而来，默认指向在定义它时所处的对象
( 宿主对象 ) 。
数组的新增高级方法

filter 过滤器
map 映射
reduce 汇总

some()
every()
Set 和 Map 数据结构
Map 数据结构类似于对象，是键值对的集合，传统的键只能用字符串， Map 的键不限于字符串，各种类型的值（包括
对象）都可以当作键。
属性和操作方法
size 属性，返回 Map 结构的成员总数
set(key,value) 方法，设置 set 方法设置键名 key 对应的键值为 value ，然后返回整个 Map 结构。如果 key 已经有值，则键值会被更新，否则就
新生成该
get(key) 方法，读取 key 对应的键值，如果找不到 key ，返回 undefined
has(key) 方法，返回一个布尔值，表示某个键是否在当前 Map 对象之中。
delete(key) 方法，删除某个键，返回 true 。如果删除失败，返回 false 。
clear(key) 方法，清除所有成员，没有返回值。
Map 遍历
keys() 返回键名的遍历器
values() 返回键值的遍历器
entries() 返回所有成员的遍历器
forEach() 遍历 Map 的所有成员
字符串新增功能
字符串的新方法
startsWith 判断以什么字符串开头
endsWith 判断以什么字符串结尾

模板字符串
模板字符串（ template string ）是增强版的字符串，用反引号（ ` ）标识。它可以当作
普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
ES6 解构赋值和扩展运算符
解构赋值
左右两边结构必须一样
右边必须有值
声明和赋值不能分开
扩展运算符
... 三点运算符
展开数组
默认参数
对象的新语法
ES 6 的 Class （类）概念
constructor 是构造方法
this 关键字代表实例对象
通过 extends 关键字实现继承
super 关键字，表示父类的构造函数，用来新建父类的 this 对象

JSON 对象的新应用
JSON.stringify() 串行化
JSON.parse() 反串行化
简写
( 属性和值 ) 名字一样可以简写
方法一样可以简写（ :function 省）
Module 模块化编程
模块化优点
减少命名冲突
避免引入时的层层依赖
可以提升执行效率
export 命令：用于规定模块的对外接口
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能
够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。
import 命令：用于输入其他模块提供的功能
import 命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量
名，必须与被导入模块（ profile.js ）对外接口的名称相同。
总结和作业

使用 webpack 插件处理 ES6 语法的兼容性