2. 程式人生 > >從零到有模擬實現一個Set類

從零到有模擬實現一個Set類

阿新 • • 發佈：2018-12-09

前言

es6新增了Set資料結構，它允許你儲存任何型別的唯一值，無論是原始值還是物件引用。這篇文章希望通過模擬實現一個Set來增加對它的理解。

原文連結

用在前面

實際工作和學習過程中，你可能也經常用Set來對陣列做去重處理

let unique = (array) => {
  return [ ...new Set(array) ]
}

console.log(unique([ 1, 2, 3, 4, 1, 2, 5 ])) // [1, 2, 3, 4, 5]

基本語法

以下內容基本出自MDN,這裡寫出來，純粹是為了便於後面的模擬操作。如果你已經很熟悉了，可以直接略過。

new Set([ iterable ])

可以傳遞一個可迭代物件，它的所有元素將被新增到新的 Set中。如果不指定此引數或其值為null，則新的 Set為空。


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

例項屬性和方法

屬性

constructor Set的建構函式

size Set 長度

操作方法

  1. Set.prototype.add(value)

在Set物件尾部新增一個元素。返回該Set物件。

  1. Set.prototype.has(value)

返回一個布林值，表示該值在Set中存在與否。

  1. Set.prototype.delete(value)

移除Set中與這個值相等的元素，返回Set.prototype.has(value)在這個操作前會返回的值（即如果該元素存在，返回true，否則返回false）

  1. Set.prototype.clear()

移除Set物件內的所有元素。沒有返回值

栗子


let s = new Set()

s.add(1) // Set(1) {1}
  .add(2) // Set(2) {1, 2}
  .add(NaN) // Set(2) {1, 2, NaN}
  .add(NaN) // Set(2) {1, 2, NaN}

// 注意這裡因為新增完元素之後返回的是該Set物件，所以可以鏈式呼叫
// NaN === NaN 結果是false，但是Set中只會存一個NaN

s.has(1) // true
s.has(NaN) // true

s.size // 3

s.delete(1)
s.has(1) // false
s.size // 2

s.clear()

s // Set(0) {}

遍歷方法

  1. Set.prototype.keys()

返回一個新的迭代器物件，該物件包含Set物件中的按插入順序排列的所有元素的值。

  1. Set.prototype.values()

返回一個新的迭代器物件，該物件包含Set物件中的按插入順序排列的所有元素的值。

  1. Set.prototype.entries()

返回一個新的迭代器物件，該物件包含Set物件中的按插入順序排列的所有元素的值的[value, value]陣列。為了使這個方法和Map物件保持相似， 每個值的鍵和值相等。

  1. Set.prototype.forEach(callbackFn[, thisArg])

按照插入順序，為Set物件中的每一個值呼叫一次callBackFn。如果提供了thisArg引數，回撥中的this會是這個引數。

栗子


let s = new Set([ 's', 'e', 't' ])

s // SetIterator {"s", "e", "t"}
s.keys() // SetIterator {"s", "e", "t"}
s.values() // SetIterator {"s", "e", "t"}
s.entries() // SetIterator {"s", "e", "t"}

// log
[ ...s ] // ["s", "e", "t"]
[ ...s.keys() ] //  ["s", "e", "t"]
[ ...s.values() ] //  ["s", "e", "t"]
[ ...s.entries() ] //  [["s", "s"], ["e", "e"], ["t", "t"]]

s.forEach(function (value, key, set) {
  console.log(value, key, set, this)
})

// s s Set(3) {"s", "e", "t"} Window
// e e Set(3) {"s", "e", "t"} Window
// t t Set(3) {"s", "e", "t"} Window

s.forEach(function () {
  console.log(this)
}, { name: 'qianlongo' })

// {name: "qianlongo"}
// {name: "qianlongo"}
// {name: "qianlongo"}

for (let value of s) {
  console.log(value)
}
// s
// e
// t

