js的Set和Map集合

最新推荐文章于 2024-05-28 18:15:33 发布
最新推荐文章于 2024-05-28 18:15:33 发布
阅读量596 收藏 3
点赞数 1
分类专栏： javaScript 文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42363495/article/details/104772866
版权

目录

1、js的Set介绍

  1. Set是ES6提供的一种类似于数组的数据结构。
  2. 不同于数组的是，它的成员的值都是唯一的，不会有重复。

1-1、Set基础用法

创建一个名为s的Set数据结构的变量

let s = new Set();

在创建Set 对象的时候，还可以传递一个数组（或者具有iterable接口其他数据类型）作为参数，因为Set数据接口不会有重复的值，所以会自动去掉数组中重复的值。

Set去重示例

const log=console.log;
let set = new Set([1,2,2,3,3,4,4]);
let array=[...set];
log(array);

在这里插入图片描述

在创建Set 对象的时候， 传递给构造函数的初始值是不会发生类型转换的，所以数字3和字符3是不同的，Set内部判断两个值是否相同时使用的算法是“Same-value equality”，它类似精确相等（===），主要区别是NaN等于自身，而精确相同NaN是不等于自身的。

Set参数类型示例

const log=console.log;
let set = new Set([1,2,3,"3",NaN,NaN]);
let array=[...set];
log(array);

在这里插入图片描述

1-2、Set对象的操作方法

方法/属性功能介绍
size获取当前Set对象的长度
add(value)向当前Set对象中添加一个值，返回的是Set对象，所以支持链式写法
delete(value)删除当前Set对象中的一个值，返回一个布尔值，表示是否删除成功
has(value)检测这个value是否是当前Set对象的一个元素，通过返回的布尔值表示
clear()清除当前Set对象所有元素，没有返回值

Set对象size属性示例

const log=console.log;
let set = new Set([1,2,3,4]);
log(set.size);

在这里插入图片描述

Set对象add方法示例

const log=console.log;
let set = new Set();
set.add(1).add(2).add(3);
let array=[...set];
log(array);

在这里插入图片描述

Set对象delete方法示例

const log=console.log;
let set = new Set([1,2,3,4,5]);
set.delete(5);
let array=[...set];
log(array);

在这里插入图片描述

Set对象has方法示例

const log=console.log;
let set = new Set([1,2,3,4,5]);
let isSetValue=set.has(5);
log(isSetValue);

在这里插入图片描述

Set对象clear方法示例

const log=console.log;
let set = new Set([1,2,3,4,5]);
set.clear();
let array=[...set];
log(array);

在这里插入图片描述

1-3、Set对象的遍历方法

方法/属性功能介绍
keys()返回该Set对象键名的遍历器
values()返回该Set对象键值的遍历器
entries()返回该Set对象键值对的遍历器
forEach()使用回调函数遍历该Set对象的每个元素

由于Set对象键名和键值都是同一个值，所以keys()和values()方法完全一致。

Set对象默认可以遍历，其默认遍历器生产函数就是它的values方法，所以可以省略values方法，直接用for…of遍历。

Set.prototype[Symbol.iterator] === Set.prototype.values
//true

Set对象的keys方法和values方法示例

const log=console.log;
let set = new Set(["你","好","!"]);
for(let i of set.keys()){
    log(i);
}
for(let i of set.values()){
    log(i);
}
for(let i of set){
    log(i);
}

在这里插入图片描述

因为entries方法同时包含键和值，所以使用entries方法遍历Set对象的时候返回的是包含键值的数组

Set对象的entries方法示例

const log=console.log;
let set = new Set(["你","好","!"]);
for(let i of set.entries()){
    log(i);
}

在这里插入图片描述

因为扩展运算符(…)内部使用的for…of循环，所以扩展运算符也可用于Set对象。

Set对象的forEach方法示例

const log = console.log;
let set = new Set(["你", "好", "!"]);
set.forEach((value,key) => {
    log(value,key)
})
log([...set]);

在这里插入图片描述

2、js的Set扩展WeakSet篇

WeakSet的概述：

  1. WeakSet数据结构是一种类似于Set的数据结构，因此也不可以重复
  2. WeakSet的成员只能是对象，不能是其他值，并且对象都是弱引用
  3. 因为成员都是对象的弱引用，所以随时都可能会被垃圾回收，因此是不能遍历的
  4. WeakSet相对于Set的属性和方法而言，没有size， 也没有clear

