前端工程师是时候学习ES6了全面讲解ES6

ES6是JavaScript最新标准

一个完整的JavaScript实现是由以下3个不同部分组成的：核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)。

现今ES6 (ECMAScript 2015的简称 )，是JavaScript的最新规范。上一次标准的制订还是2009年出台的ES5。

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

我们来翻译下上面的官话：ES6是当前JavaScript语言的标准，也就是说使用JS的小伙伴们需要了解、学习这些标准并遵循这些规范。截至当前该标准已经发布将近2年的时间了，也就是说很多浏览器厂商都支持的差不多了啦，再不学习就要out了。我们来看下浏览器对ES6的支持情况：

从上图看主流高级浏览器都支持的很好了，这里只是截图了一部分，有兴趣的同学可以参考：网站；对于不支持的浏览器可以借助babel编译，所以同学们可以大胆的使用ES6了。

为什么要学ES6

至于有同学疑惑说：我为啥要学ES6呢？

第一：很多流行的JavaScript开源框架都使用ES6编写，如Vue.js、video.js、d3.js等等，不学习ES6估计是看不懂的哟，另外，学习开源框架源码可是提升技术的好途径。有图有真相：

Vue.js源码

video.js源码

d3.js源码

第二：ES6可以大大提高开发效率，同时让语法更加规范化，一定程度上增强了代码安全。不妨看如下代码：

ES6

const PI = 3.141593

ES5

Object.defineProperty(typeof global === "object" ? global : window, "PI", { value: 3.141593, enumerable: true, writable: false, configurable: false })

ES6让声明常量更简单，类似于这样的特性ES6增加了不少；此外，ES6还推出了很多强大的特性但ES5而做不到的，比如代理：

let target = { foo: "Welcome, foo" } let proxy = new Proxy(target, { get (receiver, name) { return name in receiver ? receiver[name] : `Hello, ${name}` } }) proxy.foo === "Welcome, foo" proxy.world === "Hello, world"

这段代码将target对象保护起来，对外暴露proxy变量，这样对target对象的操作都要经过代理层proxy，在代理层可以设置各种规则进而完成对target的保护。这个看上去没什么用，其实不然，设想一下一些核心的数据可以封装在target对象，数据校验放在proxy来做，这样用户是不能直接操作核心数据的进而保证了代码安全。当然，proxy的作用不只如此，大家自由发挥哈……

目前ES6语法是可以使用在Node环境中，Vue、React都支持了对ES6语法的编译。光说不练假把式，让我们一睹为快ES6带给我们前端工程师的福利吧……

默认参数ES6function f (x, y = 7, z = 42) { return x + y + z}f(1) === 50

ES5function f (x, y, z) { if (y === undefined) y = 7; if (z === undefined) z = 42; return x + y + z;};f(1) === 50;

ES6的默认参数确实让人很喜欢，干净、简练，相对ES5那样冗余的处理方式更胜一筹，大家有没有同感呢？

rest参数ES6function f (x, y, ...a) {

return (x + y) * a.length}f(1, 2, "hello", true, 7) === 9

ES5function f (x, y) {

var a = Array.prototype.slice.call(arguments, 2);

return (x + y) * a.length;};

f(1, 2, "hello", true, 7) === 9;

rest获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。在开发中确实很方便，有没有？

箭头函数ES6odds = evens.map(v => v + 1)

pairs = evens.map(v => ({ even: v, odd: v + 1 }))

nums = evens.map((v, i) => v + i)

ES5odds = evens.map(function (v) { return v + 1; });

pairs = evens.map(function (v) { return { even: v, odd: v + 1 }; });

nums = evens.map(function (v, i) { return v + i; });

箭头函数在写法上更加简洁，不过值得注意的是也不会获取它们自己的arguments对象，需要通过借助不定参数和默认参数值等新特性来处理。

对象扩展-增强的对象属性ES6obj = { x, y }

ES5obj = { x: x, y: y };

在ES6中对象的属性可以简写，也可以使用变量，大大扩展了对象的使用场景。

类与继承

ES6class Shape { constructor (id, x, y) {

this.id = id

this.move(x, y) } move (x, y) {

this.x = x

this.y = y }}

class Rectangle extends Shape { constructor (id, x, y, width, height) {

super(id, x, y)

this.width = width

this.height = height }}