for (let value of s.entries()) {
  console.log(value)
}
// ["s", "s"]
// ["e", "e"]
// ["t", "t"]

整體結構

以上回顧了一下Set的基本使用，我們可以開始嘗試模擬實現一把啦。你也可以直接點選檢視原始碼。

目錄結構

├──set-polyfill│ ├──iterator.js // 匯出一個建構函式Iterator,模擬建立可迭代物件│ ├──set.js // Set類│ ├──utils.js // 輔助函式│ ├──test.js // 測試

Set整體框架


class Set {

  constructor (iterable) {}

  get size () {}

  has () {}

  add () {}

  delete () {}  

  clear () {}

  forEach () {}

  keys () {}

  values () {}  

  entries () {}

  [ Symbol.iterator ] () {}
}

輔助方法

開始實現Set細節前，我們先看一下會用到的一些輔助方法
  1. assert, 這個方法是學習vuex原始碼時候看到的，感覺蠻實用的，主要用來對某些條件進行判斷，丟擲錯誤。

const assert = (condition, msg) => {
  if (!condition) throw new Error(msg)
}
  1. isDef, 過濾掉null和undefined 

const isDef = (value) => {
  return value != void 0
}
  1. isIterable, 簡單判斷value是否是迭代器物件.

const isIterable = (value) => {
  return isDef(value) && typeof value[ Symbol.iterator ] === 'function'
}
  1. forOf, 模擬for of行為, 對迭代器物件進行遍歷操作。

const forOf = (iterable, callback, ctx) => {
  let result

  iterable = iterable[ Symbol.iterator ]()
  result = iterable.next()

  while (!result.done) {
    callback.call(ctx, result.value)
    result = iterable.next()
  }
}

原始碼實現

class Set {
  constructor (iterable) {
    // 使用陣列來儲存Set的每一項元素
    this.value = []
    // 判斷是否使用new呼叫
    assert(this instanceof Set, 'Constructor Set requires "new"')
    // 過濾掉null和undefined
    if (isDef(iterable)) {
      // 是可迭代物件才進行下一步forOf元素新增
      assert(isIterable(iterable), `${iterable} is not iterable`)
      // 迴圈可迭代物件，初始化
      forOf(iterable, (value) => {
        this.add(value)
      })
    }
  }
  // 獲取s.size時候會呼叫 size函式，返回value陣列的長度
  // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/get
  get size () {
    return this.value.length
  }
  // 使用陣列的includes方法判斷是否包含value
  // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
  // [ NaN ].includes(NaN)會返回true，正好Set也只能存一個NaN
  has (value) {
    return this.value.includes(value)
  }
  // 通過has方法判斷value是否存在，不存在則新增進陣列，最後返回Set本身，支援鏈式呼叫
  add (value) {
    if (!this.has(value)) {
      this.value.push(value)
    }

    return this
  }
  // 在刪除之前先判斷value是否存在用之當做返回值,存在則通過splice方法移除
  delete (value) {
    let result = this.has(value)

    if (result) {
      this.value.splice(this.value.indexOf(value), 1)
    }

    return result
  }
  // 重新賦值一個空陣列，即實現clear方法
  clear () {
    this.value = []
  }
  // 通過forOf遍歷 values返回的迭代物件，實現forEach
  forEach (callback, thisArg) {
    forOf(this.values(), (value) => {
      callback.call(thisArg, value, value, this)
    })
  }
  // 返回一個迭代物件，該物件中的值是Set中的value
  keys () {
    return new Iterator(this.value)
  }
  // 同keys
  values () {
    return this.keys()
  }
  // 返回一個迭代物件，不同keys和values的是其值是[value, value]
  entries () {
    return new Iterator(this.value, (value) => [ value, value ])
  }
  // 返回一個新的迭代器物件，該物件包含Set物件中的按插入順序排列的所有元素的值。
  [ Symbol.iterator ] () {
    return this.values()
  }
}

測試一把

