js中的Map和Set对象

已于 2022-05-19 16:12:17 修改
阅读量2.1k 收藏 4
点赞数 1
分类专栏： js 文章标签： javascript 前端
于 2022-05-19 16:10:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nbsl_/article/details/124865470
版权
一、Map对象

  1. Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者原始值）都可以作为一个键或一个值。

    1. map.set(key,value) 设置值
    2. map.get(key) 获取值
    3. map.size()获取集合的大小
    4. map.delete(key)删除map的某一项
    5. map.has(key) 查看map集合是含有该键元素
    6. map.clear()清除所有的键值对
    const map = new Map()
// 1. map.set(key,value)是设置值
map.set('a', 1)
map.set('b', 2)
map.set('c', 3)
map.set(NaN, 4)
console.log(map);
// 2. 根据键获取值需要使用map.get(key)方法
console.log(map.get('a'));
// 3. 获取map集合的大小 map.size
console.log(map.size);
// 4. 根据map.has(key)判断是否含有这个元素
console.log(map.has('a'));
// 5. map.delete(key)来删除map集合的某一项
map.delete('a')
console.log(map);
// 6. map.clear清除所有键值对
map.clear()
console.log(map);
// Map构造函数
// 实例属性
/*
  上面的6个方法对应6个原型方法
  1. Map.prototype.set()
  2. Map.prototype.get()
  //实例属性
  3. Map.prototype.size
  4. Map.prototype.clear()
  5. Map.prototype.delete()
  6. Map.prototype.has()
  NaN也可以做map的键
*/
    1. NaN也可以作为map的键 因为NaN！=NaN
        var map=new Map()
    map.set(NaN,'111')
    console.log(map);
    console.log( map.get(NaN));
	//Map(1) {NaN => '111'}
	//11

    1. 可以使用forEach和for of迭代map

      1. for of 迭代
          var map=new Map()
    //第一种创建map集合形式 空集合 然后添加
    map.set('a',1)
    map.set('b',2)
    map.set('c',3)
    map.set('d',4)
    map.set('e',5)
    map.set('f',6)
    console.log(map);
    // 获取键和值
    for (const [key,value] of map) {
      console.log(`${key},${value}`);
    }
    // 获取键
    for (const keys of map.keys()) {
      console.log(keys);
    }
    // 获取值
    for (const value of map.values()) {
      console.log(value);
    }
    // 获取键和值
    for (const [key,value] of map.entries()) {
      console.log(`${key},${value}`);
    }
      1. forEach迭代
      	//第二种创建集合方式 new的时候 直接添加
	var map=new Map([
      ['a',1],
      ['b',2],
      ['c',3],
      ['d',4],
    ])
    // console.log(map);
    map.forEach((value,key) => {
      console.log(`${value},${key}`);
    });
      1. map和和数组之间的关系
        1. map可以把一个二维键值对数组转为map集合
          var arr=[['a',1],['b',2]]
    var map=new Map(arr)
    console.log(map);
    console.log(map.get('a'));
	//1
      1. Array.form可以 把map集合转为二维数组键值对
          var arr=[['a',1],['b',2]]
    var map=new Map(arr)
    console.log(map);
    console.log(map.get('a'));
    let newArr=Array.from(map)
    console.log(newArr);
-------------------------------------------------------------
    //简单的当时做上面的事情
    console.log([...map]);
	//把map的键转为数组	
    console.log([...map.keys()]);
	//把map的值转为数组
    console.log([...map.values()]);

    2. 复制或者合并map

          var map1=new Map([
      ['a',1],
      ['b',2]
    ])
    var map2=new Map(map1)
    console.log(map2.get('a'));
    console.log(map1==map2);
    //不为同一个对象的引用
    var map3=new Map([
      ['aa',11],
      ['bb',22],
      ['cc',33]
    ])
    var map4=new Map([
      ['dd',44],
      ['aa',000]
    ])
    var merge=new Map([...map3,...map4])
    //合并map 当二者key一致时，后面会覆盖前面
    console.log(merge);

    3. map与数组合并为map

          var map5=new Map([
      ['aaa',111],
      ['bbb',222]
    ])
    var map6=new Map([
      ['ccc','333']
    ])
    var merge2=new Map([...map5,...map6,['ddd',444]])
    console.log(merge2);
