ES6笔记（ 九 ）- Set & Map

最新推荐文章于 2024-04-13 14:03:25 发布
最新推荐文章于 2024-04-13 14:03:25 发布
阅读量252 收藏
点赞数
分类专栏： ES6 文章标签： ES6 Set Map Set源码和Map源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44238796/article/details/107770730
版权

一直以来, JS只能使用数组和对象来保存多个数据, 缺乏像其他语言那样拥有丰富的集合类型, 因此, ES6新增了两种新的集合类型（ Set和Map ）, 用于在不同的场景中发挥作用

目录:

  1. Set
    • Set集合的创建
    • 对Set集合的后续操作
    • Set的最佳实践
    • 【 扩展 】手写Set
  2. Map
    • Map集合的创建
    • 对Map集合进行后续操作
    • 【 扩展 】手写Map
  3. 【 扩展 】WeakMap & WeakSet
    • WeakSet
    • WeakMap

Set

Set集合用于存放不能重复的数据

Set集合的创建

使用构造函数Set创建

const set = new Set();
console.log(set);

在这里插入图片描述

同时Set构造函数还可以接收一个可迭代对象（ iterable ）作为参数, iterable中的每一次迭代的结果会放进Set中作为初始值

const set = new Set([1, 2, 3, 4, 5, 5]);
console.log(set); // 上面的重复的5会被剔除掉

在这里插入图片描述

对Set集合后续操作

  • add: 添加一个数据到Set集合末尾, 如果数据已经存在则不进行任何操作

    const set = new Set();
set.add('hello');
set.add(1);
set.add({ a: 10 });
set.add(1); // 无效
console.log(set);

    在这里插入图片描述

    set使用Object.is的方式判断两个数据是否相等, 唯一的例外就是对+0和-0做了特殊处理, set认为+0和-0是相等的

  • has: 判断set集合中是否有对应的数据

    const set = new Set([1, 2, 3]);
set.add('hello');
console.log(set.has('hello')); // true

  • delete: 删除set集合中对应的数据

    const set = new Set([1, 2, 3]);
set.add('hello');
console.log(set.delete('hello')); // true , 表示删除成功

  • clear: 清空整个set集合

    const set = new Set([1, 2, 3]);
set.clear();
console.log(set); // set集合直接被清空啥玩意都没有了

    在这里插入图片描述

  • 遍历

    • 使用for…of循环
      const set = new Set([1, 2, 3]);
for(const item of set) {
    console.log(item); // 依次输出1, 2, 3 
}
    • 使用set实例方法forEach
      const set = new Set([1, 2, 3]);

// set集合中不提供访问索引的方法, 所以forEach的第一个参数和第二个参数都是值
set.forEach((value1, value2, self) => {
    console.log(value1, value2, self);
})
      在这里插入图片描述

  • size

    返回当前Set集合的元素个数（ 只读不可更改 ）

    const set = new Set( [1, 2, 3] );
console.log(set.size); // 3
Set的最佳实践

  1. 和数组的相互转换 + 数组去重

    const arr = [1, 2, 2, 3, 3, 4];
const set = new Set(arr); // 转化为set
console.log(set);
const newArr = Array.from(set); // 使用Array.from可以将set结构转化为数组
console.log(newArr);

    在这里插入图片描述

    我们可以发现, 在相互转换的过程中, 数组已经实现了去重操作

    上面的方式还可以写成如下, 因为set集合本身就是一个可迭代对象, 所以我们可以使用扩展运算符直接实现去重

    const arr = [1, 2, 2, 3, 3, 4];

const set = new Set(arr);

const newArr = [...set];

console.log(newArr); // [1, 2, 3, 4]

  2. 字符串的去重

    const str = 'hhhelloo';
const set = new Set(str);
const newStr = [...set].join('');
console.log(newStr) // helo

  3. 求两个数组的交集, 并集, 差集( 不能出现重复项 )

const arr = [33, 22, 55, 33, 11, 5];
const arr2 = [22, 55, 77, 88, 99, 99];

// 并集
const andSet = [...new Set([...arr, ...arr2])];
console.log(andSet); // [33, 22, 55, 11, 5, 77, 88, 99]

// 交集
const set = new Set(arr);

const intersection = [...set].filter( it => arr2.includes( it ) );

console.log(intersection);

// 差集 直接拿andSet做文章, 拿到并集 然后从并集里找 arr有arr2没有,  arr没有 arr2有