執行 node test.js

size屬性和操作方法


const Set = require('./set')
const s = new Set()

s.add(1)
  .add(2)
  .add(NaN)
  .add(NaN)

console.log(s)  // Set { value: [ 1, 2, NaN ] }
console.log(s.has(1)) // true
console.log(s.has(NaN)) // true
console.log(s.size) // 3

s.delete(1)

console.log(s.has(1)) // false
console.log(s.size) // 2

s.clear()

console.log(s) // Set { value: [] }

上面的例子把Set的size屬性和操作方法過了一遍，打印出來的Set例項和原生的長得不太一樣，就先不管了。

遍歷方法

let s2 = new Set([ 's', 'e', 't' ])

console.log(s2) // Set { value: [ 's', 'e', 't' ] }
console.log(s2.keys()) // Iterator {}
console.log(s2.values()) //  Iterator {}
console.log(s2.entries()) //  Iterator {}

console.log([ ...s2 ]) // [ 's', 'e', 't' ]
console.log([ ...s2.keys() ]) // [ 's', 'e', 't' ]
console.log([ ...s2.values() ]) // [ 's', 'e', 't' ]
console.log([ ...s2.entries() ]) // [ [ 's', 's' ], [ 'e', 'e' ], [ 't', 't' ] ]

s2.forEach(function (value, key, set) {
  console.log(value, key, set, this)
})

// s s Set { value: [ 's', 'e', 't' ] } global
// e e Set { value: [ 's', 'e', 't' ] } global
// t t Set { value: [ 's', 'e', 't' ] } global

s2.forEach(function () {
  console.log(this)
}, { name: 'qianlongo' })

// { name: 'qianlongo' }
// { name: 'qianlongo' }
// { name: 'qianlongo' }

// {name: "qianlongo"}
// {name: "qianlongo"}
// {name: "qianlongo"}

for (let value of s) {
  console.log(value)
}
// s
// e
// t

for (let value of s.entries()) {
  console.log(value)
}
// ["s", "s"]
// ["e", "e"]
// ["t", "t"]

遍歷方法看起來也可以達到和前面例子一樣的效果,原始碼實現部分基本就到這裡啦，但是還沒完...

  1. 為什麼[ ...s2 ]可以得到陣列[ 's', 'e', 't' ]呢？
  2. s2 為什麼可以被for of迴圈呢？

iterator(迭代器)

從MDN找來這段話，在JavaScript中迭代器是一個物件，它提供了一個next() 方法，用來返回序列中的下一項。這個方法返回包含兩個屬性：done(表示遍歷是否結束)和 value（當前的值）。

迭代器物件一旦被建立，就可以反覆呼叫next()。


function makeIterator(array){
  var nextIndex = 0

  return {
    next: function () {
      return nextIndex < array.length ?
        { done: false, value: array[ nextIndex++ ] } :
        { done: true, value: undefined }
    }
  };
}

var it = makeIterator(['yo', 'ya'])

console.log(it.next()) // { done: false, value: "yo" }
console.log(it.next()) // { done: false, value: "ya" }
console.log(it.next()) // { done: true, value: undefined }

這個時候可以講一下我們的iterator.js中的程式碼了

class Iterator {
  constructor (arrayLike, iteratee = (value) => value) {
    this.value = Array.from(arrayLike)
    this.nextIndex = 0
    this.len = this.value.length
    this.iteratee = iteratee
  }

  next () {
    let done = this.nextIndex >= this.len
    let value = done ? undefined : this.iteratee(this.value[ this.nextIndex++ ])

    return { done, value }
  }

  [ Symbol.iterator ] () {
    return this
  }
}

Iterator的例項有一個next方法，每次呼叫都會返回一個done屬性和value屬性，其語意和前面的解釋是一樣的。


let it = new Iterator(['yo', 'ya'])

console.log(it.next()) // { done: false, value: "yo" }
console.log(it.next()) // { done: false, value: "ya" }
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例項本身，它是一個可以被迭代的物件。

