资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/ES6 系列之模拟实现一个 Set 数据结构

ES6 系列之模拟实现一个 Set 数据结构

Backache / 3230人阅读

摘要：基本介绍提供了新的数据结构。初始化本身是一个构造函数，用来生成数据结构。函数可以接受一个数组或者具有接口的其他数据结构作为参数，用来初始化。返回一个布尔值，表示该值是否为的成员。清除所有成员，无返回值。

基本介绍

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

它类似于数组，但是成员的值都是唯一的，没有重复的值。

初始化

Set 本身是一个构造函数，用来生成 Set 数据结构。

</>复制代码 
  1. let set = new Set();

Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

</>复制代码 
  1. let set = new Set([1, 2, 3, 4, 4]);
  2. console.log(set); // Set(4) {1, 2, 3, 4}
  3. set = new Set(document.querySelectorAll("div"));
  4. console.log(set.size); // 66
  5. set = new Set(new Set([1, 2, 3, 4]));
  6. console.log(set.size); // 4
属性和方法

操作方法有：

add(value)：添加某个值，返回 Set 结构本身。

delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。

has(value)：返回一个布尔值，表示该值是否为 Set 的成员。

clear()：清除所有成员，无返回值。

举个例子：

</>复制代码 
  1. let set = new Set();
  2. console.log(set.add(1).add(2)); // Set [ 1, 2 ]
  3. console.log(set.delete(2)); // true
  4. console.log(set.has(2)); // false
  5. console.log(set.clear()); // undefined
  6. console.log(set.has(1)); // false

之所以每个操作都 console 一下，就是为了让大家注意每个操作的返回值。

遍历方法有：

keys()：返回键名的遍历器

values()：返回键值的遍历器

entries()：返回键值对的遍历器

forEach()：使用回调函数遍历每个成员，无返回值

注意 keys()、values()、entries() 返回的是遍历器

</>复制代码 
  1. let set = new Set(["a", "b", "c"]);
  2. console.log(set.keys()); // SetIterator {"a", "b", "c"}
  3. console.log([...set.keys()]); // ["a", "b", "c"]
</>复制代码 
  1. let set = new Set(["a", "b", "c"]);
  2. console.log(set.values()); // SetIterator {"a", "b", "c"}
  3. console.log([...set.values()]); // ["a", "b", "c"]
</>复制代码 
  1. let set = new Set(["a", "b", "c"]);
  2. console.log(set.entries()); // SetIterator {"a", "b", "c"}
  3. console.log([...set.entries()]); // [["a", "a"], ["b", "b"], ["c", "c"]]
</>复制代码 
  1. let set = new Set([1, 2, 3]);
  2. set.forEach((value, key) => console.log(key + ": " + value));
  3. // 1: 1
  4. // 2: 2
  5. // 3: 3

属性：

Set.prototype.constructor：构造函数，默认就是 Set 函数。

Set.prototype.size：返回 Set 实例的成员总数。

模拟实现第一版

如果要模拟实现一个简单的 Set 数据结构，实现 add、delete、has、clear、forEach 方法，还是很容易写出来的，这里直接给出代码：

</>复制代码 
  1. /**
  2.  * 模拟实现第一版
  3.  */
  4. (function(global) {
  5.     function Set(data) {
  6.         this._values = [];
  7.         this.size = 0;
  8.         data && data.forEach(function(item) {
  9.             this.add(item);
  10.         }, this);
  11.     }
  12.     Set.prototype["add"] = function(value) {
  13.         if (this._values.indexOf(value) == -1) {
  14.             this._values.push(value);
  15.             ++this.size;
  16.         }
  17.         return this;
  18.     }
  19.     Set.prototype["has"] = function(value) {
  20.         return (this._values.indexOf(value) !== -1);
  21.     }
  22.     Set.prototype["delete"] = function(value) {
  23.         var idx = this._values.indexOf(value);
  24.         if (idx == -1) return false;
  25.         this._values.splice(idx, 1);
  26.         --this.size;
  27.         return true;
  28.     }
  29.     Set.prototype["clear"] = function(value) {
  30.         this._values = [];
  31.         this.size = 0;
  32.     }
  33.     Set.prototype["forEach"] = function(callbackFn, thisArg) {
  34.         thisArg = thisArg || global;
  35.         for (var i = 0; i < this._values.length; i++) {
  36.             callbackFn.call(thisArg, this._values[i], this._values[i], this);
  37.         }
  38.     }
  39.     Set.length = 0;
  40.     global.Set = Set;
  41. })(this)

我们可以写段测试代码：