二、Set对象

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

set对象是值的集合，你可以按照插入顺序迭代它的元素。set元素只会出现一次，即set元素是唯一的

  1. NaN和undefined都可以存储在Set中，NaN之间被视为相同的值
  2. set.add(value) 添加元素
  3. set.delete(value) 删除元素
  4. set.size() 获取set集合大小
  5. set.has(value) 判断是否有value 返回布尔值
  6. set.clear() 删除value的而所有元素
  7. set.entries() 返回迭代器对象 键和值相等
  8. set.keys() 返回迭代器对象所有的key
  9. set.values() 返回迭代器对象所有的value 且和8不相等
  10. set.forEach(callback(key,value,self)=>{})
    let mySet = new Set()
    mySet.add(1)
    mySet.add(2)
    mySet.add('something')
    mySet.add({ a: 1, b: 2 })
    console.log(mySet.has(1));
    console.log(mySet.has('something'));
    console.log(mySet.size);
    mySet.delete(1)
    console.log(mySet);
    console.log(mySet.entries());
    // value=>value
    console.log(mySet.keys());
    console.log(mySet.values());
    console.log(mySet.keys()==mySet.values());
	//set迭代
    mySet.forEach((keys,values,self)=>{
      console.log(`${values} ${keys} ${self}`);
    })
	//数组去重
    let arr = [1, 5, 2, 1, 5, 1, 52, 1]
    console.log([...new Set(arr)]);

  1. 迭代set

    1. for of
        var set=new Set([1,2,3,4,5])
    for (const item of set) {
      console.log(item);
    }
    for (const key of set.keys()) {
      console.log(key);
    }
    for (const value of set.values()) {
      console.log(value);
    }
    for (const [key,value] of set.entries()) {
      console.log(`${key},${value}`);
    }
    1. forEach
        var set=new Set([1,2,3])
    set.forEach(value=>{
      console.log(value);
    })

  2. set和数组之间转换

    1. 使用Array.form(set) 转为数组 也可以使用[…set]转为数组
    2. 使用new Set(arr) 转为set
        var set=new Set([1,2,3])
    console.log(set);
    let arr=Array.from(set)
    console.log(arr);

  3. 使用set求差集合交集

        var set1=new Set([1,3,5,8])
    var set2=new Set([2,3,7,9])
    let sum=new Set([...set1].filter(v=>set2.has(v)))
    console.log(sum);
    let diff=new Set([...set1].filter(v=>!set2.has(v)))
    console.log(diff);

  4. set实现基本集合操作

        // 1. 判断是不是父集的子集
    function isSuperSet(set,subset){
      for (const item of subset) {
        if(!set.has(item))
        {
          return false
        }
      }
      return true
    }
    var set1=new Set([1,2,3,4,5])
    var set2=new Set([1,2,3,0])
    console.log(isSuperSet(set1,set2));
    // 2. 求并集
    function union(setA,setB){
      let union1=new Set(setA)
      for (const item of setB) {
        union1.add(item)
      }
      return union1
    }
    var set3=new Set([1,2])
    var set4=new Set([1,2,4])
    console.log(union(set3,set4));
    // 3. 求交集
    function intersection(setA,setB){
      var newSet=new Set()
      for (const item of setA) {
        if(setB.has(item))
        {
          newSet.add(item)
        }
      }
      return newSet
    }
    var set5=new Set([1,2,5])
    var set6=new Set([1,3,4])
    console.log(intersection(set5,set6));
    // 4. 求差集
    function difference(setA,setB){
      var set=new Set(setA)
      for (const item of setB) {
          set.delete(item)
      }
      return set
    }
    var set7=new Set([1,2,5])
    var set8=new Set([1,3,4])
    console.log(difference(set7,set8));
    // 5.求对等差集 就是二者不同的地方的合集
    function symmetricDifference(setA,setB)
    {
      var newSet=new Set(setA)
      for (const item of setB) {
        if(newSet.has(item))
        {
          newSet.delete(item)
        }
        else{
          newSet.add(item)
        }
      }
      return newSet
    }
    var set9=new Set([1,2,5])
    var set10=new Set([1,3,4])
    console.log(symmetricDifference(set9,set10));

  5. 与String相关

        var str='helloWorld'
    var set=new Set(str)
    console.log(set);
	//返回['h','e','l','l','o',W','o','r','l','d']的set集合