const diffrenteSet = andSet.filter( it => (arr.includes(it) && (!arr2.includes(it))) || ((!arr.includes(it)) && (arr2.includes(it))) )
【 扩展 】手写Set

OK, 我们直接来手写一个Set, 当然我们只能实现一样的功能, 官方的Set是通过底层写好的, 像一模一样的数据结构的样子我们没法实现, 我们可以实现他的所有Api和所有的系统功能帮助大家扩展视野

const MySet = (function () {
    // 判断传入的参数是不是迭代对象
    function validateIterable(iterator) {
        return typeof iterator[Symbol.iterator] === 'function';
    }


    // 判断两个数据是否相等
    function isEqual( fst, sec ) {

        if( fst === 0 && sec === 0 ) {
            return true;
        }

        return Object.is( fst, sec );

    }

    const _data = Symbol('_data');

    return class MySet {

        constructor(iterator = []) {

            // 验证传入的参数是否为可迭代对象
            const isIterable = validateIterable(iterator);

            if ( !isIterable ) {
                // 如果不是可迭代对象
                throw new TypeError('The param you provided is not iterable')
            }

            this[_data] = [];

            // 如果是可迭代对象, 直接for..of循环他找到他的每一项
            for ( const item of iterator ) {
                this.add(item); // 直接调用add方法
            }

        }
        // size直接用get定义返回当前数组的长度
        get size() {
            return this[_data].length;
        }

        // 用生成器给MySet提供可迭代接口
        *[Symbol.iterator]() {
            for( const item of this[_data] ) {
                yield item;
            }
        }

        // forEach遍历函数
        forEach( callback ) {
            for( const item of this[_data] ) {
                callback( item, item, this );
            }
        }

        add(data) {
            // 如果当前的集合里已经有data了, 我就不能再加了
            if( this.has(data) ) {
                return; 
            }
            this[_data].push(data);
        }

        delete( data ) {
            this[_data].forEach((it, index) => {
                if( isEqual( data, it ) ) {
                    this[_data].splice( index, 1 );
                }
            })
            return true;
        }

        has( data ) {
            for( const item of this[_data] ) {
                if( isEqual( data, item ) ) {
                    return true; // 只要找到一样的就返回true
                }
            }

            return false;
        }

        // 清空的方法
        clear() {
            this[_data] = [];
        }


    }


}())

const set = new MySet([2, 2, 3, 4, 4]);
console.log(set.has( 4 ))
set.add(10);

console.log(set);
set.delete(2);
console.log(set);

for(const item of set) {
    console.log(item);
}

在这里插入图片描述

你从constructor处开始看, 一层一层缕下去肯定可以看懂的, 代码不难

Map

Map集合用于专门存储多个键值对数据

在Map出现之前, 我们用对象存储键值对数据, 但是用对象存储键值对有一些问题

  1. 键名（ key ）只能是字符串, ES6才新增了符号
  2. 获取数据的数量不方便 （ 基本上只能这样: Object.keys.length）
  3. 键名（ key ）容易跟原型链属性冲突

在Map出来以后, 更好的解决了以上的问题, 但是并不代表我们以后就不用对象了, 结合实际情况自己怎么用着方便自己怎么用

Map集合的创建

跟Set一致, 我们直接使用构造函数Map创建

const map = new Map(); // 创建一个map
console.log(map);

在这里插入图片描述

我们也可以给Map传递一个iterator（ 可迭代对象 ）参数作为Map集合的初始值

注意: 虽然Map接收的是一个iterator, 但是他规定如下:

  1. 可迭代对象的每一项又必须是一个至少可以被迭代两次的可迭代对象（ 通常我们会写一个长度为2的数组 ）
  2. 每一项的可迭代对象的第一次迭代会被判定为Map成员的key, 第二次迭代结果会被判定为value（ 长度为2数组的0索引位代表Map成员的key值, 1索引位为Map成员的value值 ）
const map = new Map( [['name', 'loki'], ['age', 18] ] );

console.log(map);

在这里插入图片描述

对Map集合进行后续操作

  • set

    给Map集合添加一个新的成员, 接收两个参数

    • key: 代表该成员的键 ( 可以是任何类型 )
    • value: 代表该成员的值（ 可以是任何类型 ）
      如果键名已经存在（ 使用Object.is比较 ）, 则直接覆盖（ 区别于Set ）
    const map = new Map(['name', 'loki']);
