es6标准入门教程学习（六）

Cuprumfifth

已于 2022-02-28 21:33:27 修改

阅读量337

点赞数

文章标签： javascript 学习开发语言

于 2022-02-28 00:10:51 首次发布

本文链接：https://blog.csdn.net/Cu50moon/article/details/123142977

版权

16.Iterator for of

1概念：任何数据结构只要不输iterator接口就可以完成遍历操作

2iterator接口供for...of消费

.3.

let generator = function* () {
  yield 1;
  yield* [2,3,4];
  yield 5;
};
var iterator = generator();
iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: 5, done: false }
iterator.next() // { value: undefined, done: true }

4.任何接受数组作为参数的场合，都调用了遍历器接口

for...of Array.from() Map(), Set(), WeakMap(), WeakSet() Promise.all() Promise.race()

5.字符串的iterator接口

var someString = "hi";
typeof someString[Symbol.iterator]
// "function"
var iterator = someString[Symbol.iterator]();
iterator.next()  // { value: "h", done: false }
iterator.next()  // { value: "i", done: false }
iterator.next()  // { value: undefined, done: true }

6.iterator and generator 函数

let myIterable = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
}
[...myIterable] // [1, 2, 3]
// 或者采用下面的简洁写法
let obj = {
  * [Symbol.iterator]() {
    yield 'hello';
    yield 'world';
  }
};
for (let x of obj) {
  console.log(x);
}
// "hello"
// "world"

7. return，throw可选 next必须部署

8.for....of Set遍历之后返回的是值 Map返回的是数组键值对

9.keys entries values 使用方法

let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
  console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

10.类数组对象

// 字符串
let str = "hello";
for (let s of str) {
  console.log(s); // h e l l o
}
// DOM NodeList对象
let paras = document.querySelectorAll("p");
for (let p of paras) {
  p.classList.add("test");
}
// arguments对象
function printArgs() {
  for (let x of arguments) {
    console.log(x);
  }
}
printArgs('a', 'b');
// 'a'
// 'b'

11.forEach无法中途跳出，for.in是键，for....of是键数字排列

for (var n of fibonacci) {
  if (n > 1000)
    break;
  console.log(n);
}

17.Generator

1.执行Generator函数会返回一个遍历器对象，返回的遍历器对象，可以依次遍历Generator的每一个状态（yield） 1.* 2.yield

2.调用函数，函数不执行，而是返回一个指针，指向内部状态

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}
var hw = helloWorldGenerator();

hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }

3.yield是暂停执行 next恢复执行

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};
[...myIterable] // [1, 2, 3]

function* gen(){
  // some code
}
var g = gen();
g[Symbol.iterator]() === g
// true

5.Generator 在运行时，他执行所产生的上下文在yield命令就会暂时推出堆栈，并不消失，只是暂时冻结状态，等到对他执行next，将剩下问环境加入调用栈，冻结的变量和对象恢复秩执行

yield表达式本身是没有值的

for....of 循环会依次执行yield命令的特性

6.应用：1.处理异步操作，改写回调函数：因为yield就可以暂停行为，next继续

2.控制流管理：

3.部署遍历器接口

4.作为数据结构

7.next（参数）将上一次yeild表达式值==参数

function* foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}
var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}
var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }

想要第一次调用next时就可以输入值，需要wapper包一层

8.for...of ... Array.from() 方法内部调用都是Iterator接口

function* objectEntries(obj) {
  let propKeys = Reflect.ownKeys(obj);
  for (let propKey of propKeys) {
    yield [propKey, obj[propKey]];
  }
}
let jane = { first: 'Jane', last: 'Doe' };
for (let [key, value] of objectEntries(jane)) {
  console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe

Genertor.prototype.throw

1.会被函数内部trycatch捕获，其余被外部catch捕获，外部没有trycatch，就会Uncaught

2.new throw不会被内部捕获

3.throw方法被捕获之后，会顺带执行下一条yinext）

Genertor.prototype.return

1.终结遍历函数

2.返回值就是return（）参数 done=true

3.如果内部有try...finally，直接执行finally

10.yield* 表达式

如果在Generator函数内部调用另一个Generator函数，需要在前者函数体内部自己手动完成遍历（for of 。。。Array.form... ...）用yield*来作为解决办法，在要遍历的函数前＋field*

有return，直接向代理他的Generator函数返回数据

function* foo() {
  yield 2;
  yield 3;
  return "foo";
}
function* bar() {
  yield 1;
  var v = yield* foo();
  console.log("v: " + v);
  yield 4;
}
var it = bar();
it.next()
// {value: 1, done: false}
it.next()
// {value: 2, done: false}
it.next()
// {value: 3, done: false}
it.next();
// "v: foo"
// {value: 4, done: false}
it.next()
// {value: undefined, done: true}

能请以取出嵌套数组中的所有成员（for...of .... Aray.from）

function* iterTree(tree) {
  if (Array.isArray(tree)) {
    for(let i=0; i < tree.length; i++) {
      yield* iterTree(tree[i]);
    }
  } else {
    yield tree;
  }
}
const tree = [ 'a', ['b', 'c'], ['d', 'e'] ];
for(let x of iterTree(tree)) {
  console.log(x);
}
// a
// b
// c
// d
// e

11.Generator函数的this

function* F() {
  this.a = 1;
  yield this.b = 2;
  yield this.c = 3;
}
var obj = {};
var f = F.call(obj);
f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}
obj.a // 1
obj.b // 2
obj.c // 3

function* F() {
  this.a = 1;
  yield this.b = 2;
  yield this.c = 3;
}
var f = F.call(F.prototype);
f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}
f.a // 1
f.b // 2
f.c // 3


function* gen() {
  this.a = 1;
  yield this.b = 2;
  yield this.c = 3;
}
function F() {
  return gen.call(gen.prototype);
}
var f = new F();
f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}
f.a // 1
f.b // 2
f.c // 3

18.Generator函数的异步应用

1.传统异步编程方法：1.回调函数 2.事件监听 3.发布、订阅 4.Promise对象

2.基本概念：

3.Trunk函数传名调用（xxx）

// 正常版本的readFile（多参数版本）
fs.readFile(fileName, callback);
// Thunk版本的readFile（单参数版本）
var Thunk = function (fileName) {
  return function (callback) {
    return fs.readFile(fileName, callback);
  };
};
var readFileThunk = Thunk(fileName);
readFileThunk(callback);

4.co(xxx）