爱编程的梨清
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6中Symbol、Set和Map用法详解
01-19
本文实例讲述了ES6中Symbol、Set和Map用法。分享给大家供大家参考，具体如下： Symbol 1.Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种分别是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）； 2.Symbol 值通过Symbol函数生成，可以作为对象的属性名使用，保证不会与其他属性名产生冲突； let s = Symbol(); typeof s // symbol ps：上面代码表示创建一个Symbol变量，值得
javascript模拟map，set类,用起来挺方便的！！！
01-15
1.可以用null,boolean,string,number,array,Date,自定义类的对象作键值，数组里的元素必须是实现equals方法的类型，而且数组里含有null,undefined,NaN会弹出异常； 2.数组维数尽量不要太多，程序里递归检查数组元素，会影响效率
JavaScript——Set和Map基础用法
、子筱的博客
03-18 336
Set ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 基本用法 Set.prototype.size：返回Set实例的成员总数。 Set.prototype.add(value)：添加某个值，返回 Set 结构本身。 Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。 Set.prototype.clear()：清除所有
js中 map的更新和清空
最新发布
桃李不言的博客
03-06 427
map的更新和清空
javascript实现java的map对象，js实现new map()
dht91597的博客
07-26 736
分类： javascript（84） [html]view plaincopy print? /* *MAP对象，实现MAP功能 * *接口： *size()获取MAP元素个数 *isEmpty()判断MAP是否为空 *clear()删...
jsmap数据结构.pdf
07-11
jsmap数据结构 数据结构 Map 对象保存键值对，并且能够记住键的原始插⼊顺序。任何值(对象或者) 都可以作为⼀个键或⼀个值。 map对象常⽤于保存键值对，它的键是任意数据类型，常⽤于建⽴数据的映射关系 和对象的区别：Object对象的key只能是字符串或者Symbol，map的key可是是任意数据类型;Map的key是有序的；map的键值对个数通过 size属性获取，对象只能⾃⼰统计 new Map(params)构造函数params可以接收⼆维数组"null"undefined;注意传⼊null"undefined其实也就相当于不传参数,直接new Map() 1.初始化 初始化map对象的三种⽅式 对象的三种⽅式 // 初始化map的三种⽅式 const map1 = new Map() map1.set(60, '及格') map1.set(80, '良') map1.set(90, '优秀') // 第⼆种⽅式 set⽅法返回的是当前map对象，因此可以采⽤链式写法 const map2 = new Map().set(60, '及格').set(80, '良').set
清空map的方法
m0_67390379的博客
04-28 1572
原文地址为： 清空map的方法 map<int ,int> mapinfo ; //直接将map删除了 mapinfo.clear(); //用map.erase(map.begin(),map.end())比较好 清空元素 gTaskDeal.matrix_info.erase(gTaskDeal.matrix_info.begin(),gTaskDeal.matrix_info.end()); 转载请注明本文地址： 清空map的方法 ...
JS使用map对数组进行处理，删除数组里面的数据
q1054007919的博客
05-26 4458
images.map((element, index) => { if (element.id === item.id) { images.splice(index, 1) } }) let arr=[ {name:'名称1',id:'1'} {name:'名称2',id:'2'} {name:'名称3',id:'3'} ] ......
JavaScript Map数据类型
Jackson_Mseven的博客
04-18 2812
详细描述了 JavaScript 的 Map 数据类型
JS11：Map和Set集合
搬运工
03-28 287
Map Map 对象存有键值对，其中的键可以是任何数据类型。 Map 对象记得键的原始插入顺序。 Map 对象具有表示映射大小的属性。 基本的 Map 方法 Method Description new Map() 创建新的 Map 对象。 set() 为 Map 对象中的键设置值。 get() 获取 Map 对象中键的值。
Js之map
lzsan_的博客
04-05 2401
与set区别：map必须声明键值。 创建 var map=new Map([ [1,1], [1,1], ['1',2], [[],3], [[],4], [true,5] ]); //自动去重 console.log(map);//{1 => 1, '1' => 2, Array...
浅谈JavaScript中ES6新增的Set和Map结构以及Array.from方法
01-08
1、Set ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成 Set 数据结构。 只能接受数组,采用new的方式来实例化使用。 创建Set机构时，可以立即设置内容，但Set必须接受数组作为参数。 常用的属性和方法有： size 属性： 获取该数据结构中,数据的数据个数 add() 方法： 向该数据结构中,追加新增数据 constructor：构造函数，默认就是Set函数 delete() 方法： 向该数据结构中,删除指定的数据 clear() 方法： 清除该数据结构中,所有的数据 has() 方法： 查询数据结构中
ES6新增数据类型set和map
01-20
文章目录前言1、Set2、Map 前言 JavaScript有一种数据类型叫对象，js中的数组算是一种新的类型，是一种特殊的对象，也是一种有序的对象，只是数据的组合方式不一样。 数据结构：数据是具体的东西，类型是一个范围，结构（集合）是数据的不同组合方式 1、Set 1.1 Set的概念和声明 Set是一种数据的集合，类似于数组，使用内置构造函数方式声明 const s=new Set(); console.log(s);//Set(0){} 在创建Set结构时，可以立即设置内容，但是Set必须接受数组作为参数 const s = new Set([1,hello,{},function
JS中Map对象的创建，遍历(7种)和使用(增删改查)
热门推荐
wuyujin1997的博客
03-22 5万+
intro JS中的Object类型实际上是一种键值对映射(key-value pairs)。 但是JS中这种键值对映射有点问题：key只能为string类型。 为了和其他编程语言有相似的数据结构(如Map, Dict等)，ES6中新增了Map类型。 API Map() 构造方法。 size 成员方法，返回map的大小。 set(key, value) - Map 新增键值对/修改值，可“链式调用...
垃圾收集器入门
特立独行的猿
10-08 216
垃圾收集器入门 1. GC的由来 C语言是如何清理内存的？ C语言本身是没有提供GC能力的，是程序员通过malloc来获取堆内存，通过free函数来释放内存。 那么让我想想，垃圾回收的执行逻辑跟业务操作是没有关系的。让我联想到“让程序员专注于业务开发“这句话，大师们应该会将垃圾回收这块工作给封装起来，下沉到高级语言的功能包中，于是Java，c++，c#…此类高级语言自带gc功能应运而生。 2. GC的步骤 关于GC，主要有以下步骤 第一步：哪些对象需要回收？ 第二步：如何回收？ 接下来，我围绕这2个步骤分
js删除键值对的方法
ShiningDays的博客
07-07 5600
删除键值对的方法
js Map用法
RayShyy的博客
03-01 8947
介绍 ECMAScript 6 以前，在 JavaScript 中实现“键/值”式存储可以使用 Object 来方便高效地完成，也就是使用对象属性作为键，再使用属性来引用值。但这种实现并非没有问题，为此 TC39 委员会专门为“键/值”存储定义了一个规范。 作为 ECMAScript 6 的新增特性，Map 是一种新的集合类型，为这门语言带来了真正的键/值存储机制。Map 的大多数特性都可以通过 Object 类型实现，但二者之间还是存在一些细微的差异。具体实践中使用哪一个，还是值得细细甄别。 基本API
js中的set和map-详解
qq_48109675的博客
09-16 2287
Set类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。Set 构造函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。
js中map和set的区别
03-24
在 JavaScript 中，Map 和 Set 都可以用来存储一组值，但它们的实现和用途不同。 Map 是一种键值对的集合，其中键可以是任何 JavaScript 数据类型，如字符串、数字、对象等。相比之下，Set 只存储值，而这些值可以是任何 JavaScript 数据类型，但不能重复。 在使用 Map 时，可以根据键来查找对应的值，而 Set 只能检查值是否存在。 另外，Map 中的键值对是有序的，而 Set 中的值则是无序的。 总之，如果你需要存储键值对并且需要按照特定顺序循环访问，那么 Map 是更好的选择；如果只需要存储一些独立的值，并且需要快速查看是否存在某个值，那么 Set 会更合适。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值