class Circle extends Shape { constructor (id, x, y, radius) {

super(id, x, y)

this.radius = radius }}

ES5var Shape = function (id, x, y) {

this.id = id;

this.move(x, y);};

Shape.prototype.move = function (x, y) {

this.x = x; this.y = y;};

var Rectangle = function (id, x, y, width, height) { Shape.call(this, id, x, y);

this.width = width;

this.height = height;};

Rectangle.prototype = Object.create(Shape.prototype);

Rectangle.prototype.constructor = Rectangle;

var Circle = function (id, x, y, radius) { Shape.call(this, id, x, y);

this.radius = radius;};

Circle.prototype = Object.create(Shape.prototype);

Circle.prototype.constructor = Circle;

上下两段代码ES6完胜ES5，类的声明更简洁也更专业，有点Java的味道。另外，extends命令，super方法让继承变的简单。这对于习惯于面向对象开发的同学而言简直就是福音啊。个人觉得面向对象是JavaScript开发很重要的一部分，虽然强调组件化，但是组件的开发依然无法离开面向对象存在。再加上ES6的静态方法，模块化让JS开发生产力更上一层楼。

遍历器

ES6let fibonacci = { [Symbol.iterator]() {

let pre = 0, cur = 1 return { next () { [ pre, cur ] = [ cur, pre + cur ]

return { done: false, value: cur } } } }}for (let n of fibonacci) {

if (n > 1000)

break console.log(n)}

ES5var fibonacci = { next: (function () {

var pre = 0, cur = 1;

return function () { tmp = pre; pre = cur; cur += tmp;

return cur; }; })()

};

var n;

for (;;) { n = fibonacci.next();

if (n > 1000)

break;

console.log(n);}

在JS开发过程中，对数据的遍历是家常便饭，然而我们不得不借助与数组，Object对象等内置的数据结构，如果我们自行定义较复杂的数据结构，让该数据结构具备遍历接口岂不是快哉？ES6的遍历器让其变的可行而且简单。

字符串模板

ES6var customer = { name: "Foo" }

var card = {

amount: 7,

product: "Bar",

unitprice: 42 }

var message = `Hello ${customer.name},want to buy ${card.amount} ${card.product} for

a total of ${card.amount * card.unitprice} bucks?`

ES5var customer = { name: "Foo" };

var card = { amount: 7,

product: "Bar",

unitprice: 42 };

var message = "Hello " + customer.name + ",\n" +

"want to buy " + card.amount + " " + card.product + " for\n" +

"a total of " + (card.amount * card.unitprice) + " bucks?";

对JS处理字符串模板大家应该不会陌生，还记得我们在ES5中拼接的字符串吗？还记得我们借助第三方模板引擎处理数据吗？在ES6中可以轻轻松松的完成数据对字符串模板的渲染过程，有没有小惊喜？看看上述两段代码就理解了……

数据结构Set和Map

ES6let s = new Set()

s.add("hello").add("goodbye").add("hello")

s.size === 2s.has("hello") === truefor (

let key of s.values()) // insertion order console.log(key)

ES5var s = {};s["hello"] = true;

s["goodbye"] = true;

s["hello"] = true;

Object.keys(s).length === 2;

s["hello"] === true;for (var key in s) // arbitrary order

if (s.hasOwnProperty(key)) console.log(s[key]);

数据结构是老生常谈的话题，也是开发必不可少的一部分，相对于ES5中我们通常使用数组，对象类型，ES6提供了强大的Set、Map，上述代码列举了Set类型的简单操作，也给出了ES5中模拟的代码，哪个更胜一筹一目了然。

此篇文章仅仅是抛砖引玉，ES6还有很多有趣、强大的特性，希望爱好前端技能的小伙伴学习、讨论，此文如有错误，欢迎指正~

作者介绍

本文作者多年从事前端技术研发工作，先后在360、去哪儿任资深前端工程师，在慕课网有推出自己的实战课程《ES6零基础教学解析彩票项目》。

点击下图，查看ES6实战教程

你对ES6有什么其他看法

欢迎在留言区说一说

长按二维码

即可关注我们

慕课网

程序员的梦工厂

更多技术干货

等你来解锁

戳阅读原文，你该好好学习ES6了！