es6 手动实现 map模拟es6原生map效果

简介: es6 手动实现 map模拟es6原生map效果
 /**
         * @description: 手动实现一个map 
         */
        const MyMap = (() => {
            const judgeIterator = Symbol("判断是否为可迭代的对象函数");
            const judgeExitByKey = Symbol("通过键来判断迭代器里面是否存在对应的键值对");
            const isEqual = Symbol("判断两个值是否相等的函数");
            const datas = Symbol("用来保存所有的键值对");
            return class MyMap {
                constructor(iterator = []) {
                    this[datas] = [];
                    // 用一个对象来组装对应的键值对
                    if (this[judgeIterator](iterator)) {
                        // 第一次迭代获取每一个键值对
                        for (const item of iterator) {
                            // 判断对应的键值对是否为一个可迭代的对象
                            if (this[judgeIterator](item)) {
                                // 生成一个一个迭代器
                                const generatorIterator = item[Symbol.iterator]();
                                // 初始化第一个参数,也就是map的key
                                const key = generatorIterator.next().value;
                                // 获取第一个参数, map key 对应的值
                                const value = generatorIterator.next().value;
                                // 把对应的键值对加入到map里面去,但是要判断map里面是否存在
                                this.set(key, value)
                            }
                        }
                    }
                }
                /**
                 * @description:  判断一个对象是否为一个可迭代对象
                 * @param :  输入的对象
                 * @return:  {boolean} 结果
                 */
                [judgeIterator](obj) {
                    if (typeof obj[Symbol.iterator] !== "function") {
                        throw new Error(`你输入的${obj}不是一个可迭代对象`)
                    }
                    return true;
                }
                [judgeExitByKey](key) {
                    for (const item of this[datas]) {
                        // 获取对应的键
                        if (this[isEqual](key, item.key)) {
                            return item;
                        }
                    }
                    return undefined;
                }
                /**
                 * @description: 判断两个值是否相等
                 * @param : data1 需要判断的第一个值
                 * @param : data2 需要判断的第er个值
                 * @return:  返回结果
                 */
                [isEqual](data1, data2) {
                    if (data1 === 0 && data2 === 0) {
                        return true;
                    }
                    return Object.is(data1, data2);
                }
                /**
                 * @description: 通过键来判断map里面是否存在
                 * @param : key 键
                 * @return: {boolean} 结果
                 */
                has(key) {
                    return this[judgeExitByKey](key) !== undefined;
                }
                /**
                 * @description: 给map设置值
                 * @param : key 设置的key
                 * @param : value 设置的value
                 * @return: 
                 */
                set(key, value) {
                    if (this.has(key)) {
                        // 如果存在,那么就要修改对应键值对的值
                        let obj = this[judgeExitByKey](key);
                        obj.value = value;
                    } else {
                        // 否则就直接添加
                        this[datas].push({
                            key,
                            value,
                        })
                    }
                }
                /**
                 * @description: 通过键来删除对应的键值对 
                 * @param :  key
                 * @return: 结果
                 */
                delete(key) {
                    for (let i = 0; i < this[datas].length; i++) {
                        const element = this[datas][i];
                        if (this[isEqual](key, element.key)) {
                            this[datas].splice(i, 1);
                            return this[datas];
                        }
                    }
                }
                /**
                 * @description: 获取map的长度
                 */
                get size() {
                    return this[datas].length;
                }
                /**
                 * @description: 清空map
                 */
                clear() {
                    this[datas].length = 0;
                }
                *[Symbol.iterator]() {
                    for (const item of this[datas]) {
                        yield [item.key, item.value];
                    }
                }
                /**
                 * @description: map 的forEach 方法
                 */
                forEach(callback) {
                    for (const item of this[datas]) {
                        callback(key, value, this[datas]);
                    }
                }
            }
        })()
    // 调用
        const arr = [['a', 1], ['b', 2], ['c', 4], ['a', 5]]
        const mp = new MyMap(arr); // 和map 的使用是一样的
相关文章
|
7月前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
106 3
|
3月前
ES6中map对象的使用,确实比Object好使哈
ES6中Map对象的使用优势,包括任意类型作为键、直接获取大小、增删查改操作等。Map的键可以是函数、对象、NaN等,支持forEach循环和for...of循环。
35 1
ES6中map对象的使用,确实比Object好使哈
|
3月前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
4月前
|
存储 JavaScript 前端开发
ES6新特性(四): Set 和 Map
ES6新特性(四): Set 和 Map
|
5月前
|
存储 JavaScript 前端开发
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
58 1
|
5月前
|
存储 JavaScript 前端开发
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(一)
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(一)
43 0
|
7月前
|
存储 JavaScript
ES6+新特性-Symbol与Set/Map数据结构
ES6 引入了三种新的数据结构:Symbol、Set和Map。Symbol是唯一且不可变的值,常用于定义对象的独特属性;Set存储不重复值,适合数组去重;Map则是键值对集合,键可为任意类型,提供了更灵活的存储方式。这些新数据结构提供了更高效的操作手段,分别解决了属性命名冲突、数据去重和复杂键值对存储的问题。示例展示了如何使用Symbol、Set和Map进行基本操作。
|
7月前
|
存储 前端开发 索引
【Web 前端】ES6中,Set和Map的区别 ?
【5月更文挑战第1天】【Web 前端】ES6中,Set和Map的区别 ?
|
7月前
|
JavaScript 前端开发 Java
ES6 逐点突破系列 -- Set Map,工作感悟,完美收官
ES6 逐点突破系列 -- Set Map,工作感悟,完美收官
|
7月前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可为任意类型,有序且支持get、set、has、delete操作;Set存储唯一值,提供add、delete、has方法。两者皆可迭代。示例展示了Map和Set的基本用法,如添加、查询、删除元素。
40 2