[ Symbol.iterator ] () {
  return this
}

到這裡上面的問題2就可以解釋通了。

再看看問題1 為什麼[ ...s2 ]可以得到陣列[ 's', 'e', 't' ]呢？,原因也是我們給Set、keys、values、entries部署了Symbol.iterator，使之具有“iterator”介面,而擴充套件運算子...的特點之一就是任何具有Iterator介面的物件，都可以用擴充套件運算子轉為真正的陣列。

結尾

模擬過程中可能會有相應的錯誤，也不是和原生的實現完全一致。僅當學習之用，歡迎大家拍磚。

原文連結

參考

相關推薦

從零到有模擬實現一個Set類

前言 es6新增了Set資料結構，它允許你儲存任何型別的唯一值，無論是原始值還是物件引用。這篇文章希望通過模擬實現一個Set來增加對它的理解。 原文連結 用在前面 實際工作和學習過程中，你可能也經常用Set來對陣列做去重處理 let unique = (array

程式設計實現一個堆疊類Stack,要有push()壓棧方法,pop()出棧方法,clear()方法

  1*程式設計實現一個堆疊類Stack,要求需要含有push()壓棧方法,pop()出棧方法,clear()方法。 我們採用的是典型的封裝，這裡的堆疊採用先進後出的順序儲存資料，通過兩個傳統的堆疊操作來控制，這兩種方法分別是壓棧（pose）和出棧(pop). 如果在堆疊的上

python基礎作業------模擬實現一個ATM + 購物商城程序

setting water 轉賬 atm 結算 pan auth hide use 模擬實現一個ATM + 購物商城程序 作業需求： 額度 15000或自定義 實現購物商城，買東西加入 購物車，調用信用卡接口結賬 可以提現，手續費5% 每月22號出賬單，每月10號為還款日

模擬實現一個ATM + 購物商城程序

接口 模擬實現 bsp 日常 賬戶 操作日誌 信用卡 提現 信用 需求: 額度 15000或自定義 實現購物商城，買東西加入 購物車，調用信用卡接口結賬 可以提現，手續費5% 支持多賬戶登錄 支持賬戶間轉賬 記錄每月日常消費流水 提供還款接口 ATM記錄操作日誌 提供管

ATM：模擬實現一個ATM + 購物商城程序

模擬實現 操作日誌 提現 賬戶 管理 購物商城 裝飾 用戶 程序 額度 15000或自定義 實現購物商城，買東西加入 購物車，調用信用卡接口結賬 可以提現，手續費5% 支持多賬戶登錄 支持賬戶間轉賬 記錄每月日常消費流水 提供還款接口 ATM記錄操作日誌 提供管理接口，包括

03-從零玩轉JavaWeb-創建類與對象

view vid nsh 所在 javaweb ada img course spa 創建類創建對象 一、什麽是成員變量 對象的一些狀態特征使用成員變量表示 二、行為什麽什麽表示 對象的 行為 使用 方法 表

Algs4-1.2.11根據Date的API實現一個SmartDate類型

exc leg 閏年 整數 row -c nth -s lar 1.2.11根據Date的API實現一個SmartDate類型，在日期非法時拋出一個異常。答：參考資料：月份中的二月是28天還是29天，需看年份是否為閏年，閏年定義為：年份能被400整除的是閏年，或者年份能

從零開始仿寫一個抖音App——音視訊開篇

本文於掘金——何時夕，搬運轉載請註明出處，否則將追究版權責任。交流qq群：859640274 GitHub地址 大家好，距離上次本專題發文已經有五個星期了，中間發了兩篇非本專題的文章，可能很多人都以為我要棄坑了。但是並不是這回事，主要是工作有點忙，而且我在音視訊方面其實也有許多東西需要學習和整理。那

從零開始創建一個 PHP 擴展

命令 配置 try must 開始 rem 目錄 extension 就是 創建一個擴展的基本步驟都有哪些。示例中，我們將實現如下功能： <?phpecho say();?> 輸出內容： $ php ./test.php$ hello word 在擴展中實現一個

如何用兩個棧模擬實現一個佇列? 如果這兩個堆疊的容量分別是m和n（m>n)，你的方法能保證佇列的最大容量是多少？