</>复制代码 
  1. let set = new Set([1, 2, 3, 4, 4]);
  2. console.log(set.size); // 4
  3. set.delete(1);
  4. console.log(set.has(1)); // false
  5. set.clear();
  6. console.log(set.size); // 0
  7. set = new Set([1, 2, 3, 4, 4]);
  8. set.forEach((value, key, set) => {
  9.     console.log(value, key, set.size)
  10. });
  11. // 1 1 4
  12. // 2 2 4
  13. // 3 3 4
  14. // 4 4 4
模拟实现第二版

在第一版中，我们使用 indexOf 来判断添加的元素是否重复，本质上，还是使用 === 来进行比较，对于 NaN 而言，因为：

</>复制代码 
  1. console.log([NaN].indexOf(NaN)); // -1

模拟实现的 Set 其实可以添加多个 NaN 而不会去重，然而对于真正的 Set 数据结构：

</>复制代码 
  1. let set = new Set();
  2. set.add(NaN);
  3. set.add(NaN);
  4. console.log(set.size); // 1

所以我们需要对 NaN 这个值进行多带带的处理。

处理的方式是当判断添加的值是 NaN 时，将其替换为一个独一无二的值，比如说一个很难重复的字符串类似于 @@NaNValue，当然了，说到独一无二的值，我们也可以直接使用 Symbol，代码如下：

</>复制代码 
  1. /**
  2.  * 模拟实现第二版
  3.  */
  4. (function(global) {
  5.     var NaNSymbol = Symbol("NaN");
  6.     var encodeVal = function(value) {
  7.         return value !== value ? NaNSymbol : value;
  8.     }
  9.     var decodeVal = function(value) {
  10.         return (value === NaNSymbol) ? NaN : value;
  11.     }
  12.     function Set(data) {
  13.         this._values = [];
  14.         this.size = 0;
  15.         data && data.forEach(function(item) {
  16.             this.add(item);
  17.         }, this);
  18.     }
  19.     Set.prototype["add"] = function(value) {
  20.         value = encodeVal(value);
  21.         if (this._values.indexOf(value) == -1) {
  22.             this._values.push(value);
  23.             ++this.size;
  24.         }
  25.         return this;
  26.     }
  27.     Set.prototype["has"] = function(value) {
  28.         return (this._values.indexOf(encodeVal(value)) !== -1);
  29.     }
  30.     Set.prototype["delete"] = function(value) {
  31.         var idx = this._values.indexOf(encodeVal(value));
  32.         if (idx == -1) return false;
  33.         this._values.splice(idx, 1);
  34.         --this.size;
  35.         return true;
  36.     }
  37.     Set.prototype["clear"] = function(value) {
  38.         ...
  39.     }
  40.     Set.prototype["forEach"] = function(callbackFn, thisArg) {
  41.         ...
  42.     }
  43.     Set.length = 0;
  44.     global.Set = Set;
  45. })(this)

写段测试用例：

</>复制代码 
  1. let set = new Set([1, 2, 3]);
  2. set.add(NaN);
  3. console.log(set.size); // 3
  4. set.add(NaN);
  5. console.log(set.size); // 3
模拟实现第三版

在模拟实现 Set 时，最麻烦的莫过于迭代器的实现和处理，比如初始化以及执行 keys()、values()、entries() 方法时都会返回迭代器：

</>复制代码 
  1. let set = new Set([1, 2, 3]);
  2. console.log([...set]); // [1, 2, 3]
  3. console.log(set.keys()); // SetIterator {1, 2, 3}
  4. console.log([...set.keys()]); // [1, 2, 3]
  5. console.log([...set.values()]); // [1, 2, 3]
  6. console.log([...set.entries()]); // [[1, 1], [2, 2], [3, 3]]

而且 Set 也支持初始化的时候传入迭代器：

</>复制代码 
  1. let set = new Set(new Set([1, 2, 3]));
  2. console.log(set.size); // 3

当初始化传入一个迭代器的时候，我们可以根据我们在上一篇 《ES6 系列之迭代器与 for of》中模拟实现的 forOf 函数，遍历传入的迭代器的 Symbol.iterator 接口，然后依次执行 add 方法。

而当执行 keys() 方法时，我们可以返回一个对象，然后为其部署 Symbol.iterator 接口，实现的代码，也是最终的代码如下：

