面试官:你对Es6很了解?那实现一个Set吧

开发 架构
es6新增了Set数据结构,它允许你存储任何类型的唯一值,无论是原始值还是对象引用。这篇文章希望通过模拟实现一个Set来增加对它的理解。

[[440012]]

本文转载自微信公众号「前端胖头鱼」,作者前端胖头鱼。转载本文请联系前端胖头鱼公众号。

前言

es6新增了Set数据结构,它允许你存储任何类型的唯一值,无论是原始值还是对象引用。这篇文章希望通过模拟实现一个Set来增加对它的理解。

用在前面

实际工作和学习过程中,你可能也经常用Set来对数组做去重处理

  1. let unique = (array) => { 
  2.   return [ ...new Set(array) ] 
  3.  
  4. console.log(unique([ 1, 2, 3, 4, 1, 2, 5 ])) // [1, 2, 3, 4, 5] 

基本语法

以下内容基本出自MDN,这里写出来,纯粹是为了便于后面的模拟操作。如果你已经很熟悉了,可以直接略过。

  1. new Set([ iterable ]) 

可以传递一个可迭代对象,它的所有元素将被添加到新的 Set中。如果不指定此参数或其值为null,则新的 Set为空。

  1. let s = new Set([ 1, 2, 3 ]) // Set(3) {1, 2, 3} 
  2. let s2 = new Set() // Set(0) {} 
  3. let s3 = new Set(null /* or undefined */) // Set(0) {} 

实例属性和方法

属性

constructor Set的构造函数

size Set 长度

操作方法

Set.prototype.add(value) 在Set对象尾部添加一个元素。返回该Set对象。

Set.prototype.has(value) 返回一个布尔值,表示该值在Set中存在与否。

Set.prototype.delete(value) 移除Set中与这个值相等的元素,返回Set.prototype.has(value)在这个操作前会返回的值(即如果该元素存在,返回true,否则返回false)

Set.prototype.clear() 移除Set对象内的所有元素。没有返回值

栗子

  1. let s = new Set() 
  2.  
  3. s.add(1) // Set(1) {1} 
  4.   .add(2) // Set(2) {1, 2} 
  5.   .add(NaN) // Set(2) {1, 2, NaN} 
  6.   .add(NaN) // Set(2) {1, 2, NaN} 
  7.  
  8. // 注意这里因为添加完元素之后返回的是该Set对象,所以可以链式调用 
  9. // NaN === NaN 结果是false,但是Set中只会存一个NaN 
  10.  
  11. s.has(1) // true 
  12. s.has(NaN) // true 
  13.  
  14. s.size // 3 
  15.  
  16. s.delete(1) 
  17. s.has(1) // false 
  18. s.size // 2 
  19.  
  20. s.clear() 
  21.  
  22. s // Set(0) {} 

遍历方法

Set.prototype.keys() 返回一个新的迭代器对象,该对象包含Set对象中的按插入顺序排列的所有元素的值。

Set.prototype.values() 返回一个新的迭代器对象,该对象包含Set对象中的按插入顺序排列的所有元素的值。

Set.prototype.entries() 返回一个新的迭代器对象,该对象包含Set对象中的按插入顺序排列的所有元素的值的[value, value]数组。为了使这个方法和Map对象保持相似, 每个值的键和值相等。

Set.prototype.forEach(callbackFn[, thisArg]) 按照插入顺序,为Set对象中的每一个值调用一次callBackFn。如果提供了thisArg参数,回调中的this会是这个参数。

栗子

  1. let s = new Set([ 's''e''t' ]) 
  2.  
  3. s // SetIterator {"s""e""t"
  4. s.keys() // SetIterator {"s""e""t"
  5. s.values() // SetIterator {"s""e""t"
  6. s.entries() // SetIterator {"s""e""t"
  7.  
  8. // log 
  9. [ ...s ] // ["s""e""t"
  10. [ ...s.keys() ] //  ["s""e""t"
  11. [ ...s.values() ] //  ["s""e""t"
  12. [ ...s.entries() ] //  [["s""s"], ["e""e"], ["t""t"]] 
  13.  
  14. s.forEach(function (value, keyset) { 
  15.   console.log(value, keyset, this) 
  16. }) 
  17.  
  18. // s s Set(3) {"s""e""t"} Window 
  19. // e e Set(3) {"s""e""t"} Window 
  20. // t t Set(3) {"s""e""t"} Window 
  21.  
  22. s.forEach(function () { 
  23.   console.log(this) 
  24. }, { name'qianlongo' }) 
  25.  
  26. // {name"qianlongo"
  27. // {name"qianlongo"
  28. // {name"qianlongo"
  29.  
  30. for (let value of s) { 
  31.   console.log(value) 
  32. // s 
  33. // e 
  34. // t 
  35.  
  36. for (let value of s.entries()) { 
  37.   console.log(value) 
  38. // ["s""s"
  39. // ["e""e"
  40. // ["t""t"

整体结构

以上回顾了一下Set的基本使用,我们可以开始尝试模拟实现一把啦。你也可以直接点击查看源码。

目录结构

├──set-polyfill │ ├──iterator.js // 导出一个构造函数Iterator,模拟创建可迭代对象 │ ├──set.js // Set类 │ ├──utils.js // 辅助函数 │ ├──test.js // 测试

Set整体框架

  1. class Set { 
  2.  
  3.   constructor (iterable) {} 
  4.  
  5.   get size () {} 
  6.  
  7.   has () {} 
  8.  
  9.   add () {} 
  10.  
  11.   delete () {}   
  12.  
  13.   clear () {} 
  14.  
  15.   forEach () {} 
  16.  
  17.   keys () {} 
  18.  
  19.   values () {}   
  20.  
  21.   entries () {} 
  22.  
  23.   [ Symbol.iterator ] () {} 

辅助方法

开始实现Set细节前,我们先看一下会用到的一些辅助方法

assert, 这个方法是学习vuex源码时候看到的,感觉蛮实用的,主要用来对某些条件进行判断,抛出错误。

  1. const assert = (condition, msg) => { 
  2.   if (!condition) throw new Error(msg) 

isDef, 过滤掉null和undefined

  1. const isDef = (value) => { 
  2.   return value != void 0 

isIterable, 简单判断value是否是迭代器对象.

  1. const isIterable = (value) => { 
  2.   return isDef(value) && typeof value[ Symbol.iterator ] === 'function' 

forOf, 模拟for of行为, 对迭代器对象进行遍历操作。

  1. const forOf = (iterable, callback, ctx) => { 
  2.   let result 
  3.  
  4.   iterable = iterable[ Symbol.iterator ]() 
  5.   result = iterable.next() 
  6.  
  7.   while (!result.done) { 
  8.     callback.call(ctx, result.value) 
  9.     result = iterable.next() 
  10.   } 

源码实现

  1. class Set { 
  2.   constructor (iterable) { 
  3.     // 使用数组来存储Set的每一项元素 
  4.     this.value = [] 
  5.     // 判断是否使用new调用 
  6.     assert(this instanceof Set'Constructor Set requires "new"'
  7.     // 过滤掉null和undefined 
  8.     if (isDef(iterable)) { 
  9.       // 是可迭代对象才进行下一步forOf元素添加 
  10.       assert(isIterable(iterable), `${iterable} is not iterable`) 
  11.       // 循环可迭代对象,初始化 
  12.       forOf(iterable, (value) => { 
  13.         this.add(value) 
  14.       }) 
  15.     } 
  16.   } 
  17.   // 获取s.size时候会调用 size函数,返回value数组的长度 
  18.   // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/get 
  19.   get size () { 
  20.     return this.value.length 
  21.   } 
  22.   // 使用数组的includes方法判断是否包含value 
  23.   // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes 
  24.   // [ NaN ].includes(NaN)会返回true,正好Set也只能存一个NaN 
  25.   has (value) { 
  26.     return this.value.includes(value) 
  27.   } 
  28.   // 通过has方法判断value是否存在,不存在则添加进数组,最后返回Set本身,支持链式调用 
  29.   add (value) { 
  30.     if (!this.has(value)) { 
  31.       this.value.push(value) 
  32.     } 
  33.  
  34.     return this 
  35.   } 
  36.   // 在删除之前先判断value是否存在用之当做返回值,存在则通过splice方法移除 
  37.   delete (value) { 
  38.     let result = this.has(value) 
  39.  
  40.     if (result) { 
  41.       this.value.splice(this.value.indexOf(value), 1) 
  42.     } 
  43.  
  44.     return result 
  45.   } 
  46.   // 重新赋值一个空数组,即实现clear方法 
  47.   clear () { 
  48.     this.value = [] 
  49.   } 
  50.   // 通过forOf遍历 values返回的迭代对象,实现forEach 
  51.   forEach (callback, thisArg) { 
  52.     forOf(this.values(), (value) => { 
  53.       callback.call(thisArg, value, value, this) 
  54.     }) 
  55.   } 
  56.   // 返回一个迭代对象,该对象中的值是Set中的value 
  57.   keys () { 
  58.     return new Iterator(this.value) 
  59.   } 
  60.   // 同keys 
  61.   values () { 
  62.     return this.keys() 
  63.   } 
  64.   // 返回一个迭代对象,不同keys和values的是其值是[value, value] 
  65.   entries () { 
  66.     return new Iterator(this.value, (value) => [ value, value ]) 
  67.   } 
  68.   // 返回一个新的迭代器对象,该对象包含Set对象中的按插入顺序排列的所有元素的值。 
  69.   [ Symbol.iterator ] () { 
  70.     return this.values() 
  71.   } 

测试一把

执行 node test.js

size属性和操作方法

  1. const Set = require('./set'
  2. const s = new Set() 
  3.  
  4. s.add(1) 
  5.   .add(2) 
  6.   .add(NaN) 
  7.   .add(NaN) 
  8.  
  9. console.log(s)  // Set { value: [ 1, 2, NaN ] } 
  10. console.log(s.has(1)) // true 
  11. console.log(s.has(NaN)) // true 
  12. console.log(s.size) // 3 
  13.  
  14. s.delete(1) 
  15.  
  16. console.log(s.has(1)) // false 
  17. console.log(s.size) // 2 
  18.  
  19. s.clear() 
  20.  
  21. console.log(s) // Set { value: [] } 

上面的例子把Set的size属性和操作方法过了一遍,打印出来的Set实例和原生的长得不太一样,就先不管了。

遍历方法

  1. let s2 = new Set([ 's''e''t' ]) 
  2.  
  3. console.log(s2) // Set { value: [ 's''e''t' ] } 
  4. console.log(s2.keys()) // Iterator {} 
  5. console.log(s2.values()) //  Iterator {} 
  6. console.log(s2.entries()) //  Iterator {} 
  7.  
  8. console.log([ ...s2 ]) // [ 's''e''t' ] 
  9. console.log([ ...s2.keys() ]) // [ 's''e''t' ] 
  10. console.log([ ...s2.values() ]) // [ 's''e''t' ] 
  11. console.log([ ...s2.entries() ]) // [ [ 's''s' ], [ 'e''e' ], [ 't''t' ] ] 
  12.  
  13. s2.forEach(function (value, keyset) { 
  14.   console.log(value, keyset, this) 
  15. }) 
  16.  
  17. // s s Set { value: [ 's''e''t' ] } global 
  18. // e e Set { value: [ 's''e''t' ] } global 
  19. // t t Set { value: [ 's''e''t' ] } global 
  20.  
  21. s2.forEach(function () { 
  22.   console.log(this) 
  23. }, { name'qianlongo' }) 
  24.  
  25. // { name'qianlongo' } 
  26. // { name'qianlongo' } 
  27. // { name'qianlongo' } 
  28.  
  29. // {name"qianlongo"
  30. // {name"qianlongo"
  31. // {name"qianlongo"
  32.  
  33. for (let value of s) { 
  34.   console.log(value) 
  35. // s 
  36. // e 
  37. // t 
  38.  
  39. for (let value of s.entries()) { 
  40.   console.log(value) 
  41. // ["s""s"
  42. // ["e""e"
  43. // ["t""t"

遍历方法看起来也可以达到和前面例子一样的效果,源码实现部分基本就到这里啦,但是还没完...

  • 为什么[ ...s2 ]可以得到数组[ 's', 'e', 't' ]呢?
  • s2 为什么可以被for of循环呢?

iterator(迭代器)

从MDN找来这段话,在JavaScript中迭代器是一个对象,它提供了一个next() 方法,用来返回序列中的下一项。这个方法返回包含两个属性:done(表示遍历是否结束)和 value(当前的值)。

迭代器对象一旦被创建,就可以反复调用next()。

  1. function makeIterator(array){ 
  2.   var nextIndex = 0 
  3.  
  4.   return { 
  5.     nextfunction () { 
  6.       return nextIndex < array.length ? 
  7.         { done: false, value: array[ nextIndex++ ] } : 
  8.         { done: true, value: undefined } 
  9.     } 
  10.   }; 
  11.  
  12. var it = makeIterator(['yo''ya']) 
  13.  
  14. console.log(it.next()) // { done: false, value: "yo" } 
  15. console.log(it.next()) // { done: false, value: "ya" } 
  16. console.log(it.next()) // { done: true, value: undefined } 

这个时候可以讲一下我们的iterator.js中的代码了

  1. class Iterator { 
  2.   constructor (arrayLike, iteratee = (value) => value) { 
  3.     this.value = Array.from(arrayLike) 
  4.     this.nextIndex = 0 
  5.     this.len = this.value.length 
  6.     this.iteratee = iteratee 
  7.   } 
  8.  
  9.   next () { 
  10.     let done = this.nextIndex >= this.len 
  11.     let value = done ? undefined : this.iteratee(this.value[ this.nextIndex++ ]) 
  12.  
  13.     return { done, value } 
  14.   } 
  15.  
  16.   [ Symbol.iterator ] () { 
  17.     return this 
  18.   } 

Iterator的实例有一个next方法,每次调用都会返回一个done属性和value属性,其语意和前面的解释是一样的。

  1. let it = new Iterator(['yo''ya']) 
  2.  
  3. console.log(it.next()) // { done: false, value: "yo" } 
  4. console.log(it.next()) // { done: false, value: "ya" } 
  5. console.log(it.next()) // { done: true, value: undefined } 

看到这里你可能已经知道了,Iterator要实现的功能之一就是提供一个迭代器。那这个又和上面的问题1和2有啥关系呢?我们再来看看for of

for of

一个数据结构只要部署了Symbol.iterator属性,就被视为具有iterator接口,就可以用for...of循环遍历它的成员。也就是说,for...of循环内部调用的是数据结构的Symbol.iterator方法 for...of 循环

默认只有(Array,Map,Set,String,TypedArray,arguments)可被for of迭代。我们自定义的Set类不在这其中,前面的例子中却在for of循环中打印出了想要的值。原因就是我们给Iterator类部署了Symbol.iterator方法,执行该方法便返回Iterator实例本身,它是一个可以被迭代的对象。

  1. [ Symbol.iterator ] () { 
  2.   return this 

到这里上面的问题2就可以解释通了。

再看看问题1为什么[ ...s2 ]可以得到数组[ 's', 'e', 't' ]呢?,原因也是我们给Set、keys、values、entries部署了Symbol.iterator,使之具有“iterator”接口,而扩展运算符...的特点之一就是任何具有Iterator接口的对象,都可以用扩展运算符转为真正的数组。

结尾

模拟过程中可能会有相应的错误,也不是和原生的实现完全一致。仅当学习之用,欢迎大家拍砖。

参考

  • Set
  • 迭代器和生成器
  • ES6 系列之模拟实现一个 Set 数据结构
  • 展开语法
  •  for...of 循环

 

责任编辑:武晓燕 来源: 前端胖头鱼
相关推荐

2022-03-21 09:05:18

volatileCPUJava

2024-09-09 08:30:56

代码

2020-07-03 14:19:01

Kafka日志存储

2024-05-28 10:14:31

JavaScrip模板引擎

2024-01-15 06:42:00

高并发热点账户数据库

2022-04-08 08:26:03

JavaHTTP请求

2021-09-28 13:42:55

Chrome Devwebsocket网络协议

2020-06-19 15:32:56

HashMap面试代码

2021-08-09 07:47:40

Git面试版本

2021-11-25 10:18:42

RESTfulJava互联网

2020-02-18 15:15:05

Handler消息队列执行任务

2019-12-25 11:22:19

负载均衡集群算法

2019-07-15 16:35:43

MySQL索引阿里

2020-02-28 15:42:26

AOPJDKCGLib

2024-10-24 16:14:43

数据传输CPU零拷贝

2015-08-13 10:29:12

面试面试官

2021-11-02 22:04:58

模式

2020-12-01 08:47:36

Java异常开发

2024-09-27 15:43:52

零拷贝DMAIO

2020-06-12 15:50:56

options前端服务器
点赞
收藏

51CTO技术栈公众号