map.set(3, 3);
map.set(() => {console.log('hello')}, 'foo');
map.set([1, 2, 3], 'arr');
console.log(map);

    在这里插入图片描述

    由于在Map结构里成员的键是不能重复的, 所以在使用引用值做键名的时候要记得处理好

  • get

    接收一个参数（ key ）, 根据传入的参数去Map数据结构中找到相对应的成员并返回成员值

    const map = new Map();
map.set('key', 'value');
console.log(map.get('key')); // value
console.log(map.get('name')); // undefined

  • has

    接收一个参数（ key ）, 用于判断传入的参数键是否存在

    const map = new Map();
map.set('key', 'value');
console.log(map.has('key')); // true

  • delete

    接收一个参数（ key ）, 用于在Map中删除该key所在的Map成员

    const map = new Map();
map.set('key', 'value');
console.log(map.get('key')); // value
map.delete('key');
console.log(map.get('key')); // undefined

  • clear

    清空Map结构所有成员

    const map = new Map([['key', 'value']]);
map.clear();
console.log(map.get('key')); // undefined

  • 遍历

    • for…of
    const map = new Map([['a', 10], [1, 2]])

for(const [key, value] of map) {
    console.log(key, value); // 依次输出a 10, 1 2
}
    • forEach
    const map = new Map([['a', 10], [1, 2]])

map.forEach( (value, key, self) => {
    console.log(value, key, self);
} )

    在这里插入图片描述

  • size

    返回当前Map集合的元素个数（ 只读不可更改 ）

    // Map是允许用其他任何数据结构作为Map成员的key值的
const map = new Map([[{a: 10}, 20]]);
console.log(map.size); // 1
【 扩展 】手写Map

有了上面Set的前车之鉴, 笔者这里就直接开始写喽


const MyMap = (function () {
    // 判断传入的参数是不是迭代对象
    function validateIterable(iterator) {
        return typeof iterator[Symbol.iterator] === 'function';
    }

    const _data = Symbol('_data');


    // 通过传入的key拿到对应的value值
    function getMapValue( key ) {
        for( const item of this[_data] ) {
            if( isEqual( item.key, key ) ) {
                return item;
            }
        }

    }

    // 判断两个数据是否相等
    function isEqual(fst, sec) {

        if (fst === 0 && sec === 0) {
            return true;
        }

        return Object.is(fst, sec);

    }


    return class MyMap {

        constructor(iterator = []) {

            // 验证传入的参数是否为可迭代对象
            const isIterable = validateIterable(iterator);

            if (!isIterable) {
                // 如果不是可迭代对象
                throw new TypeError('The param you provided is not iterable')
            }else {

                this[_data] = [];

                for( const item of iterator ) {

                    
                    // Map要求每一个Map成员也必须是一个可迭代对象
                    if( !validateIterable( item ) ) {
                        throw new TypeError('The param child you provided is not iterable')
                    }else {

                        

                        console.log( item );

                        const itemIterator = item[Symbol.iterator]();
                        const key = itemIterator.next().value; // 第一次迭代拿到key
                        const value = itemIterator.next().value; // 第二次迭代拿到value

                        this.set( key, value );


                    }

                }


            }

        }
        
        get size() {
            return this[_data].length;
        }


        set(key, value) {

            if(this.has( key )) {
                // 如果当前键已经存在了
                const item = getMapValue.call(this, key);
                item.value = value;

            }else {

                this[_data].push( { key, value } );

            }

        }


        has(key) {
            // console.log(this[_data]);
            
            for( const item of this[_data] )  { 
                return isEqual( item.key, key );
            }

            return false;

        }


        get(key) {

            const result = getMapValue.call(this, key);
            if(  result !== undefined ) {
                return result.value;
            }
        } 
        
        delete(key) {

            const result = getMapValue.call(this, key);
            if( result !== undefined ) {
                const index = this[_data].indexOf( result );
                this[_data].splice(index, 1);
            }

        }

        // 清空的方法
        clear() {
            this[_data] = [];
        }


    }


}())


const map = new MyMap([[1, 2], [3, 4]]);

console.log(map);

map.set( 1, 5 );
map.set( 10, 2 );

console.log(map);

console.log(map.get(1))

map.delete( 1 );

在这里插入图片描述

【 扩展 】WeakMap和WeakSet

WeakSet

使用该集合可以直接拥有Set的基本功能（ 有一些小区别 ）, 最大的不同是它内部存储的地址不会影响JS的垃圾回收, 详细的区分笔者在稍后有写到

我们来看一个Set的例子, 你就知道了

const obj = {
    name: 'loki',
    age: 17
}

const set = new Set([obj]);

obj = null;

