书籍参考:《ECMAScript 6入门》 作者:阮一峰

文档参考:MDN

概念

ES6提供了Class语句用于更的理解语义以及更接近传统的编程语言的写法。Class可以当作ES5构造函数的一个语法糖。

传统的构造函数以及继承方法如下面这样来写的:

function Getname() {
    this.name = 'wyz';
    this.age = '29';
}

// 如果我们需要定义一个给所有基于Getname构造函数使用的方法
// 那么我们必须通过prototype对象上定义

Getname.prototype.getName = function(){
    return (`Name: ${this.name}, Age: ${this.age}`);
}

let gname = new Getname();

gname.getName(); //"Name: wyz, Age: 29"

继续阅读

参考文档:MDN

概念

ES7提供了一个异步解决方案async函数容易,它的作用非常简单,几个异步操作并且这几个是有依赖的,如果按照我们往常的使用方法有几种,下面是一个读取文件的例子,需要读取文件1-3.txt,首先看看callback的写法:

readFile('1.txt', (err, data) => {

    if(err) {return err}

    let data1 = data;

    readFile('2.txt', (err, data) => {

        if(err) {return err }

        let data2 = data;

        readFile('3.txt', (err, data) => {

            if(err) {return err}

            let data3 = data;

            return dataAll = data1.toString() + data2.toString() + data3.toString();

        });

    });
});

继续阅读

书籍参考:《ECMAScript 6入门》 作者:阮一峰

文档参考:MDN

概念

Promise最初在社区提出的一个异步解决的方案,最后ES6将它加入了正式的标准,并规定了统一的写法。

在使用Promise之前,你需要注意下面几个点:

1.Promise有三个状态:Pending(进行中)Resolved(已完成)Rejected(已失败),这三个状态我们无法去改变,并且在一个Promise中只有两个可能,一种是从PendingResolved,另一种是PendingRejected。当结果发生后,这个状态就凝固了,也就是说我们无法去改变Promise对象的任何状态,如果再次调用这个Promise对象,返回的将是凝固状态的结果。

2.Promise在执行的过程中无法取消,并且我们也无法知道它执行到哪一步,我们只能知道返回的是已完成还是已失败。

3.Promise实例创建后会立即执行

下面的代码部署了一个Promise对象异步加载图片的例子,可以看到用Promise对象来编写异步代码是非常的清晰。
继续阅读

书籍参考:《ECMAScript 6入门》 作者:阮一峰

文档参考:MDN

概念

ES6提供了一种Generator函数,用来解决异步编程的方案,可以通过yield命令来控制函数内部执行与暂停,它与传统的函数声明非常相似,但是有一点是,是函数声明关键字后面跟了一个星号*,而且在函数内部通过yield命令来控制函数的行为,在外面使用next方法来执行函数内部的代码,直至下一个yield命令。

先看看普通函数是怎么声明

function g(){
    let value = '这是普通函数';
    console.log(value);
}

g();    // '这是普通函数'

下面是一个Generator函数的声明使用

function* g(){
    yield '这是Generator函数';
}

let gen = g();

gen.next(); // {value: "这是Generator函数", done: false}

gen.next(); //{value: undefined, done: true}

继续阅读

书籍参考:《ECMAScript 6入门》 作者:阮一峰

Iterator概念

ES6发布后Javascript的数据集合对象有ArrayObjectMapSet四种,我们同时知道在Array中,我们可以放对象,Object中我们一样可以放Array,四种数据集合对象都可以相互交叉使用。

那么问题来了,如果在一个数据集合对象中含有多个不同数据集合对象的类型,那么这时候就需要一种接口的机制,来处理不同的数据集合了。

Iterator有三个作用:

  1. 为各种数据接口提供一个统一的访问接口
  2. 使数据接口的成员能够按照某种次序排序
  3. ES6新遍历名利 for…of循环

按照《ECMAScript 6入门》这本书中的4个步骤就能很好的解释Iterator遍历过程

  1. 创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。
  2. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。

  3. 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。

  4. 不断调用指针对象的next方法,直到它指向数据结构的结束位置。

用一个代码段来实现上面的4个点,也就是来实现一个Iterator遍历器
继续阅读