JS手写set与map

于 2024-04-25 23:31:13 发布
阅读量736 收藏 11
点赞数 29
分类专栏： 网页 文章标签： javascript java 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46244470/article/details/138171052
版权

目录

set

set是一个没有重复元素的集合，事实上我们无法完全的使用js来模拟出set的全部功能，因为浏览器原生的set底层是使用c++实现，能直接访问内存，所以我们只能实现set的一部分功能
这里我们使用class来实现
具体关于class的部分可以看我这篇文章
class

add

首先我们有了一个mySet类，这个类会接受一个可迭代对象，我们需要判断这个可迭代对象是否真的可迭代
判断依据就是每个可迭代对象内都有一个[@@iterator]成员，并且这个成员还是一个方法

class mySet {
    constructor(iterator) {
        if (typeof iterator[Symbol.iterator] !== "function") throw Error(`${iterator}不是可迭代对象`)
    }
}

接下来我们定义一个数组来存储相关数据，在构造方法内遍历这个可迭代对象，将其中的内容通过add方法填入数组中

class mySet {
    #data = []
    constructor(iterator) {
        if (typeof iterator[Symbol.iterator] !== "function") throw Error(`${iterator}不是可迭代对象`)
        for (const item of iterator) {
            this.add(item)
        }
    }
    add(item) {
    }
}

has与equals

set与普通数组最大不同的一点就在于set内的元素是不会重复的，所以我们在向数组中放入元素时需要提前判断一下该元素是否已在数组中
我们可以通过调用has方法来判断此元素是否在数组中

class mySet {
    #data = []
    constructor(iterator) {
        if (typeof iterator[Symbol.iterator] !== "function") throw Error(`${iterator}不是可迭代对象`)
        for (const item of iterator) {
            this.add(item)
        }
    }
    add(item) {
        if (!this.has(item)) this.#data.push(item)
    }
    has(item) {
    }
}

现在问题转变成了has方法怎么实现
我们可以遍历data数组，将传入的值通过Object.is来判断是否相同，如果相同就返回true，全部遍历完都没有返回的话就返回false
但是Object.is有一个问题，在Object.is中+0和-0被认为是两个不同的东西，所以我们需要将Object.is再封装一层，这个封装可有可无，但set内部是针对Object.is封装了的

class mySet {
    add(item) {
        if (!this.has(item)) this.#data.push(item)
    }
    has(item) {
        for (const iterator of this.#data) {
            if (mySet.#equal(item, iterator)) {
                return true
            }
        }
        return false;
    }
    static #equal(item1, item2) {
        if (item1 === 0 && item2 === 0) {
            return false
        }
        return Object.is(item1, item2)
    }
}

我们封装了一个静态方法equal用来比较传入的两个值是否相等

delete

接下来我们就需要实现delete方法

class mySet {
    delete(item) {
        for (const iterator of this.#data) {
            if (mySet.#equal(item, iterator)) {
                this.#data.splice(i, 1)
            }
        }
    }
}

迭代器

我们知道set是能直接被forof遍历的，这说明了set内部是实现了迭代器，
迭代器（iterator），可以把它当做是一个接口，用户可以使用该接口来遍历数据而不需关心数据内部的实现细节
具体关于迭代器的部分可以看我这篇博客
迭代器与生成器

class mySet {
    *[Symbol.iterator]() {
        yield* Object.entries(this.#data)
    }
}

完整实现

我们接下来还有一些成员没有实现，如size，clear，forEach成员，具体代码如下

class mySet {
    #data = []
    constructor(iterator) {
        if (typeof iterator[Symbol.iterator] !== "function") throw Error(`${iterator}不是可迭代对象`)
        for (const item of iterator) {
            this.add(item)
        }
    }
    add(item) {
        if (!this.has(item)) this.#data.push(item)
    }
    has(item) {
        for (const iterator of this.#data) {
            if (mySet.#equal(item, iterator)) {
                return true
            }
        }
        return false;
    }
    delete(item) {
        for (const iterator of this.#data) {
            if (mySet.#equal(item, iterator)) {
                this.#data.splice(i, 1)
            }
        }
    }
    clear() {
        this.#data.length = 0
    }
    forEach(fn) {
        for (let i = 0; i < this.#data.length; i++) {
            const item = this.#data[i]
            fn(item, i, this)
        }
    }
    *[Symbol.iterator]() {
        yield* Object.entries(this.#data)
    }
    get size() {
        return this.#data.length
    }
    static #equal(item1, item2) {
        if (item1 === 0 && item2 === 0) {
            return false
        }
        return Object.is(item1, item2)
    }
}

测试代码

const myset = new mySet([12, 3, 56, 56, 5, 5]);
console.log(myset)
const set = new Set([1, 2, 3, 4, 5])
for (const iterator of myset) {
    console.log(iterator)
}

结果
结果

map

map和set类似，这里只描述map与set的不同点