console.log(obj);
console.log(set);

在这里插入图片描述

我们发现我们将obj置空以后, set中的value还在, 这就是JS的回收机制导致的一些尴尬情况

为什么会这样呢？ 因为我们创建了一个obj, 将引用值{ name: 'loki', age: 17 }的地址给了他, 这个时候我们将obj丢给set, 于是set的第零位也拿到了{name: 'loki', age: 17}的地址, 这个时候我们将obj置空, 但是JS不会释放掉{name: 'loki, age: 17'}的内存, 为啥, 因为set手里还攥着呢, 这个原因你要搞清楚就一定要理解引用值的真正原理

我们来看看WeakSet的情况

const obj = {
    name: 'loki',
    age: 17
}

const set = new Set([obj]);

obj = null;

// 这儿我为什么要放进setTimeout, 因为我们如果直接输出的话, 可能JS的垃圾回收机制还未运行, 所以可能会有不太OK的控制台效果
setTimeout(() => {
    console.log(obj);
    console.log(set);
}, 8000)

在这里插入图片描述

WeakSet和Set的区别
  1. WeakSet不影响垃圾回收
  2. WeakSet只能添加对象
  3. WeakSet不能遍历, 没有size属性
  4. WeakSet只有add, delete, has实例方法

其实2, 3, 4点都是因为第一点的存在而产生的副作用

WeakMap

类似于Map的集合, 跟Set一样, WeakMap和Map最大的区别就是WeakMap的成员不会影响垃圾回收

let obj = {
    name: 'loki',
    age: 18
}

const map = new WeakMap([[obj, 123]]);

obj = null;

setTimeout(() => {
    console.log(map);
}, 8000)

在这里插入图片描述

WeakMap和Set的区别
  1. WeakMap不影响垃圾回收
  2. WeakMap只能添加对象
  3. WeakMap不能遍历, 没有size属性
  4. WeakMap只有set, get, delete, has实例方法

反正WeakSet和WeakMap用的也比较少, 看着图个乐呵就好

