《ES6-8》基础学习笔记四

呆瓜O_o

于 2020-10-14 20:33:52 发布

阅读量183

点赞数

本文链接：https://blog.csdn.net/weixin_45131334/article/details/109072191

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

学习地址：https://www.bilibili.com/video/BV1v7411G7Ht?p=8

一、async await

1、async await 字面理解

先从字面意思来理解，async 是“异步”的意思，而 await 是等待的意思。所以应该很好理解 async 用于申明一个异步的function（实际上是async function 对象），而 await 用于等待一个异步任务执行完成的的结果。

并且 await 只能出现在 async 函数中。

2、async、await 如何执行

async 告诉程序这是一个异步操作，await 是一个操作符，即 await 后面是一个表达式。

async 的返回值

 // async
async function testAsync() {
  return "hello async";
}
const data = testAsync();
console.log(data);

如图所示：
在这里插入图片描述

当调用一个 async 函数时，会返回一个 Promise 对象。根据mdn的解释

当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值；

当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值。async 函数中可能会有 await 表达式，await表达式会使 async 函数暂停执行，直到表达式中的 Promise 解析完成后继续执行 async中await 后面的代码并返回解决结果。

注意， await 关键字仅仅在 async function中有效

既然返回的是Promise 对象，所以在最外层不能用 await 获取其返回值的情况下，那么肯定可以用原来的方式：then() 链来处理这个 Promise 对象如

 // async
async function testAsync() {
	return "hello async";
}
let data = testAsync().then( (data) => {
	console.log(data) // hello async                                                 
	return data
});
console.log(data);

如果 async 函数没有返回值，又怎么样呢？很容易想到，它会返回 Promise.resolve(undefined)。

联想一下 Promise 的特点无等待，所以在没有 await 的情况下执行 async 函数，它会立即执行，返回一个 Promise 对象，并且，绝不会阻塞后面的语句。

3、await 操作符

MDN 是这样描述 await 的：

await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行async function。若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。另外，如果 await 操作符后的表达式的值不是一个 Promise，则返回该值本身。

async 函数返回一个 Promise 对象，当函数执行的时候，
一旦遇到 await 就会先返回，等到触发的异步操作完成，
再接着执行函数体内后面的语句。

按照mdn解释 await会暂停当前async 函数执行，并且await 后面是一个表达式，即这个await 等待的是一个表达式（这个表达式返回promise 对象或者一个具体的值）：

● 假如这个表达式如果返回的是一个Promise 对象，那么它的返回值，实际上就是 Promise 的回调函数 resolve 的参数，如果这个Promise rejected 了，await 表达式会把 Promise 的异常抛出。
● 假如这个表达式如果返回的是一个常量，那么会把这个常量转为Promise.resolve(xx)，同理如果没有返回值也是Promise.resolve(underfind)

async function testAwait() {
          const data = await "hello await";
         console.log(data)                                          
        return data
 }

输出 “hello await”

返回promose 对象，成功状态

     function say() {
         return new Promise(function(resolve, reject) {
             setTimeout(function() {
                 let age = 26
                 resolve(`hello, joel。今年我 ${age} 岁`);
             }, 1000);
         });
     }
 
     async function demo() {
        const v = await say(); // 输出：hello, joel。今年我 26 岁  等待这个say 的异步，如果成功把回调 resole 函数的参数作为结果
         console.log(v);
    }
     demo();

返回promise 对象，失败状态

  function say() {
          return new Promise(function(resolve, reject) {
             setTimeout(function() {
                  let age = 26
                 reject(`hello, joel，发生了异常。今年我 ${age} 岁`);
             }, 1000);
         });
     }
      async function demo() {
         try {
             const v = await say(); // 输出：hello, joel，发生了异常。今年我 26 岁  等待这个say 的异步，如果成功把回调 resole 函数的参数作为结果
             console.log(v);
         } catch (e) {
             console.log(e)
         }
     }
     demo();