  1. 在set中我们只需要针对constructor中传入的对象进行判断，而在map中我们需要针对对象中的各个元素进行判断是否可迭代

    constructor(iterator) {
    if (typeof iterator[Symbol.iterator] !== "function") throw Error(`${iterator}不是可迭代对象`)
    for (const item of iterator) {
        if (typeof item[Symbol.iterator] !== "function") {
            throw Error(`${item}不是可迭代对象`)
        }
        const iterator = item[Symbol.iterator]();
        const key = iterator.next().value;
        const value = iterator.next().value;
        this.set({
            key,
            value
        })
    }
}

    如果符合条件的话就将它的第一项拿出作为key，第二项拿出作为value，因为不能确定每个元素都是什么类型，所以只能通过迭代器去拿到相应的值

  2. 在set中我们需要大量的遍历，我们可以封装一个函数用来获取data中的元素

    #getObj(key) {

    for (const item of this.#data) {
        if (myMap.#equal(item.key, key)) {
            return item
        }
    }
    return undefined
}

    这个函数传入一个key，如果有的话返回该元素，没有的话就返回undefined，之后其他方法如果需要遍历数组来拿到元素，就可以使用这个方法

  3. 在构建迭代器的时候我们需要知道数组里存的元素是对象，在迭代的时候我们需要将它变为二维数组

    *[Symbol.iterator]() {
    for (const item of this.#data) {
        yield [item.key, item.value]
    }
}

最终代码

class myMap {
    #data = []
    constructor(iterator) {
        if (typeof iterator[Symbol.iterator] !== "function") throw Error(`${iterator}不是可迭代对象`)
        for (const item of iterator) {
            if (typeof item[Symbol.iterator] !== "function") {
                throw Error(`${item}不是可迭代对象`)
            }
            const iterator = item[Symbol.iterator]();
            const key = iterator.next().value;
            const value = iterator.next().value;
            this.set({
                key,
                value
            })
        }
    }
    set(item) {
        const obj = this.#getObj(item.key)
        if (this.has(item.key)) {
            obj.value = item.value
        } else {
            this.#data.push(item)
        }
    }
    has(key) {
        const item = this.#getObj(key)
        return item ? true : false
    }
    get(key) {
        return this.#getObj(key);
    }
    delete(key) {
        this.#data = this.#data.filter((value) => {
            if (value.key !== key) return value
        })
    }
    forEach(fn) {
        for (const item of this.#data) {
            fn(item.value, item.key, this)
        }
    }
    #getObj(key) {
        for (const item of this.#data) {
            if (myMap.#equal(item.key, key)) {
                return item
            }
        }
        return undefined
    }
    static #equal(item1, item2) {
        if (item1 === 0 && item2 === 0) {
            return false
        }
        return Object.is(item1, item2)
    }
    *[Symbol.iterator]() {
        for (const item of this.#data) {
            yield [item.key, item.value]
        }
    }
}

测试代码

const mymap = new myMap([[1, 'a'], [{ name: "a" }, 2], [null, 3], [undefined, 4], [5, null]])
console.log(mymap.get(null))
mymap.delete(undefined)
for (const item of mymap) {
    console.log(item)
}

结果