3、js的Map介绍

  1. Map数据结构是一种类似于对象的键值对数据结构
  2. 不同于对象的是Map的键可以为任意类型的值，而不仅仅为字符串

3-1、Map基础用法

创建一个名为m的Map数据结构的变量

let m = new Map();

在创建Map对象的时候，任何具有Iterator接口且每个成员都是一个双元数组的数据结构都可以当作Map构造函数的参数。

例如以下:

let log=console.log;
let array=[["姓名", "小王"],["年龄","23"]];
let m = new Map(array);
log(m);

在这里插入图片描述

3-2、Map对象的操作方法

方法/属性功能介绍
size获取当前Map对象的长度
set(key,value)向当前Map对象中添加一个值，返回的Map对象，所以支持链式写法
get(key)通过key找到value，如果找不到，返回undefined
delete(key)删除当前Map对象中的一个值，返回一个布尔值，表示是否删除成功
has(key)检测这个value是否是当前Map对象的一个元素，通过返回的布尔值表示
clear()清除当前Map对象所有元素，没有返回值

Map对象的size属性

let log=console.log;
let array=[["姓名", "小王"],["年龄","23"]];
let m = new Map(array);
log(m.size);

在这里插入图片描述

Map对象的set和get方法

只有对同一对象的引用，Map结构才会将其视为同一个键，这一点要非常小心。

let log=console.log;
let m = new Map();
m.set("名字","张三")
.set({},"李四");
log(m);
log(m.get("名字"));
log(m.get({}));

在这里插入图片描述

3-3、Map对象的遍历方法

方法/属性功能介绍
keys()返回该Map对象键名的遍历器
values()返回该Map对象键值的遍历器
entries()返回该Map对象键值对的遍历器
forEach()使用回调函数遍历该Map对象的每个元素

Map对象的keys和values方法

let log=console.log;
let m = new Map();
m.set("名字","张三")
.set({},"李四")
.set("年龄","23");
for(let key of m.keys()){
    log(key);
}
log("-----------")
for(let value of m.values()){
    log(value);
}

在这里插入图片描述

Map对象的entries方法

Map对象默认可以遍历，其默认遍历器生产函数就是它的entries方法，所以可以省略entries方法，直接用for…of遍历。

map[Symbol.iterator] === map.entriies
//true

let log=console.log;
let m = new Map();
m.set("名字","张三")
.set({},"李四")
.set("年龄","23");
for(let [key,value] of m.entries()){
    log(key+"==>"+value);
}
log("-----------");
for(let [key,value] of m.entries()){
    log(key+"==>"+value);
}

在这里插入图片描述

Map对象的forEach方法

let log=console.log;
let m = new Map();
m.set("名字","张三")
.set({},"李四")
.set("年龄","23");
m.forEach((value,key,map)=>{
    log("key: %s ==> value: %s",key,value);
})

在这里插入图片描述

4、js的Map扩展WeakMap篇

WeakMap的概述：

  1. WeakMap数据结构是一种类似于Map的数据结构，不过键名必须为对象（null除外）
  2. 与Map的键名不同的是，WeakMap的键名都是弱引用。
  3. 因为键名都是对象的弱引用，所以随时都可能会被垃圾回收，因此是不能遍历的
  4. WeakMap相对于Map的属性和方法而言，没有size，也没有clear
