美文网首页
ES6 迭代器 & 生成器

ES6 迭代器 & 生成器

作者: _ClariS_ | 来源:发表于2019-11-19 20:24 被阅读0次

    一、字面量增强

    如何理解Javascript中的字面量(literal)?
    javascript字面量

    • 更安全的二进制字面量(0b1111101)
    • 更安全的八进制字面量(0o767)
    • 字符串支持 Unicode

    二、迭代器(Iterator)

    所谓迭代器,其实就是一个具有next方法的对象,每次调用next都会返回一个结果对象,该结果对象有两个属性,value表示当前的值,done表示遍历是否结束。

    每一次调用next方法,都会返回数据结构的当前成员的信息。具体来说,就是返回一个包含valuedone两个属性的对象。其中,value属性是当前成员的值,done属性是一个布尔值,表示遍历是否结束。

    下面是用ES5实现的一个简单迭代器的例子。

    function makeIterator() {
      var _value = 0
      var max = 5
      return {
        next: function() {
          _value += 1
          if (_value > max) { throw new Error('已经超过 5 了!') }
          if (_value === max) {
            return { value: _value, done: true }
          } else {
            return { value: _value, done: false }
          }
        }
      }
    }
    
    var it = makeIterator()
    
    打印结果

    三、生成器(Generator)

    生成器其实就是生成迭代器的语法糖。形式上,Generator 函数是一个普通函数,但是有两个特征。

    • function关键字与函数名之间有一个星号;
    • 函数体内部使用yield表达式,定义不同的内部状态(yield在英语里的意思就是“产出”)。
    function* helloWorldGenerator() {
      yield 'hello';
      yield 'world';
      return 'ending';
    }
    
    var hw = helloWorldGenerator();
    

    上面代码定义了一个Generator函数helloWorldGenerator,它内部有两个yield表达式(helloworld),即该函数有三个状态:helloworldreturn语句(结束执行)。

    Generator函数是分段执行的,yield表达式是暂停执行的标记,而next方法可以恢复执行。

    总结一下,调用 Generator 函数,返回一个遍历器对象,代表 Generator 函数的内部指针。以后,每次调用遍历器对象的next方法,就会返回一个有着valuedone两个属性的对象。value属性表示当前的内部状态的值,是yield表达式后面那个表达式的值;done属性是一个布尔值,表示是否遍历结束。

    四、可迭代对象与for ... of

    一个数据结构只要部署了Symbol.iterator属性,就被视为具有iterator接口,就可以用for...of循环遍历它的成员。如果一个对象具有Symbol.iterator属性,则就称这个对象是可迭代的对象

    for...of循环可以使用的范围包括数组、SetMap结构、某些类似数组的对象(比如arguments对象、DOM NodeList对象)、Generator 对象,以及字符串。

    数组和普通对象都可以用for...in来遍历,但数组可以迭代,而普通对象不能迭代。而且 JS 原有的for...in循环,只能获得对象的键名,不能直接获取键值。

    const arr = ['red', 'green', 'blue'];
    for (let key in arr) {
      console.log(key) // 0, 1, 2
    }
    
    var obj = {
      name: 'JOJO',
      sex: '男',
      skills: '欧啦欧啦'
    }
    for (let key in obj) {
      console.log(key) // name, sex, skills
    }
    

    ES6 提供了for...of循环,允许遍历获得键值。

    但是对于普通的对象,for...of结构不能直接使用,会报错

    这是因为数组默认部署了Symbol.iterator属性,而对象却没有这个属性

    有两个办法可以解决这个问题

    一是使用Object.keys方法将对象的键名生成一个数组,然后遍历这个数组。

    var obj = {
      name: 'JOJO',
      sex: '男',
      skills: '欧啦欧啦'
    }
    
    for (var key of Object.keys(obj)) {
      console.log(key + ': ' + obj[key]); // name: JOJO, sex: 男, skills: 欧啦欧啦
    }
    

    二是使用 Generator 函数将对象重新包装一下。

    五、总结一下 JS 里的遍历方法

    以数组为例,JS里有以下几种遍历方法

    1. for循环
    for (var index = 0; index < myArray.length; index++) {
      console.log(myArray[index]);
    }
    

    缺点:写起来比较麻烦

    1. forEach
    myArray.forEach(function (value) {
      console.log(value);
    });
    

    缺点:无法中途跳出forEach循环,break命令或return命令都不能奏效。

    1. for...in(遍历键名)
    for (var index in myArray) {
      console.log(myArray[index]);
    }
    

    缺点:

    • 数组的键名是数字,但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
    • for...in循环不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。
    • 某些情况下,for...in循环会以任意顺序遍历键名。

    总之,for...in循环主要是为遍历对象而设计的,不适用于遍历数组。

    1. for...of(遍历键值)
      如果用for...of遍历对象,则必须是可迭代的对象。
    for (let value of myArray) {
      console.log(value);
    }
    

    for...of循环相比上面几种做法,有一些显著的优点:

    • 有着同for...in一样的简洁语法,但是没有for...in那些缺点。
    • 不同于forEach方法,它可以与breakcontinuereturn配合使用。
    • 提供了遍历所有数据结构的统一操作接口。

    参考:
    迭代器与 for of的使用和原理
    Iterator 和 for...of 循环
    Generator 函数的语法
    迭代器和生成器 MDN

    相关文章

      网友评论

          本文标题:ES6 迭代器 & 生成器

          本文链接:https://www.haomeiwen.com/subject/omrbictx.html