ES6的前世今生（0）

1次阅读

共计 3321 个字符，预计需要花费 9 分钟才能阅读完成。

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、历史进化过程

感悟：长路漫漫，吾将上下而求索！
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 更好地实现。