讲真，ECMAScript的ES6新特性汇总！！前端快来学习！！
1 、ES6 新特性
现在使用主流的前端框架中，如ReactJS、Vue.js、angularjs等，都会使用到ES6的新特性，作为一名高级工程师而言，ES6也就成为了必修课，所以本套课程先以ES6的新特性开始。
1.1、了解ES6
ES6，是ECMAScript 6的简称，它是 JavaScript 语言的下一代标准，己于 2015 年 6 月正式发 布。
它的目标是使 JavaScript语言可以用于编写复杂的大型应用程序，成为企业级开发语言。
1.1.1.什么是ECMAScript？
来看下前端的发展历程：
web1.0时代：
最初的网页以 HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员
也只关心页面的样式和内容即可。
web2.0时代：
1995 年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
1996 年，微软发布了JScript，其实是JavaScript的逆向工程实现。
1997 年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了
ECMAscript 标准规范。JavaScript和JScript都是 ECMAScript 的标准实现者，随后各大浏览器厂商纷纷实现了
ECMAScript 标准。
所以，ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言，如JavaScript则是规范的具体实现。
1.2、let 和 const 命令
var
之前，我们写js定义变量的时候，只有一个关键字： var
var 有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。
例如这样的一段代码：
运行打印的结果是如下：
这样，就把变量的 i的作用域控制在了循环内部
const
const 声明的变量是常量，不能被修改，类似于java中final关键字。
1.3、字符串扩展
在ES6中，为字符串扩展了几个新的API：
includes() ：返回布尔值，表示是否找到了参数字符串。
startsWith() ：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith() ：返回布尔值，表示参数字符串是否在原字符串的尾部。
实验一下：
在两个 `之间的部分都会被作为字符串的值，可以任意换行。
1.3 、解构表达式
什么是解构？ – ES6中允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构 (
Destructuring)。比如有一个数组：
1.3.2、对象解构
例如有个person对象：
如过想要用其它变量接收，需要额外指定别名：
{name:n} ：name是person中的属性名，冒号后面的n是解构后要赋值给的变量。
1.4、函数优化
在ES6中，对函数的操作做了优化，使得我们在操作函数时更加的便捷。
1.4.1、函数参数默认值
在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
1.4.2、箭头函数
ES6中定义函数的简写方式：
一个参数时：
代码不止一行，可以用 {} 括起来。
1.4.3、对象的函数属性简写
1.4.4、箭头函数结合解构表达式
1.5、map和reduce
ES6中，数组新增了map和reduce方法。
1.5.1、reduce
reduce() ：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：
第一个参数是上一次 reduce处理的结果
第二个参数是数组中要处理的下一个元素
reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数
举例：
1.6 、扩展运算符
扩展运算符(spread)是三个点(…)， 将一个数组转为用逗号分隔的参数序列 。
用法：
console.log (...[1, 2, 3]); //1 2 3
console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5
function add(x, y) {
return x + y;
}
var numbers = [1, 2];
console.log(add(...numbers)); // 3
// 数组合并
let arr = [...[1,2,3],...[4,5,6]];
console.log(arr); //[1, 2, 3, 4, 5, 6]
// 与解构表达式结合
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first, rest) //1 [2, 3, 4, 5]
//将字符串转成数组
console.log([...'hello']) //["h", "e", "l", "l", "o"]
1.7、Promise
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法
上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样
的方法进行处理。
我们可以通过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。
语法：
示例：
const p = new Promise(function (resolve, reject) {
// 这里我们用定时任务模拟异步
setTimeout(() => {
const num = Math.random();
// 随机返回成功或失败
if (num < 0.5) {
resolve("成功！num:" + num)
} else {
reject("出错了！num:" + num)
}
}, 300)
})
// 调用promise
p.then(function (msg) {
console.log(msg);
}).catch(function (msg) {
console.log(msg);
})
1.8 、set和map
ES6提供了Set和Map的数据结构。
Set，本质与数组类似。不同在于Set中只能保存不同元素，如果元素相同会被忽略。和java中的Set集合非常相似。
构造函数：
map，本质是与Object类似的结构。不同在于，Object强制规定key只能是字符串。而Map结构的key可以是任意对象。即：
object 是
map 是
构造函数：
1.9、class（类）的基本语法
JavaScript 语言的传统方法是通过构造函数定义井生成新对象。ES6中引入了class的概念，通过class关键字自定义
类。
基本用法：
类的继承：
1.10、Generator函数
Generator 函数是 ES6 提供的 一种异步编程解决方案，语法行为与传统函数完全不同 。
Generator函数有两个特征: 一是 function命令与函数名 之间有一个星号: 二是 函数体内部使用 yield吾句定义不同的
内部状态。
用法：
可以看到，通过hello()返回的h对象，每调用一次next()方法返回一个对象，该对象包含了value值和done状态。直到遇到return关键字或者函数执行完毕，这个时候返回的状态为ture，表示已经执行结束了。
1.11、for…of循环
通过for…of可以循环遍历Generator函数返回的迭代器。
用法：
1.12、修饰器(Decorator)
修饰器(Decorator)是一个函数， 用来修改类的行为。 ES2017 引入了这项功能， 目前 Babel 转码器己经支持。
使用：
参考地址:https://blog.csdn.net/Marion158/article/details/99219058