set和map的使用

最新推荐文章于 2024-09-02 10:33:24 发布

zimingyo

最新推荐文章于 2024-09-02 10:33:24 发布

阅读量143

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/zimingyo/article/details/126763830

js 专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了 JavaScript 中的 Set 和 Map 数据结构。Set 用于存储不重复的值，通过 add、has、size 和 delete 方法进行操作。Map 用于存储键值对，支持键为任意类型，提供了 set、get、has 和 delete 方法。此外，还展示了如何使用 Set 去除数组重复元素，以及遍历 Set 和 Map 的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

set与map

set

定义：const set =new Set();

<script>
        const set =new Set();
        // add添加
        set.add(1);
        set.add(2);
        console.log(set);             //{1,2}


        const set1 =new Set([1,2]);
        console.log(set1);           //{1,2}
        set1.add(3);
        console.log(set1);
        //has检测元素的存在
        console.log(set1.has(1));    //true
        //size检测集合的长度
        console.log(set1.size);      // 3
        //delete删除集合中的元素
        set1.delete(1);
        console.log(set1);           // {2,3}

        //方法一：使用转运算符，将集合转换成数组
        console.log([...set1]);      // [2,3]

        // 方法二：集合转数组
        console.log(Array.from(set1));  // [2,3]


        //去除重复元素（利用set的唯一性，先将数组放入集合去重，然后转回新数组）
        const arr =[1,2,3,1];
        console.log([...new Set(arr)]);  // [1,2,3]

    </script>

注意：NaN和引用类型
引用类型：Object类型，Function类型，Array类型，RegExp类型，Date类型，基本包装类型及单体内置对象（Globle,Math）

例（Object）

 const arr1=[1,2,{},{},3];
 console.log([...new Set(arr1)]);  // [1,2,{},{},3] 因为{}两个的地址不同

例（NaN）

const arr2=[1,2,NaN,NaN,3];
console.log([...new Set(arr2)]);  // [1,2,NaN,3]

遍历

 const S=new Set(['a','b','c']);
 console.log(S);                   // {'a','b','c'}
 S.forEach(value => console.log(value)); //a b c
 // =>是箭头函数

map

定义：const map = new Map()

map.set(键,值);

<script>
        const map = new Map();
        //map.set(键，值);
        map.set('wzm',22);
        map.set(11,'uuu');
        console.log(map);   //{'wzm' => 22, 11 => 'uuu'}

        //二维数组
        const map1 = new Map([['wzm',22],[11,'uuu']]);
        console.log(map1);   //{'wzm' => 22, 11 => 'uuu'}

        //has检查map集合是否拥有该元素
        console.log(map1.has('wzm'));   //true

        //get获取集合元素的值
        console.log(map1.get('wzm'));   //22

        //delete删除集合中的某个元素
        map1.delete(11);
        console.log(map1);              //{'wzm' => 22}


    </script>