继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

快乐动起来呀
关注TA
已关注
手记 12
粉丝 1.4万
获赞 2772

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

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

不说了,去学习啦!!!!!!

打开App,阅读手记
92人推荐
发表评论
随时随地看视频慕课网APP

热门评论

老师关于 “”“

Vue全家桶+SSR+Koa2全栈开发美团网

”这个实战教程还可以买到吗?

老师,您的信息那么少啊???感觉您讲的很好啊,果断变成了粉丝,真希望您多出些。

学了慕课网的HML5与CSS3进阶与常用框架这个路径,还用学ES6吗,他们有没有什么关联

查看全部评论