</>复制代码 
  1. /**
  2.  * 模拟实现第三版
  3.  */
  4. (function(global) {
  5.     var NaNSymbol = Symbol("NaN");
  6.     var encodeVal = function(value) {
  7.         return value !== value ? NaNSymbol : value;
  8.     }
  9.     var decodeVal = function(value) {
  10.         return (value === NaNSymbol) ? NaN : value;
  11.     }
  12.     var makeIterator = function(array, iterator) {
  13.         var nextIndex = 0;
  14.         // new Set(new Set()) 会调用这里
  15.         var obj = {
  16.             next: function() {
  17.                 return nextIndex < array.length ? { value: iterator(array[nextIndex++]), done: false } : { value: void 0, done: true };
  18.             }
  19.         };
  20.         // [...set.keys()] 会调用这里
  21.         obj[Symbol.iterator] = function() {
  22.             return obj
  23.         }
  24.         return obj
  25.     }
  26.     function forOf(obj, cb) {
  27.         let iterable, result;
  28.         if (typeof obj[Symbol.iterator] !== "function") throw new TypeError(obj + " is not iterable");
  29.         if (typeof cb !== "function") throw new TypeError("cb must be callable");
  30.         iterable = obj[Symbol.iterator]();
  31.         result = iterable.next();
  32.         while (!result.done) {
  33.             cb(result.value);
  34.             result = iterable.next();
  35.         }
  36.     }
  37.     function Set(data) {
  38.         this._values = [];
  39.         this.size = 0;
  40.         forOf(data, (item) => {
  41.             this.add(item);
  42.         })
  43.     }
  44.     Set.prototype["add"] = function(value) {
  45.         value = encodeVal(value);
  46.         if (this._values.indexOf(value) == -1) {
  47.             this._values.push(value);
  48.             ++this.size;
  49.         }
  50.         return this;
  51.     }
  52.     Set.prototype["has"] = function(value) {
  53.         return (this._values.indexOf(encodeVal(value)) !== -1);
  54.     }
  55.     Set.prototype["delete"] = function(value) {
  56.         var idx = this._values.indexOf(encodeVal(value));
  57.         if (idx == -1) return false;
  58.         this._values.splice(idx, 1);
  59.         --this.size;
  60.         return true;
  61.     }
  62.     Set.prototype["clear"] = function(value) {
  63.         this._values = [];
  64.         this.size = 0;
  65.     }
  66.     Set.prototype["forEach"] = function(callbackFn, thisArg) {
  67.         thisArg = thisArg || global;
  68.         for (var i = 0; i < this._values.length; i++) {
  69.             callbackFn.call(thisArg, this._values[i], this._values[i], this);
  70.         }
  71.     }
  72.     Set.prototype["values"] = Set.prototype["keys"] = function() {
  73.         return makeIterator(this._values, function(value) { return decodeVal(value); });
  74.     }
  75.     Set.prototype["entries"] = function() {
  76.         return makeIterator(this._values, function(value) { return [decodeVal(value), decodeVal(value)]; });
  77.     }
  78.     Set.prototype[Symbol.iterator] = function(){
  79.         return this.values();
  80.     }
  81.     Set.prototype["forEach"] = function(callbackFn, thisArg) {
  82.         thisArg = thisArg || global;
  83.         var iterator = this.entries();
  84.         forOf(iterator, (item) => {
  85.             callbackFn.call(thisArg, item[1], item[0], this);
  86.         })
  87.     }
  88.     Set.length = 0;
  89.     global.Set = Set;
  90. })(this)

写段测试代码：

</>复制代码 
  1. let set = new Set(new Set([1, 2, 3]));
  2. console.log(set.size); // 3
  3. console.log([...set.keys()]); // [1, 2, 3]
  4. console.log([...set.values()]); // [1, 2, 3]
  5. console.log([...set.entries()]); // [1, 2, 3]
QUnit

由上我们也可以发现，每当我们进行一版的修改时，只是写了新的测试代码，但是代码改写后，对于之前的测试代码是否还能生效呢？是否不小心改了什么导致以前的测试代码没有通过呢？

为了解决这个问题，针对模拟实现 Set 这样一个简单的场景，我们可以引入 QUnit 用于编写测试用例，我们新建一个 HTML 文件：

</>复制代码 
  2.     
  3.     
  4.     <span class="hljs-attr">Set</span> <span class="hljs-string">的模拟实现</span>
  5.     
  6.     
  7.     
  8.     
  9.     
  10.

编写测试用例，因为语法比较简单，我们就直接看编写的一些例子：