__松子
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS中的Map与Set
weixin_43983960的博客
06-28 319
一，Map介绍 Map是一组键值对的结构，具有极快的查找速度。 举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array： var names = [‘Michael’, ‘Bob’, ‘Tracy’]; var scores = [95, 75, 85]; 给定一个名字，要查找对应的成绩，就先要在names中找到对应的位置，再从scores取出对应的成绩，Array越长，耗时越长。 如果用Map实现，只需要一个“名字”-“成绩”的对照表，直接根据名字查找成绩，无论这个表有多大
js中的set和map-详解
qq_48109675的博客
09-16 2456
Set类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。Set 构造函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。
JS的set和map
weixin_50975172的博客
05-17 1058
当从该 map 取值的时候，需要遍历所有的键，然后使用索引从存储值的数组中检索出相应的值。作为 ECMAScript 6 的新增特性，Map 是一种新的集合类型，为这门语言带来了真正的键/值存储机制。在 JavaScript 中实现“键/值”式存储可以使用 Object 来方便高效地完成，也就是使用对象属性作为键，再使用属性来引用值。因此，如果你想要这种类型对象的 key 值的列表，你应该使用 Map。，需要包含键/值对数组。的结构是特殊且有效的，其用于映射的 key _只有_在其没有被回收时才是有效的。
JS【详解】Set 集合 （含 Set 集合和 Array 数组的区别，Set 的 API，Set 与 Array 的性能对比，Set 的应用场景）
最新发布
朝阳39的博客
05-28 704
因 Set 操作数据的性能比 Array 好，当需要对数据进行频繁操作，且对数据顺序无需求时，可考虑改用 Set 提升性能！若原 set 中已存在新添加的元素，则什么都不会发生，也不会报错。若原 set 中不存在要删除的元素，则什么都不会发生，也不会报错。数组中基于元素的索引 splice() 来删除元素，速度很慢。也可传入数组创建set，但若数组内存在相同元素，则会去重！返回 true / false。类似数组的 .length。
js中的set与map
前端杂文
03-01 5513
js中的set与map 简述： Set 和 Map 主要的应用场景在于 数据重组 和 数据储存。 Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构。 集合 与 字典 的区别： 共同点：集合、字典 可以储存不重复的值 不同点：集合 是以 [value, value]的形式储存元素，字典 是以 [key, value] 的形式储存 集合（Set）： ES6 新增的一种新的数据结构，类似于数组，成员唯一（内部元素没有重复的值）。且使用键对数据排
js中Set基本使用
热门推荐
RayShyy的博客
03-02 4万+
介绍 ECMAScript 6 新增的 Set 是一种新集合类型，为这门语言带来集合数据结构。Set 在很多方面都像是加强的 Map，这是因为它们的大多数 API 和行为都是共有的。 基本API 1. 创建Set实例 使用 new 关键字和 Set 构造函数可以创建一个空集合： const s = new Set(); 如果想在创建的同时初始化实例，则可以给 Set 构造函数传入一个可迭代对象，其中需要包含插入到新集合实例中的元素(Set 可以包含任何 JavaScript 数据类型作为值)： const
JS数据结构——Set（集合）详解
Cuichenyang158的博客
09-08 1万+
Set类似于数组，但是成员的值都是唯一的，没有重复的值。也就是说它是一系列无序，没有重复数值的数据集合。很多时候我们把Set叫做集合,但是，Set可以是集合，集合不一定是Set。
ES6中Set和Map用法实例详解
10-15
ES6新增了Set和Map这两种数据结构，它们是JavaScript编程中非常有用的工具，主要用于存储唯一值和键值对数据。下面将详细介绍Set和Map的基本概念、用法和实例，以及它们的特性和操作方法。 ### Set数据结构详解 ...
详解ES6中的Map与Set集合
10-17
首先，我们要了解Map集合。Map是一种可以存储键值对（key-value pairs）的数据结构，其中键可以是任何数据类型，包括对象、数组和基本数据类型。这比ES5时代利用对象属性模拟的键值对更加灵活。在ES5中，如果想要...
详谈js遍历集合(Array,Map,Set)
10-20
在JavaScript中，遍历集合是常见的操作，特别是对于Array、Map和Set这三种数据结构。本文将详细讨论如何遍历这些集合以及它们之间的差异。 首先，Array是最常见的一种集合，可以通过下标直接访问其元素。在ES6之前...
ES6新增数据类型set和map
01-20
Set和Map的引入极大地丰富了JavaScript的数据结构，使我们在处理数据时有了更多选择。Set适用于去重或收集唯一值的场景，而Map则适用于存储键值对，尤其是当键不是字符串时。理解并熟练运用这两种数据类型，能帮助...
js中的Set和Map
^_^
02-07 2099
首先，我们先要知道Set和Map是个什么数据类型。控制台打印。顾名思义，是一个构造函数，所以我们就可以使用new关键字来创建出Set和Map对象。​ 一、Set Set构造函数能让你创建Set对象，其可以存储任意类型的唯一值，无论是基本类型或者对象引用。 const set1 = new Set([1, 2, 3, 4, 5]); //Set(5){1, 2, 3, 4, 5}​ 二、Map Map对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值 ​
javaScript set和map
平安喜乐
04-05 531
当你在开发 JavaScript 应用程序时，您通常需要处理数据。Set 和 Map 是两种非常有用的 JavaScript 数据结构，可以帮助您轻松地存储和访问数据。在本篇文章中，我们将深入探讨 Set 和 Map，让您了解这两种数据结构的基本概念、用法以及各自的优势。
JavaScript中Set的使用
m0_51636525的博客
06-11 9810
在ES6之前，我们主要使用数组、对象来存储数据；在ES6中新增了另外两种数据结构：Set、Map和WeakSet、WeakMap。Set有点类似于Array数组，但是和数组的区别是Set的元素不能重复。先不考虑Set的创建方法，通过案例来演示Set和Array数组的区别。我们需要通过Set的构造函数创建Set（没有字面量创建的方式）...............
JS中Set和Map用法详解
宝子的博客
02-02 796
它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。它类似于数组，但是成员的值都是唯一的，没有重复的值。方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值。Set 结构的实例有四个遍历方法，可以用于遍历成员。的一个键，然后又使用。
js 中 Map 和 Set 的用法及区别
qq_45359288的博客
05-24 4438
目录1. Set1.1 简介1.2 常用语法1.3 用途1.4 遍历方法2. Map2.1 简介2.2 常用语法3. 区别 1. Set 1.1 简介 Set是ES6新增的数据结构，类似于数组，但它的一大特性就是所有元素都是唯一的，没有重复的值，我们一般称为集合。 Set是一个构造函数，用来生成set的数据结构。 set打印出来的数据结构，是一个对象 var set=new Set([1,2,3]) console.log(set) // Set(3) {1,2,3} 1.2 常
js基础学习之Set
QJYY1的博客
03-30 1243
数组去重之学习Set
js set和map
05-30
JS中的Set和Map都是ES6引入的新数据类型，下面是它们的区别和用法： 1. Set Set是一种无序且唯一的集合，它的成员都是唯一的，没有重复的值。Set的主要作用是去重和数组去重一样，但是它比数组去重更加高效。 Set的常用方法有： - add(value)：向Set实例添加一个值，返回Set实例本身。 - delete(value)：从Set实例中删除一个值，返回一个布尔值，表示删除是否成功。 - has(value)：判断Set实例中是否包含某个值，返回一个布尔值。 - clear()：清空Set实例，没有返回值。 - size：返回Set实例的成员总数。 示例代码： ```javascript const set = new Set([1, 2, 3, 2, 1]); set.add(4).add(5); console.log(set); // Set(5) {1, 2, 3, 4, 5} set.delete(4); console.log(set); // Set(4) {1, 2, 3, 5} console.log(set.has(2)); // true console.log(set.size); // 4 set.clear(); console.log(set); // Set(0) {} ``` 2. Map Map是一种键值对的集合，和Object类似，但是Map的键可以是任何类型，而且Map中的键值对是有序的。Map的主要作用是存储和查找数据，以键值对的形式存储数据。 Map的常用方法有： - set(key, value)：向Map实例添加一个键值对，返回Map实例本身。 - get(key)：获取Map实例中指定键对应的值，如果不存在则返回undefined。 - delete(key)：从Map实例中删除指定键值对，返回一个布尔值，表示删除是否成功。 - has(key)：判断Map实例中是否包含某个键，返回一个布尔值。 - clear()：清空Map实例，没有返回值。 - size：返回Map实例的键值对总数。 示例代码： ```javascript const map = new Map([ ['name', '张三'], ['age', 18] ]); map.set('gender', '男').set('age', 20); console.log(map); // Map(3) {"name" => "张三", "age" => 20, "gender" => "男"} console.log(map.get('name')); // "张三" map.delete('gender'); console.log(map); // Map(2) {"name" => "张三", "age" => 20} console.log(map.has('age')); // true console.log(map.size); // 2 map.clear(); console.log(map); // Map(0) {} ``` 总结：Set和Map都是ES6引入的新数据类型，它们可以很好地解决一些问题，如去重和存储数据等。Set适合存储一组不重复的数据，而Map适合存储一组键值对。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值