async/await 相比原来的Promise的优势在于处理 then 链，不必把回调嵌套在then中，只要await 即可，如

  function sing() {
      return new Promise(function(resolve, reject) {
          setTimeout(function() {
              resolve(`来一首好听的歌吧~~~`);
          }, 1000);
      });
  }
  async function demo() {
      try {
         const v = await say(); 
         const s = await sing(); 
         console.log(v); // 输出：hello, joel。今年我 26 岁
         console.log(s) // 来一首好听的歌吧~~~
     } catch (e) {
         console.log(e)
     }
 }
 demo();

如果使用原来的Promise 就是把回调放在then()中。

总结
1、async 告诉程序这是一个异步，awiat 会暂停执行async中的代码，等待await 表达式后面的结果，跳过async 函数，继续执行后面代码

2、async 函数会返回一个Promise 对象，那么当 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值

3、await 操作符用于等待一个Promise 对象，并且返回 Promise 对象的处理结果（成功把resolve 函数参数作为await 表达式的值），如果等待的不是 Promise 对象，则用 Promise.resolve(xx) 转化

二、迭代器（Iterator）

1、ES5实现迭代器

迭代器是一种特殊对象，每一个迭代器对象都有一个next()，该方法返回一个对象，包括value和done属性。

ES5实现迭代器的代码如下：

//实现一个返回迭代器对象的函数，注意该函数不是迭代器，返回结果才叫做迭代器。
function createIterator(items) {
  var i = 0;
  return {
    next() {
      var done = (i >= items.length); // 判断i是否小于遍历的对象长度。
      var value = !done ? items[i++] : undefined; //如果done为false，设置value为当前遍历的值。
      return {
        done,
        value
      }
    }
  }
}
const a = createIterator([1, 2, 3]);

//该方法返回的最终是一个对象，包含value、done属性。
console.log(a.next()); //{value: 1, done: false}
console.log(a.next()); //{value: 2, done: false}
console.log(a.next()); //{value: 3, done: false}
console.log(a.next()); //{value: undefined, done: true}

2、生成器（Generator）

1、生成器是函数：用来返回迭代器。

这个概念有2个关键点，一个是函数、一个是返回迭代器。这个函数不是上面ES5中创建迭代器的函数，而是ES6中特有的，一个带有*（星号）的函数，同时你也需要使用到yield。

//生成器函数，ES6内部实现了迭代器功能，你要做的只是使用yield来迭代输出。
function *createIterator() {
  yield 1;
  yield 2;
  yield 3;
}
const a = createIterator();
console.log(a.next()); //{value: 1, done: false}
console.log(a.next()); //{value: 2, done: false}
console.log(a.next()); //{value: 3, done: false}
console.log(a.next()); //{value: undefined, done: true}

生成器的yield关键字有个神奇的功能，就是当你执行一次next()，那么只会执行一个yield后面的内容，然后语句终止运行。

2、在for循环中使用迭代器

即使你是在for循环中使用yield关键字，也会暂停循环。

   function *createIterator(items) {
      for(let i = 0; i < items.length;  i++) {
        yield items[i]
      }
    }
    const a = createIterator([1, 2, 3]);
    console.log(a.next()); //{value: 1, done: false}

3、yield使用限制

yield只可以在生成器函数内部使用，如果在非生成器函数内部使用，则会报错。

function *createIterator(items) {
    //你应该在这里使用yield
  items.map((value, key) => {
    yield value //语法错误，在map的回调函数里面使用了yield
  })
}
const a = createIterator([1, 2, 3]);
console.log(a.next()); //无输出

4、生成器函数表达式

函数表达式很简单，就是下面这种写法，也叫匿名函数，不用纠结。

const createIterator = function *() {
    yield 1;
    yield 2;
}
const a = createIterator();
console.log(a.next());

5、在对象中添加生成器函数

一个对象长这样：

const obj = {}

我们可以在obj中添加一个生成器，也就是添加一个带星号的方法：

const obj = {
  a: 1,
  *createIterator() {
    yield this.a
  }
}
const a = obj.createIterator();
console.log(a.next());  //{value: 1, done: false}