</>复制代码 
  1. QUnit.test("unique value", function(assert) {
  2.     const set = new Set([1, 2, 3, 4, 4]);
  3.     assert.deepEqual([...set], [1, 2, 3, 4], "Passed!");
  4. });
  5. QUnit.test("unique value", function(assert) {
  6.     const set = new Set(new Set([1, 2, 3, 4, 4]));
  7.     assert.deepEqual([...set], [1, 2, 3, 4], "Passed!");
  8. });
  9. QUnit.test("NaN", function(assert) {
  10.     const items = new Set([NaN, NaN]);
  11.     assert.ok(items.size == 1, "Passed!");
  12. });
  13. QUnit.test("Object", function(assert) {
  14.     const items = new Set([{}, {}]);
  15.     assert.ok(items.size == 2, "Passed!");
  16. });
  17. QUnit.test("set.keys", function(assert) {
  18.     let set = new Set(["red", "green", "blue"]);
  19.     assert.deepEqual([...set.keys()], ["red", "green", "blue"], "Passed!");
  20. });
  21. QUnit.test("set.forEach", function(assert) {
  22.     let temp = [];
  23.     let set = new Set([1, 2, 3]);
  24.     set.forEach((value, key) => temp.push(value * 2) )
  25.     assert.deepEqual(temp, [2, 4, 6], "Passed!");
  26. });

用浏览器预览 HTML 页面，效果如下图：

完整的 polyfill 及 Qunit 源码在 https://github.com/mqyqingfeng/Blog/tree/master/demos/qunit。

ES6 系列

ES6 系列目录地址：https://github.com/mqyqingfeng/Blog

ES6 系列预计写二十篇左右，旨在加深 ES6 部分知识点的理解，重点讲解块级作用域、标签模板、箭头函数、Symbol、Set、Map 以及 Promise 的模拟实现、模块加载方案、异步处理等内容。

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

GPU云服务器 云服务器 es6-系列 系列之 系列之二 架构之坑系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96224.html

相关文章

  • ES6学习（三）之Set的模拟实现

    摘要：注意这里因为添加完元素之后返回的是该对象，所以可以链式调用结果是，但是中只会存一个模拟实现的整体结构除此之外我们还需要二个辅助方法模拟行为对迭代器对象进行遍历操作。 更多系列文章请看 在实现之前我们可以通过阮一峰的ECMAScript 6 入门了解一下Set的基本信息 1、Set的基本语法 new Set([ iterable ]) 可以传递一个可迭代对象，它的所有元素将被添加到新的 ...

    余学文 评论0 收藏0

  • ES6 系列之 WeakMap

    摘要：一个对象若只被弱引用所引用，则被认为是不可访问或弱可访问的，并因此可能在任何时刻被回收。也就是说，一旦不再需要，里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。如果有错误或者不严谨的地方，请务必给予指正，十分感谢。 前言 我们先从 WeakMap 的特性说起，然后聊聊 WeakMap 的一些应用场景。 特性 1. WeakMap 只接受对象作为键名 const map = ...

    CollinPeng 评论0 收藏0

  • ES6 系列之箭头函数

    摘要：回顾我们先来回顾下箭头函数的基本语法。主要区别包括没有箭头函数没有，所以需要通过查找作用域链来确定的值。箭头函数并没有方法，不能被用作构造函数，如果通过的方式调用，会报错。 回顾 我们先来回顾下箭头函数的基本语法。 ES6 增加了箭头函数： let func = value => value; 相当于： let func = function (value) { return ...

    hsluoyz 评论0 收藏0

  • ES6 系列之模拟实现 Symbol 类型

    摘要：值可以作为标识符，用于对象的属性名，可以保证不会出现同名的属性。的结果为因为不是通过的方式实现的，所以的结果自然是。这个实现类似于函数记忆，我们建立一个对象，用来储存已经创建的值即可。方法返回一个已登记的类型值的。 前言 实际上，Symbol 的很多特性都无法模拟实现……所以先让我们回顾下有哪些特性，然后挑点能实现的……当然在看的过程中，你也可以思考这个特性是否能实现，如果可以实现，该...

    wangjuntytl 评论0 收藏0

  • ES6 系列之 Babel 是如何编译 Class 的(上)

    摘要：前言在了解是如何编译前，我们先看看的和的构造函数是如何对应的。这是它跟普通构造函数的一个主要区别，后者不用也可以执行。该函数的作用就是将函数数组中的方法添加到构造函数或者构造函数的原型中，最后返回这个构造函数。 前言 在了解 Babel 是如何编译 class 前，我们先看看 ES6 的 class 和 ES5 的构造函数是如何对应的。毕竟，ES6 的 class 可以看作一个语法糖，...

    shadajin 评论0 收藏0

发表评论

登陆后可评论

0条评论

Backache

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<