ES6 初识 #1
Description
前言
相信，对于从事Web前端的同学，都不好意思说，自己不会ES6。我最初接触的ES6的时候，大概在2016年中旬，那正是React刚刚在国内开始火，Vue2.0发布不久，AngularJS1.4.x 一步步衰落，而Angular2.0又准备发布的时候。
当时，带我入行前端的一位师兄，我尊称他为：豪哥。他建议我学习React来实现当时一个类似页面设计器的需求，学习途中，认识到了刚刚兴起的ES6，不然我还得借助React.createClass这个API来创建React组件。
直至今天，我还是觉得自己学到的ES6知识还是比较粗糙的，所以决定重拾ES6，并结合自己的一些理解和实践分享出来。在这里，特别感谢阮一峰老师、张鑫旭老师，感觉对于像我这种自学前端的同学来说，大概很难绕开这两位大神。我们要感谢开源社区，感谢各位开源贡献者。
ES6是什么?
ES6，全称ECMAScript6.0，是当时(2015、2016年)JavaScript下一代的标准。如今，我们应该称它为“当代JavaScript标准”。除了ES6，还有其他诸如ES3、ES5、ES7、ES8等版本。下面我归纳了一些知识要点：
- JavaScript诞生在1995年（那年我也诞生了），而ES6在2015年6月份正式发布。
- ES6目标是让JavaScript能编写更复杂的大型应用，成为企业级的开发语言（不雅于Java）。
- ECMAScript是JavaScript的标准，JavaScript是ECMAScript的一种实现。
- JavaScript和Java一点关系都没有，除了大家都是类C语言之外，当时发布这个名字，纯属为了“蹭热点”。
- ES5相对ES3改动比较少，而ES6相对ES5改动比较大，因为ES6从制定到发布，足足用了15年。
- ES4没被纳入标准，大概是因为ES4太激进了，标准委员会（TC39）没予以通过，而且之后还产生许多分歧。
为什么要学ES6?
这个问题提得非常好，用ES5甚至ES3不好吗？兼容性又好，非得怕前端没什么东西好学，搞多一个ES6（后面还有ES7、ES8），还要借助babel等编译器来编译成ES5，还绕了一个圈。什么？听说微软还搞了一个叫TypeScript的东东，号称是JavaScript的超集。不知道有没同学像两年前的我一样困惑：“一入前端深似海，从此妹子为路人！”
正所谓，天生我才必有用，存在必有其意义所在。我认为有以下几个理由：
- 任何一个新的东西，特别是技术，它的迭代更新，必定会带来开发效率、性能、易用性、健壮性等功能的提高，而掌握这些新技术，叫”与时俱进“！
- 人往高处走，水往低处流。而技术栈也应该不断紧跟时代步伐来及时更新。
- 我们既然暂时无法去指定标准，也只能紧跟标准。
- 况且、ES6在前端已经普及化了，而且各大框架开始进一步向TypeScript迁移，千万别让自己落伍！
1. 开发效率的提高
// 需求：声明一个常量为1的变量
// ES5
Object.defineProperty(window, 'order', { writable: false, value: 1 });
// 或者
Object.defineProperty(window, 'order', {
set (x) {
throw new Error('不能为常量order重新赋值');
},
get () {
return 1;
}
});
// ES6
const order = 1;你看，省了多少代码，如果这个例子在实际业务需求中出现较少，那么请看下一个示例：
// 需求: 连接字符和变量
// ES5
var love = '爱';
var str = '对你' + love + love + love + '不完';
console.log(str); // 对你爱爱爱不完
// ES6
let love = '爱'
let str = `对你${love.repeat(3)}不完`
console.log(str); // 对你爱爱爱不完你别看上面例子少不了多少代码，后面哪天业务改了，让你写几百上千的’爱‘字符串拼接，那估计累的够呛，就算换成循环，也不如函数式编程优雅。
2. 性能
这里我不打算上代码示例，我想用将要发布的Vue3.0来说明这一切。Vue2.x的数据双向绑定是通过ES5中的Object.defineProperty这个API实现的, 而Vue3.0将换成ES6中的对象代理Proxy来替代ES5的方案，听说性能会快1/3，具体数值不太记得了，如果有错，请指正。
3. 易用性
上面两个例子也足以证明ES6的易用性，不过，这里我另外再给出几个在日常业务中常用到的示例：
// 需求：类的继承
// ES6
class Demo extends BaseClass { // 不支持多继承
constructor () {
super();
// pass
}
......
}ES5实现类的继承我就不展开了，有兴趣的同学，请戳这里，或者自行查看红宝书，没有的同学，请戳这里。
对象析构在日常业务中，常见得已经不能再常见了。
// 需求：获取对象属性
var fullName = {
firstName: 'Liang',
lastName: 'Checkson'
};
// ES5
var firstName = fullName.firstName,
lastName = fullName.lastName;
// ES6
let { firstName, lastName } = fullName; 箭头函数在项目中快用烂了
// ES5
function Foo () {
this.name = 'Checkson';
this.sayName = function () {
var _this = this;
setTimeout(function () {
console.log(_this.name);
}, 1000)
}
}
var foo = new Foo();
foo.sayName(); // 1秒钟后输出'Checkson'
// ES6
function Foo () {
this.name = 'Checkson';
this.sayName = () => {
setTimeout(() => {
console.log(this.name);
}, 1000)
}
}
let foo = new Foo();
foo.sayName(); // 1秒钟后输出'Checkson'函数的默认参数
// ES5
function bar (name) {
var _name = name || 'Checkson';
console.log(_name);
}
// ES6
function bar (name = 'Checkson') {
console.log(name)
}4. 健壮性
ES6弥补了ES3、ES5中的很多不足，让JavaScript这门语言更加强大，大致如下：
- ES5中只有全局作用域和函数作用域，ES6引入的块级作用域，块级作用域的引入，解决了很多日常业务痛点和降低维护项目的难度，后面章节介绍。
- ES6扩展了之前ES5的5种基本数据类型：
null,undefined,number,string,boolean，加入了一个新的数据类型：Symbol，用来解决对象中只能存在字符串形式的key，且不能相同的痛点。 - ES6均对变量、字符串、正则、数值、函数、数组、对象处理方法进行扩展和优化。
- ES6新增
Set和Map引用类型，来弥补数组Array和对象Object引用类型的不足。 - ES6新增对象代理
Proxy和Reflect来处理作用于对象时的副作用。 - ES6新增
Promise,Generator,Async(ES7)来应对回调函数在实际业务的痛点，让异步编程更简单。 - ES6新增
Class关键字，让类名正言顺地走进JavaScript。 - ES6重新定义了模块系统，引入了
import,export,export default等关键字。
.....
总的来说，ES6是当代的JavaScript标准，学习它是天经地义的，学好它是前端本分的事情，学精它是我们每个Web前端同学都需要努力的。我也希望通过自己的绵薄之力，来为开源社区贡献自己的一份力量。