文享日志

ES6的一些代码示例(二)

JavaScript

发表于2018年01月09日22:19:44

更新于2018年02月06日09:47:40

0条评论 147次阅读

Generator函数

      形式上,Generator 函数是一个普通函数,但是有两个特征。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式,定义不同的内部状态(yield在英语里的意思就是“产出”)。

      调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象(用关键字yield标识和return语句)。

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}

Generator 函数可以不用yield表达式,这时就变成了一个单纯的暂缓执行函数。

function* f() {
  console.log('执行了!')
}

var generator = f();

setTimeout(function () {
  generator.next()            //两秒后执行
}, 2000);



Yield关键字

      由于 Generator 函数返回的遍历器对象,只有调用next方法才会遍历下一个内部状态,所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志

      yield表达式后面的表达式,只有当调用next方法、内部指针指向该语句时才会执行,因此等于为 JavaScript 提供了手动的“惰性求值”(Lazy Evaluation)的语法功能。

      yield表达式只能用在 Generator 函数里面。


Iterator接口与for...of

      数组(Array)和对象(Object),ES6 又添加了Map和Set。 这样就有了四种数据集合,我们还可以组合使用它们,定义自己的数据结构,比如数组的成员是Map,Map的成员是对象。 这样就需要一种统一的接口机制,来处理所有不同的数据结构。Iterator是一种接口,为各种不同的数据结构提供统一的访问机制。

      Iterator 的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是 ES6 创造了一种新的遍历命令for...of循环,Iterator 接口主要供for...of消费。

      遍历过程:创建一个指针对象,不断调用next方法,直到数据结构的结束位置。

      默认的 Iterator 接口部署在数据结构的Symbol.iterator属性,或者说,一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”(iterable)。 Symbol.iterator属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。执行这个函数,就会返回一个遍历器。至于属性名Symbol.iterator, 它是一个表达式,返回Symbol对象的iterator属性,这是一个预定义好的、类型为 Symbol 的特殊值,所以要放在方括号内。const obj = {

const obj = {
  [Symbol.iterator] : function () {
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};

obj[Symbol.iterator]().next()  //{value: 1, done: true}

let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();

iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

Array、Map、Set、String、TypedArray、函数的 arguments 对象、NodeList 对象原生自带Symbol.iterator.


for...of循环可以自动遍历 Generator 函数时生成的Iterator对象,且此时不再需要调用next方法。   

   

👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广