ES6的前世今生
1、ECMAScript是什么？和 JavaScript 有着怎样的关系？
1996 年 11 月，Netscape 创造了javascript并将其提交给了标准化组织 ECMA，次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。
ECMAScript更新了6个版本，最新正式版 ES6（ECMAScript 6）是 JavaScript 语言的下一代标准，早已在 2015 年 6 月正式发布。要问两者之间的关系，可以用 ECMAScript 是 JavaScript 语言的国际标准，JavaScript 是 ECMAScript 的实现这句话来形容。
说的通俗易懂点：如果说设计图是标准，盖好的房子是实现，那么 ECMAScript就是设计图，JavaScript是盖好的房子。
2、历史进化过程
时间 | 版本 | 解释 |
|---|---|---|
2009.12 | S 5.0 | ES5正式发布，同时公布了JavaScript.next也就是后来的ES 6.0 |
2011.06 | ES 5.1 | ES5.1 版发布，并且成为 ISO 国际标准（ISO/IEC 16262:2011） |
2013.03 | ES 6.0 | ES6草案定稿，不再添加新功能。新的功能设想将被放到 ECMAScript 7。 |
2013.12 | ES 6.0 | ES6草案发布，然后是 12 个月的讨论期，听取各方反馈。 |
2015.06 | ES 6.0 | ES6 正式通过，成为国际标准。从 2000 年算起，这时已经过去了 15 年。JavaScript.next开始指向ES7.0 |
感悟：长路漫漫，吾将上下而求索！
3、ES6兼容性分析
3.1 横向对比
（1）桌面端浏览器对ES2015的支持情况
· Chrome：51 版起便可以支持 97% 的 ES6 新特性。
· Firefox：53 版起便可以支持 97% 的 ES6 新特性。
· Safari：10 版起便可以支持 99% 的 ES6 新特性。
· IE：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）
（2）移动端浏览器对ES2015的支持情况
· iOS：10.0 版起便可以支持 99% 的 ES6 新特性。
· Android：基本不支持 ES6 新特性（5.1 仅支持 25%）
（3）服务器对ES2015的支持情况
· Node.js：6.5 版起便可以支持 97% 的 ES6 新特性。（6.0 支持 92%）
3.2 纵向对比
引用地址
https://caniuse.com/#search=es6
引用地址
https://caniuse.com/#search=es5
结论：现在的Chrome浏览器对ES6的支持已经做的相当棒了，但是有些低版本的浏览器还是不支持ES6的语法，例如IE8及其以下，说的就是你，不用再怀疑。
4、为什么学习ES6？
如果把前端开发比作成伐木头，那么ES3是斧头，ES5是钢锯，而ES6则是电锯，随着前端项目日趋复杂和移动端越来越主流，Vue、React、Angular等技术栈的大行其道，ES6 成为前端开发人员必须掌握的基本技能。掌握了ES6 不仅仅能够更加便捷的开发、大幅度的提高工作效率，更能够为学习Vue、React、Angular等技术栈甚至是NodeJS打下坚实的基础。
说的这么666，那么……
4.1 使用ES6编程，到底好在哪里？
例一：
在ES5中，我们不得不使用以下方法来表示多行字符串：
var str ='<div id="ul1">'+
'<li>青年问禅师：</li>'+
'<li>“大师终日答疑解惑、普渡众生，如何不为俗物所扰，静心修行？”</li>'+
'<li>禅师微微一笑：“我每天晚上睡觉前都关机！”</li>'+
'</div>';然而在ES6中，仅仅用反引号就可以解决了：
var str = `<div id="ul1">
<li>青年问禅师：</li>
<li>“大师终日答疑解惑、普渡众生，如何不为俗物所扰，静心修行？”</li>
<li>禅师微微一笑：“我每天晚上睡觉前都关机！”</li>
</div>`;例二：
在ES5中实现对象拷贝效果：
var createAssigner = function(keysFunc, undefinedOnly) {
return function(obj) {
var length = arguments.length;
if (length < 2 || obj == null) return obj;
for (var index = 1; index < length; index++) {
var source = arguments[index],
keys = keysFunc(source),
l = keys.length;
for (var i = 0; i < l; i++) {
var key = keys[i];
if (!undefinedOnly || obj[key] === void 0) obj[key] = source[key];
}
}
return obj;
};
};var allKeys = function(obj){
var keys = [];
for(var key in obj) keys.push(key);
return keys;
}var extend = createAssigner(allKeys);
extend({a:111},{b:222});在ES6中实现对象拷贝效果：
Object.assign({a:111},{b:222});同样实现一个对象拷贝效果，用ES5写需要20多行代码，但是用ES6写，只需要 1 行代码！！！当然，ES6还有很多强大的新特性等着我们去学习，ES6引入的新特性是ES5无法比拟的！
4.2 ES6的新功能简介
ES6过渡版本，ES4激进被废掉，ES5遗留很多问题，而ES6 兼容性还好，代码简洁，易用。
（1）块级作用域绑定
1 let声明
2 const声明Constant Declarations
3 循环中的块级绑定
4 循环中的函数（2）函数的新增特性
1、带默认参数的函数
2、默认参数对 arguments 对象的影响
3、默认参数表达式 Default Parameter Expressions
4、未命名参数问题
5、函数中的扩展运算符（3）全新的函数箭头函数
1、箭头函数语法
2、使用箭头函数实现函数自执行
3、箭头函数中无this绑定No this Binding
4、无arguments绑定（4）对象功能的扩展
1、对象类别
2、对象字面量的语法扩展
2.1 简写的属性初始化
2.2 简写的方法声明
2.3 在字面量中动态计算属性名
3、新增的方法
3.1 Objectis
3.2 Object assign（5）字符串功能的增强
1、查找子字符串
2、repeat方法
3、字符串模板字面量
3.1 基本语法
3.2 多行字符串
3.3 字符串置换
3.4 模板标签
3.4.1 什么是模板标签
3.4.2 定义模板标签（6）解构
1、解构的实用性
2、对象解构
2.1 对象解构的基本形式
2.2 解构赋值表达式
2.3 对象解构时的默认值
2.4 赋值给不同的变量名
3、数组解构
3.1 数组解构基本语法
3.2 解构表达式（7）新的基本类型Symbol
1、创建Symbol
2、识别Symbol
3、Symbol作为属性名
4、Symbol属性名的遍历
5、Symbolfor字符串和SymbolkeyForsymbol类型的值（8）Set数据结构
1、创建Set和并添加元素
2、Set中不能添加重复元素
3、使用数组初始化Set
4、判断一个值是否在Set中
5、移除Set中的元素
6、遍历Set
7、将Set转换为数组（9）Map数据结构
1、创建Map对象和Map的基本的存取操作
2、Map与Set类似的3个方法
3、初始化Map
4、Map的forEach方法（10）迭代器和forof循环
1、循环问题
2、什么是迭代器
3、生成器函数
4、生成器函数表达式
5、可迭代类型和for-of迭代循环
6、访问可迭代类型的默认迭代器
7、自定义可迭代类型（11）类
1、ES5之前的模拟的类
2、ES6中基本的类声明 2 匿名类表达式
3、具名类表达式
4、作为一等公民的类型
5、动态计算类成员的命名
6、静态成员
7、ES6中的继承
7.1 继承的基本写法
7.2 在子类中屏蔽父类的方法
7.3 静态方法也可以继承使用ES6之后，可以节约很多开发时间，用来。。。
5、 如何使用ES6的新特性，又能保证浏览器的兼容？
针对 ES6 的兼容性问题，很多团队为此开发出了多种语法解析转换工具，把我们写的 ES6 语法转换成 ES5，相当于在 ES6 和浏览器之间做了一个翻译官。比较通用的工具方案有 babel，jsx，traceur，es6-shim 等。下一节，我们将具体讲解该部分的知识。
6、总结
通过本节，我们了解了ECMAScript的发展进化史，以及ES6的一些新特性。
随着JavaScript应用领域越来越广， 以及ES6 优雅的编程风格和模式、强大的功能，越来越多的程序正在使用ES6更好地实现。
腾讯云开发者