_付宏
关注
专栏目录
ES6-ES10--学习笔记
qq_45728623的博客
08-06 539
一、概述 1、什么是ECMA ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。 2、什么是ECMAScript ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言； 百度百科：https://baike.baidu.com/history/ECMAScript/1889420/144946978 3、什么是
ES6 的新增语法
wuzhanhui0715的博客
06-11 338
文章目录前言一 ES6 的新增语法1.1 let1.1.1 经典面试题1.2 const（定义常量）1.3 let、const、var 的区别2 解构赋值2.1 数组解构2.2 对象解构3 箭头函数3.1 箭头函数不绑定this关键字4 剩余参数4 .1 剩余参数和解构配合使用5 ES6 的内置对象扩展5.1 Array 的扩展方法5.1.1 扩展运算符可以应用于合并数组。5.1.2 将类数组或可遍历对象转换为真正的数组5.1.3 构造函数方法：Array.from() 对每个元素进行
es6----set map应用场景
weixin_34381666的博客
02-19 531
1.数组去重 2.字符串去重 属性： Set.prototype.size：返回Set实例的成员总数。 Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。 add(value)：添加某个值，返回 Set 结构本身。 delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 has(value)：返回...
记录一下ES6中Map和Set的使用
qq_41995320的博客
11-18 253
记录一下ES6中Map和Set的使用
map和set
天涯海角
11-15 878
map和set是两个主要的关联容器。关联容器究竟是什么？它和顺序容器有什么区别？ 关联容器中的元素是按照关键字来保存和访问的；顺序容器中的元素是按照它们在容器中的位置来顺序保存和访问的。 map和set的底层都是通过红黑树来实现的，即中序遍历得到的序列是关键字的升序排列。然而关联容器还会由map和set衍生出一些类型。 multimap：关键字可以重复的map； multiset：关键字可以
JavaScript Set 的用法与理解
04-22 1630
JavaScript Set 的用法与理解
前端面试题 - 如何将 Set 集合转化为一个数组
拯救世界的光太郎
05-08 6896
什么是 Set 集合： Set 集合类似于一个数组，但是它要求里面是元素不可以有重复。 const set = new Set(['welcome', 'you', '!', 'you']); console.log(set); // Set { 'welcome', 'you', '!' } 可以看到，Set 的实例是一个对象，这个对象的内部结构很像一个数组，传递给 Set 构造函数的数组，其内部重复的元素最终只会保留一个。 将 Set 集合转化.
ES6学习笔记之Set和Map数据结构详解
12-03
在ES6中，Set和Map是两种新的数据结构，它们为JavaScript编程提供了更加强大的工具。Set主要用于存储唯一值，而Map则用于存储键值对。 Set数据结构： 1. **Set的创建与初始化**：Set是一个构造函数，用于创建Set...
ES6笔记--Set和Map
ljt2724960661的博客
03-27 232
Map和Set都叫做集合，但是它们也有所不同。Set常被用来检查对象中是否存在某个键名，Map集合常被用来获取已存的信息。 Set是有序列表，含有相互独立的非重复值。 创建Set: let set = new Set(); console.log(set); //在浏览器控制台的输出结果 Set(0) {} size:(...) ...
ES6-study-notes:学习ES6记录的相关笔记，会不断地进行更新
05-25
本笔记主要围绕ES6的关键知识点展开，以下是一些核心内容的详细解释：** 1. **变量声明与作用域** - **let 和 const**：替代了传统的 var，let 允许块级作用域，防止变量提升（hoisting）；const 声明常量，一旦...
ES6学习笔记（6）--set和map
星辰的笔记
12-18 216
Set
ES6的Set详解
qq_44741577的博客
02-05 2586
这里需要注意，Set 结构的键名就是键值（两者是同一个值），因此第一个参数与第二个参数的值永远都是一样的。由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。如果想在遍历操作中，同步改变原来的 Set 结构，目前没有直接的方法，但有两种变通方法。上面代码中，entries方法返回的遍历器，同时包括键名和键值，所以每次输出一个数组，它的两个成员完全相等。Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法。
ES6的Set结构用法总结
gw1105430831的博客
06-09 2580
关于ES6的Set结构的总结
Set简述与集合操作
hairy377的博客
10-31 159
Set对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用，是一种新集合类型。
JavaScript中Set的使用
m0_51636525的博客
06-11 9926
在ES6之前，我们主要使用数组、对象来存储数据；在ES6中新增了另外两种数据结构：Set、Map和WeakSet、WeakMap。Set有点类似于Array数组，但是和数组的区别是Set的元素不能重复。先不考虑Set的创建方法，通过案例来演示Set和Array数组的区别。我们需要通过Set的构造函数创建Set（没有字面量创建的方式）...............
笔记_ES6_Map&Set
CDTZYXZZY的博客
09-16 162
ES6新数据类型Map&Set学习笔记
ES6学习笔记之map、set与数组、对象的对比
11-28
在ES6中，JavaScript引入了两种新的数据结构：Map和Set，这为开发者提供了更丰富的数据组织方式。本文将对比Map、Set与传统的Array和Object，探讨它们在增、查、改、删操作上的差异。 1. **Map与Array的对比** - *...
Set使用方法
我的博客
02-25 1346
Set 是一个集合， 没有key， set集合内部的值是唯一的； Set 语法 new Set(iterable) 创建set， 可以传入可迭代的对象，一般是数组 set.add(value) 添加值到set中， 返回set本身 set.delete（value） 删除值， 值存在返回true， 否则返回false set.has（value） 判断value是否在set中，在返回true， 否则返回false set.clear() 清空set set.size 返回集合个数，类似length ​.
数据结构之Set | 让我们一块来学习数据结构
知秋
05-12 224
数组(列表)、栈、队列和链表这些顺序数据结构对你来说应该不陌生了。现在我们要学习集合，这是一种不允许值重复的顺序数据结构。我们将要学到如何创建集合这种数据结构，如何添加和移除值，如何搜索值是否存在。你也会学到如何进行并集、交集、差集等数学运算。 本章内容包括： 从头创建一个 Set 类 用 Set 来进行数学运算 构建数据集合 集合是由一组无序且唯一(即不能重复)的项组成的。该数据结构使...
ES6: set和map数据结构以及使用场景
最新发布
ZMN0057的博客
04-13 1566
D3.js:D3.js是一个数据可视化库，它使用 Set 来管理数据的唯一性，以及使用 Map 来存储数据映射关系，例如数据和图形元素之间的对应关系。Map是一种键值对的集合，其中键和值可以是任意类型的。它的使用场景包括需要存储键值对并需要快速查找的场景，比如存储对象之间的关联关系、缓存数据等。Set是一组唯一值的集合，适用于需要存储唯一值并需要快速查找的场景，比如数据去重、存储一组唯一的用户标识等。Set 中的值是不重复的，重复的值将被自动去重。的集合，它的值可以是任何类型。Set 是一种有序且。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值