法玛梅林
关注
  • 29
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js代码-手写map 方法
07-15
js代码-手写map 方法
js代码-手写EventBus
07-15
接下来，我们分析`main.js`文件中可能实现的EventBus结构。 1. **初始化EventBus** EventBus通常是一个全局对象，我们可以创建一个构造函数来初始化它。构造函数内部可以设置一个空对象或Map来存储事件和对应的...
用JS手写map
AshesO的博客
03-29 1765
用JS手写map let arr = [3, 4, 5, 6, 7]; Array.prototype.newMap = function (fn, thisArg) { // 首先判断传入的第一个参数是否为函数, 如果不是则抛出错误 if (Object.prototype.toString.call(fn) !== "[object Function]") { throw ("The first argument must be a function") } // 定义一个空
JavaScript 手动封装Set集合（包括求交并差集）
jsphpyyds的博客
08-06 342
ES6的js新增了Set集合，为这门语言带来了集合数据结构，为了更深层次的理解Set集合底层封装机制，我们来手写一个Set集合。 首先要知道Set集合的内置方法和属性有哪些？ Set内置一个类似对象数组的一种数据结构，我们就用set数组来代替，同时还有一个size属性指向集合的总个数。 其他内置方法包括：增、删、查、遍历 接下来我们开始写代码： 'use strict' //迭代器 const mySet = function () { const wm = new WeakMap();
js 手写 map 函数
weixin_43613849的博客
11-26 374
map()函数理解 map函数是Array对象的一个方法，它可以返回一个新数组，不修改原来的数组。 array.map((item,index,arr)=>{}) map回调函数的三个参数，item是必须的，代表数组的每个元素，index可选，元素的下标值，arr可选，代表元素所属于的数组对象。每个元素都要执行回调函数的内容，返回一个新的数组。 比如： var array=[1,2,3] var new_array=array.map((item,index)=>{
js学习-手写map
qq_43762607的博客
04-13 806
手写map var arr=[1,2,3] //对数组中每个元素*2 var array=arr.map((item,index)=>{ return item*2 }) console.log(array); function map(arr,mapCallBack){ //检查传入的参数是否正确(第一个参数是否是数组,数组长度不为0,第二个参数是否是function)
js代码-手写代码练习---for ，for in ，for of ，foreach ，map ，reduce 遍历
07-15
3. **for...of循环**：这是ES6引入的新特性，用于遍历可迭代对象，如数组、Set、Map等。它比for循环更简洁，能直接获取到元素的值。例如： ```javascript for (let value of array) { console.log(value); } ``...
js代码-手写makeIterator遍历器
07-16
遍历器是ES6引入的一种新的数据访问接口，主要用于支持`for...of`循环，使得我们可以按顺序访问集合（如数组、Map、Set等）或自定义数据结构中的元素。在本主题中，我们将深入探讨`makeIterator`函数的实现原理以及...
js代码-手写代码练习
07-16
9. **ES6及以后的新特性**：包括箭头函数、解构赋值、模板字符串、类（class）、Set和Map数据结构、迭代器、生成器、async/await等，都是提升JS开发效率的重要工具。 10. **调试技巧**：学会使用浏览器的开发者工具...
JavaScript手写一个map方法
weixin_71893790的博客
12-10 190
手写map方法的实现
map的js实现
04-15
附件为map.js和测试html页面 博文链接：https://dote.iteye.com/blog/1756636
用js实现map功能
04-27
* Map对象，实现map功能 * put(key, value) 向map中增加键值对 * 例子: * var map = new Map(); * * map.put("key", "value"); * var val = map.get("key");
js 实现map的方式
09-02
js Map 对象，js map ，map ，键值对
js实现map用法
04-11
NULL 博文链接：https://hoochiang.iteye.com/blog/1688307
用JS对象实现map功能与方法
06-06
部分IE浏览器不支持ecmascript 6,无法使用map对象，用原生js对象实现map功能
JS 自己实现Map
weixin_30455023的博客
03-15 133
function MyMap() { var items = {}; this.has = function (key) { return key in items; }; this.set = function (key, value) { items[key...
js手写数组方法之map(),reduce(),filter(),foreach()
最新发布
weixin_50488897的博客
04-09 1584
javascript语言中,foreach、filter、map和reduce是常用的集合操作方法。本文详细介绍了这四种数组方法的使用方式,和手写方法。
手写map
small_ma
10-13 442
手写map SelfMap.prototype.getHash = function (key) {//计算key的hash值 let hash = 0; if (typeof (key) === 'string') {//String类型hash值 const seed = 31; let len = key.length; for...
java手写一个map
04-02
以下是一个简单的 Java Map 实现，使用数组和链表来解决哈希冲突问题： ```java public class MyMap<K, V> { private static final int DEFAULT_CAPACITY = 16; private Entry<K, V>[] table; private int size; public MyMap() { table = new Entry[DEFAULT_CAPACITY]; } public V put(K key, V value) { int hash = key.hashCode() % table.length; Entry<K, V> entry = table[hash]; if (entry == null) { entry = new Entry<K, V>(key, value); table[hash] = entry; size++; } else { while (entry.getNext() != null) { if (entry.getKey().equals(key)) { entry.setValue(value); return value; } entry = entry.getNext(); } if (entry.getKey().equals(key)) { entry.setValue(value); return value; } entry.setNext(new Entry<K, V>(key, value)); size++; } return value; } public V get(K key) { int hash = key.hashCode() % table.length; Entry<K, V> entry = table[hash]; while (entry != null) { if (entry.getKey().equals(key)) { return entry.getValue(); } entry = entry.getNext(); } return null; } public int size() { return size; } private static class Entry<K, V> { private final K key; private V value; private Entry<K, V> next; public Entry(K key, V value) { this.key = key; this.value = value; } public K getKey() { return key; } public V getValue() { return value; } public void setValue(V value) { this.value = value; } public Entry<K, V> getNext() { return next; } public void setNext(Entry<K, V> next) { this.next = next; } } } ``` 这个实现使用了一个数组来存储键值对，每个数组元素是一个链表，用来解决哈希冲突问题。在 `put` 方法中，先计算出键的哈希值，然后找到对应的链表头，遍历链表，如果找到了相同的键，则更新其值，否则在链表末尾添加新的键值对。在 `get` 方法中，也是先计算出键的哈希值，然后遍历对应的链表，寻找相同的键。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值