6、可迭代对象和for of循环

再次默读一遍，迭代器是对象，生成器是返回迭代器的函数。

凡是通过生成器生成的迭代器，都是可以迭代的对象(可迭代对象具有Symbol.iterator属性)，也就是可以通过for of将value遍历出来。

function *createIterator() {
  yield 1;
  yield 2;
  yield 3;
}
const a = createIterator();
for(let value of a) {
  console.log(value)
}
// 1 2 3

上面的例子告诉我们生成器函数返回的迭代器是一个可以迭代的对象。其实我们这里要研究的是Symbol.iterator的用法。

function *createIterator() {
  yield 1;
  yield 2;
  yield 3;
}
const a = createIterator(); //a是一个迭代器
const s = a[Symbol.iterator]();//使用Symbol.iterator访问迭代器
console.log(s.next()) //{value: 1, done: false}

Symbol.iterator还可以用来检测一个对象是否可迭代：

typeof obj[Symbol.iterator] === "function"

3、创建可迭代对象

在ES6中，数组、Set、Map、字符串都是可迭代对象。

默认情况下定义的对象（object）是不可迭代的，但是可以通过Symbol.iterator创建迭代器。

const obj = {
  items: []
}
obj.items.push(1);//这样子虽然向数组添加了新元素，但是obj不可迭代
for (let x of obj) {
  console.log(x) // _iterator[Symbol.iterator] is not a function
}

    //接下来给obj添加一个生成器，使obj成为一个可以迭代的对象。
    const obj = {
      items: [],
      *[Symbol.iterator]() {
        for (let item of this.items) {
          yield item;
        }
      }
    }
    obj.items.push(1)
    //现在可以通过for of迭代obj了。
    for (let x of obj) {
      console.log(x)
    }

1、内建迭代器

上面提到了，数组、Set、Map都是可迭代对象，即它们内部实现了迭代器，并且提供了3种迭代器函数调用。

1、entries() 返回迭代器：返回键值对

    //数组
    const arr = ['a', 'b', 'c'];
    for(let v of arr.entries()) {
      console.log(v)
    }
    // [0, 'a'] [1, 'b'] [2, 'c']
    
    //Set
    const arr = new Set(['a', 'b', 'c']);
    for(let v of arr.entries()) {
      console.log(v)
    }
    // ['a', 'a'] ['b', 'b'] ['c', 'c']

    //Map
    const arr = new Map();
    arr.set('a', 'a');
    arr.set('b', 'b');
    for(let v of arr.entries()) {
      console.log(v)
    }
    // ['a', 'a'] ['b', 'b']

2、values() 返回迭代器：返回键值对的value

    //数组
    const arr = ['a', 'b', 'c'];
    for(let v of arr.values()) {
      console.log(v)
    }
    //'a' 'b' 'c'

    //Set
    const arr = new Set(['a', 'b', 'c']);
    for(let v of arr.values()) {
      console.log(v)
    }
    // 'a' 'b' 'c'

    //Map
    const arr = new Map();
    arr.set('a', 'a');
    arr.set('b', 'b');
    for(let v of arr.values()) {
      console.log(v)
    }
    // 'a' 'b'

3、keys() 返回迭代器：返回键值对的key

   //数组
    const arr = ['a', 'b', 'c'];
    for(let v of arr.keys()) {
      console.log(v)
    }
    // 0 1 2
    
    //Set
    const arr = new Set(['a', 'b', 'c']);
    for(let v of arr.keys()) {
      console.log(v)
    }
    // 'a' 'b' 'c'

    //Map
    const arr = new Map();
    arr.set('a', 'a');
    arr.set('b', 'b');
    for(let v of arr.keys()) {
      console.log(v)
    }
    // 'a' 'b'

虽然上面列举了3种内建的迭代器方法，但是不同集合的类型还有自己默认的迭代器，在for of中，数组和Set的默认迭代器是values()，Map的默认迭代器是entries()。

2、for of循环解构

