Toc
  1. Iterator
  2. for…of
  3. Set
Toc
0 results found
FBB
ES6系列的模拟实现
2020/06/04 前端 ES6

一直以来都是在使用 ES6 的部分语法,很多都是限于 API 的使用,在之前已经模拟了 Promise 的实现,当然 ES6 中还有值得深入理解的使用方法。会陆续更新这篇博客,深入理解 ES6 系列的实现。

Iterator

简单来说,它是一种接口,为各种不同的数据结构提供统一的访问机制。
它会创建一个指针对象,然后通过调用 next 方法可以改变指针指向数据结构的成员,每一次调用 next 方法都会返回包含valuedone两个属性值的对象。

实现代码如下:

function createIterator(items) {
  var i = 0;
  function addIterator(items) {
    return {
      next() {
        return i >= items.length
          ? { done: true, vlaue: undefined }
          : { done: false, value: items[i++] };
      },
    };
  }
  var iterator = addIterator(items);
  iterator[Symbol.iterator] = function () {
    return addIterator(items);
  };
  return iterator;
}

for…of

如果我们使用 for…of 遍历对象,那么该对象必须拥有 Symbol.iterator 属性,否则会报错。
一个数据结构只要有 Symbol.interator 这个属性,就被视为具有 iterator 接口,就可以使用 for…of 遍历内部成员。for…of 内部就是调用数据结构的 Symbol.iterator 方法。
实现代码如下:

function ForOf(obj, cb) {
  var result, iterable;
  if (typeof obj[Symbol.iterator] !== "function") {
    throw new TypeError("not iterable");
  }
  if (typeof cb !== "function") {
    throw new TypeError("cb must be callable");
  }
  iterable = obj[Symbol.iterator]();
  result = iterable.next();
  while (!result.done) {
    cb(result.value);
    result = iterable.next();
  }
}

结合目前实现的 createIterator 和 ForOf,举一个小例子。

const obj = {
  name: "FBB",
  age: 23,
  major: "software",
};

obj[Symbol.iterator] = function () {
  return createIterator([1, 2, 3, 4]);
};

ForOf(obj, console.log); //1, 2, 3, 4

Set

ES6 提供了新的数据结构 Set。

它类似于数组,但是成员的值都是唯一的,没有重复的值。
操作方法:

  • Set.prototype.add(value):添加某个值,返回 Set 结构本身。
  • Set.prototype.delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • Set.prototype.has(value):返回一个布尔值,表示该值是否为 Set 的成员。
  • Set.prototype.clear():清除所有成员,没有返回值。

属性:

  • Set.prototype.constructor:构造函数,默认就是 Set 函数。
  • Set.prototype.size:返回 Set 实例的成员总数。

遍历属性:

  • Set.prototype.keys():返回键名的遍历器
  • Set.prototype.values():返回键值的遍历器
  • Set.prototype.entries():返回键值对的遍历器
  • Set.prototype.forEach():使用回调函数遍历每个成员

Set 的模拟实现

打赏
支付宝
微信
本文作者:FBB
版权声明:本文首发于FBB的博客,转载请注明出处!