首页手记前端工程师是时候学习ES6了

前端工程师是时候学习ES6了

标签：

JavaScript 前端工具

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

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

从上图看主流高级浏览器都支持的很好了，这里只是截图了一部分，有兴趣的同学可以参考：网站；对于不支持的浏览器可以借助babel编译，所以同学们可以大胆的使用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而做不到的，比如代理：

ES6

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了，很多大厂的同学都在用了，正所谓入乡即随俗，再偷懒就说不过去喽

目前ES6语法是可以使用在Node环境中，Vue、React都支持了对ES6语法的编译。

光说不练假把式，让我们一睹为快ES6带给我们前端工程师的福利吧……

默认参数

ES6

function f (x, y = 7, z = 42) {
    return x + y + z
}
f(1) === 50

ES5

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

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

rest参数

ES6

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

ES5

function 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 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。在开发中确实很方便，有没有？

箭头函数

ES6

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

ES5

odds  = 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对象，需要通过借助不定参数和默认参数值等新特性来处理。

对象扩展-增强的对象属性

ES6

obj = { x, y }

ES5

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

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

类与继承

ES6

class 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
    }
}

ES5

var 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开发生产力更上一层楼。

遍历器

ES6

let 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)
}

ES5

var 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的遍历器让其变的可行而且简单。有兴趣的同学自行尝试哈……

字符串模板

ES6

var 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?`

ES5

var 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

ES6

let s = new Set()
s.add("hello").add("goodbye").add("hello")
s.size === 2
s.has("hello") === true
for (let key of s.values()) // insertion order
    console.log(key)

ES5

var 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中模拟的代码，哪个更胜一筹一目了然。