对象本身不支持迭代，但是我们可以自己添加一个生成器，返回一个key，value的迭代器，然后使用for of循环解构key和value。

const obj = {
  a: 1,
  b: 2,
  *[Symbol.iterator]() {
    for(let i in obj) {
      yield [i, obj[i]]
    }
  }
}
for(let [key, value] of obj) {
  console.log(key, value)
}
// 'a' 1, 'b' 2

3、字符串迭代器

  const str = 'abc';
    for(let v of str) {
      console.log(v)
    }
    // 'a' 'b' 'c'

4、NodeList迭代器

迭代器真是无处不在啊，dom节点的迭代器你应该已经用过了。

const divs = document.getElementByTagName('div');
for(let d of divs) {
  console.log(d)
}

5、展开运算符和迭代器

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [...a, ...b]
console.log(c) // [1, 2, 3, 4, 5, 6]

6、高级迭代器功能

高级功能不复杂，就是传参、抛出异常、生成器返回语句、委托生成器。

1、传参

生成器里面有2个yield，当执行第一个next()的时候，返回value为1，然后给第二个next()传入参数10，传递的参数会替代掉上一个next()的yield返回值。在下面的例子中就是first。

function *createIterator() {
  let first = yield 1;
  yield first + 2;
}
let i = createIterator();
console.log(i.next()); // {value: 1, done: false}
console.log(i.next(10)); // {value: 12, done: false}

2、在迭代器中抛出错误

function *createIterator() {
  let first = yield 1;
  yield first + 2;
}
let i = createIterator();
console.log(i.next()); // {value: 1, done: false}
console.log(i.throw(new Error('error'))); // error
console.log(i.next()); //不再执行

3、生成器返回语句

生成器中添加return表示退出操作。

function *createIterator() {
  let first = yield 1;
  return;
  yield first + 2;
}
let i = createIterator();
console.log(i.next()); // {value: 1, done: false}
console.log(i.next()); // {value: undefined, done: true}

4、委托生成器

生成器嵌套生成器

function *aIterator() {
  yield 1;
}
function *bIterator() {
  yield 2;
}
function *cIterator() {
  yield *aIterator()
  yield *bIterator()
}

let i = cIterator();
console.log(i.next()); // {value: 1, done: false}
console.log(i.next()); // {value: 2, done: false}

4、异步任务执行器

ES6之前，我们使用异步的操作方式是调用函数并执行回调函数。

书上举的例子挺好的，在nodejs中，有一个读取文件的操作，使用的就是回调函数的方式。

var fs = require("fs");
fs.readFile("xx.json", function(err, contents) {
  //在回调函数中做一些事情
})

任务执行器是一个函数，用来循环执行生成器，因为我们知道生成器需要执行N次next()方法，才能运行完，所以我们需要一个自动任务执行器帮我们做这些事情，这就是任务执行器的作用。

下面我们编写一个异步任务执行器。

//taskDef是一个生成器函数，run是异步任务执行器
function run(taskDef) {
  let task = taskDef(); //调用生成器
  let result = task.next(); //执行生成器的第一个next()，返回result
  function step() {
    if(!result.done) {
    //如果done为false，则继续执行next()，并且循环step，直到done为true退出。
      result = task.next(result.value);
      step();
    }
  }
  step(); //开始执行step()
}

测试一下我们编写的run方法，我们不再需要console.log N个next了，因为run执行器已经帮我们做了循环执行操作：

run(function *() {
  let value = yield 1;
  value = yield value + 20;
  console.log(value) // 21
})

呆瓜O_o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
《ES6-8》基础学习笔记四

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、async await1、async await 字面理解2、async、await 如何执行3、await 操作符二、迭代器（Iterator）1、ES5实现迭代器2、生成器（Generator）1、生成器是函数：用来返回迭代器。2、在for循环中使用迭代器3、yield使用限制4、生成器函数表达式5、在对象中添加生成器函数6、可迭代对象和for of循环3、创建可迭代对象1、内建迭代器2、for of循环解构3、字符串迭
复制链接

扫一扫