ES6,划时代的JavaScript版本 续 | 青训营笔记

46 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天

前言

上次学习中,我们介绍了一些es6中新增加的特性,但是短短一篇文章难以将es6中优秀的特性统统介绍,接下来,让我们继续了解es6给我们带来的便利。

模板字符串

在变量与字符串进行拼接操作时,我们经常会因为难以区分变量与字符串而忽略之间的加号,过多的加号页导致代码非常杂乱,这是模板字符串的出现巧妙地解决了这个问题。

const a = 'there'
const b = 'good'

const s1 = a + ' is a '+ b + 'feature' //es5
const s2 = `${a} is a ${b} feature` //es6

可以看到es6模板字符串来拼接字符串时变量可以更加自然的穿插在其中,让字符串看起来更加直观。

class关键字

es6之前JavaScript在对象的继承这一点上可以说是灾难性的,因为es5中通过原型链对JavaScript进行继承的实现方式过多,没有一个统一的标准,实现继承的代码也相当长。class关键字的出现解决了JavaScript实现继承的烦恼,使其与Java相似可以定义构造函数并实现继承。

class A {
    a,
    b
}

class B extends A {
    c
}

const obj = new B()

除了继承,我们可以定义constructor构造函数来为成员提供初始值

Promise对象

es6版本对异步编程的改进是极大的,Promise的出现使得JavaScript的编码达到了一个巧妙而优雅的程度。 promise对象可以通过new关键字定义,定义时接收一个回调函数,回调函数中含有两个函数参数,用于对得出Promise的结果,具体实例如下。

const promise = new Promise((resolve, reject) => {
    console.log('promise!')
    setTimeout(() => resolve('hello world!'), 1000)
})

在es5中我们想得到的hello world这个值用作它处会非常困难,因为异步代码不知何时得出结果,可能得出结果后我们需要用到hello world值得代码早已运行完毕。而在es6中则大不相同了,当同步代码运行至此时,它会先得到一个pending状态的promise对象,我们可以在这个promise对象状态变为fullfilled或rejected时就可以通过链式调用的方式得出结果。

promise.then(res => {
    console.log(res)
).catch(err => {
    console.log(err)
})

这样,我们就轻松的通过then方法或者catch方法得到了其成功或是失败的值。

总结

es6带来的精彩远不止这些,更多精彩,还需要我们在日后的学习中积极探索。