保證入隊完畢之後才可以出隊； 分析：棧的特點是“後進先出(LIFO)”，而佇列的特點是“先進先出(FIFO)”。用兩個棧模擬實現一個佇列的基本思路是：用一個棧作為儲存空間，另一個棧作為輸出緩衝區，入隊時把元素按順序壓入兩棧模擬的佇列，出隊時按入隊的順序出棧即可。 　　　　　如下圖，用容

從零開始仿寫一個抖音App——基於FFmpeg的極簡視訊播放器

本文發於掘金——何時夕，搬運轉載請註明出處，否則將追究版權責任。交流qq群：859640274 GitHub地址 好久不見，最近加班比較多所以第二篇音視訊方面的文章 delay 了一週，大家多包涵哈。本文預計閱讀時間二十分鐘。 本文分為以下章節，讀者可以按需閱讀 1.FFmpeg原始碼

Python+Flask+Gunicorn 專案實戰(一) 從零開始，寫一個Markdown解析器 —— 初體驗

      （一）前言 在開始學習之前，你需要確保你對Python, JavaScript, HTML, Markdown語法有非常基礎的瞭解。專案的原始碼你可以在 https://github.com/zhu-y/markdown-toolkit 找到，最後的

Linux下模擬實現一個微型shell

首先我們先看一下shell的執行過程：               shell從使用者讀入字串"ls",並建立一個新的程序，在那個程序中執行ls程式並等待那個程序結束。然後shell讀取新的一行輸入，建立一個新的程序，在這個程序中執行程式並等待這個程序結束。 所以我

模擬實現一個ATM + 購物商城程式

先說最重要的地方，怕忘記在把各個模組做完後記得在最外面的資料夾下，滑鼠點選右鍵找到以下圖片上的東西點選，不然程式不能執行 day6 #ATM主程目錄    ├── __init__.py ├──  acc_operation #使用者選擇命令操作    │  

c++實現一個日期類

#pragma once #include <iostream> using namespace std; class Date { private: int _year; int _month; int _day; int GetMonthDa

C++ 宣告並實現一個日期類(運算子過載)

/****************************************************************************************** date.hpp: Copyright (c) Bit Software, Inc.(2

用C/C++實現一個日期類，過載運算子=，==，+，-，++，--，>，>=，

#include<iostream> #include<windows.h> using namespace std; class Date { public: Date(int year, int month, int day) //建構函式

用C++實現一個日期類

最近在複習C++的時候發現日期類是一個非常有用的類，在現實中是非常實用的（雖然我不知道為什麼這麼實用的類，庫裡沒有）以下是我自己實現的日期類的程式碼，因為大部分都是運算子的過載，所以理解起來應該並不難 #include <iostream> #include &

JAVA實驗二：利用二維陣列（double[]）實現一個矩陣類：Matrix的相乘、轉置、相加等

題目：利用二維陣列（double[]）實現一個矩陣類：Matrix。 要求提供以下方法： （1）set（int row, int col, double value）：將第row行第col列的元素賦值為value； （2）get（int row，int col）：取第row行第c

從零開始仿寫一個抖音App——跨平臺視訊編輯SDK專案搭建

本文發於掘金——何時夕，搬運轉載請註明出處，否則將追究版權責任。交流qq群：859640274 GitHub地址 不知不覺已經到了2019年，本系列的文章也更新到了8篇。很慶幸筆者能堅持下來，從我司的程式碼中學習到了很多東西。當然更慶幸的是收穫了眾多讀者的鼓勵和支援。從本篇文章開始，我們將接觸短視訊