【JS】ES6新类型Map与Set

news/2024/12/22 0:38:10/

一、Map

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

描述

Map 对象是键值对的集合。Map 中的一个键只能出现一次；它在 Map 的集合中是独一无二的。
Map 对象按键值对迭代——一个 for…of 循环在每次迭代后会返回一个形式为 [key, value] 的数组。迭代按插入顺序进行，即键值对按 set() 方法首次插入到集合中的顺序（也就是说，当调用 set() 时，map 中没有具有相同值的键）进行迭代。

键是如何对比相等

键的比较基于零值相等算法。（它曾经使用同值相等，将 0 和 -0 视为不同。）这意味着 NaN 是与 NaN 相等的（虽然 NaN !== NaN），剩下所有其他的值是根据 === 运算符的结果判断是否相等。

基本使用

实例属性：size（Map长度）
实例方法：

  • Map.prototype.get()：返回与指定的键 key 关联的值，若不存在关联的值，则返回 undefined。
  • Map.prototype.has()：返回一个布尔值，用来表明 Map 对象中是否存在与指定的键 key 关联的值。
  • Map.prototype.keys()：返回一个新的迭代器对象，其包含 Map 对象中所有元素的键，以插入顺序排列。
  • Map.prototype.set()：在 Map 对象中设置与指定的键 key 关联的值，并返回 Map 对象。
  • Map.prototype.values()：返回一个新的迭代对象，其中包含 Map 对象中所有的值，并以插入 Map 对象的顺序排列。
  • Map.prototype.clear()：移除 Map 对象中所有的键值对。
  • Map.prototype.delete()：移除 Map 对象中指定的键值对，如果键值对存在并成功被移除，返回 true，否则返回 false。调用 delete 后再调用 map.has(key) 将返回 false。
  • Map.prototype.entries()：返回一个新的迭代器对象，其包含 Map 对象中所有键值对 [key, value] 二元数组，以插入顺序排列。
  • Map.prototype.forEach()：以插入顺序为 Map 对象中的每个键值对调用一次 callbackFn。如果为 forEach 提供了 thisArg 参数，则它将作为每一次 callback 的 this 值。
  • Map.prototype [Symbol.iterator] () 返回一个新的迭代器对象，其包含 Map 对象中所有元素 [key, value] 二元数组，以插入顺序排列。
javascript">const myMap = new Map();const keyString = "a string";
const keyObj = {};
const keyFunc = function () {};// 添加键
myMap.set(keyString, "和键'a string'关联的值");
myMap.set(keyObj, "和键 keyObj 关联的值");
myMap.set(keyFunc, "和键 keyFunc 关联的值");console.log(myMap.size); // 3// 读取值
console.log(myMap.get(keyString)); // "和键'a string'关联的值"
console.log(myMap.get(keyObj)); // "和键 keyObj 关联的值"
console.log(myMap.get(keyFunc)); // "和键 keyFunc 关联的值"console.log(myMap.get("a string")); // "和键'a string'关联的值"，因为 keyString === 'a string'
console.log(myMap.get({})); // undefined，因为 keyObj !== {}
console.log(myMap.get(function () {})); // undefined，因为 keyFunc !== function () {}

可迭代

javascript">const myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");for (const [key, value] of myMap) {console.log(`${key} = ${value}`);
}
// 0 = zero
// 1 = onefor (const key of myMap.keys()) {console.log(key);
}
// 0
// 1for (const value of myMap.values()) {console.log(value);
}
// zero
// onefor (const [key, value] of myMap.entries()) {console.log(`${key} = ${value}`);
}
// 0 = zero
// 1 = one

Map与数组

javascript">const kvArray = [["key1", "value1"],["key2", "value2"],
];// 使用常规的 Map 构造函数可以将一个二维的键值对数组转换成一个 Map 对象
const myMap = new Map(kvArray);console.log(myMap.get("key1")); // "value1"// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维的键值对数组
console.log(Array.from(myMap)); // 输出和 kvArray 相同的数组// 更简洁的方法来做如上同样的事情，使用展开运算符
console.log([...myMap]);// 或者在键或者值的迭代器上使用 Array.from，进而得到只含有键或者值的数组
console.log(Array.from(myMap.keys())); // 输出 ["key1", "key2"]

复制Map

javascript">const original = new Map([[1, "one"]]);const clone = new Map(original);console.log(clone.get(1)); // one
console.log(original === clone); // false. 浅比较 不为同一个对象的引用

合并Map

Map 对象间可以进行合并，但是会保持键的唯一性。后面的会覆盖前面的。

javascript">const first = new Map([[1, "one"],[2, "two"],[3, "three"],
]);const second = new Map([[1, "uno"],[2, "dos"],
]);// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的。
// 展开语法本质上是将 Map 对象转换成数组。
const merged = new Map([...first, ...second]);console.log(merged.get(1)); // uno
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three

Map与数组合并

javascript">const first = new Map([[1, "one"],[2, "two"],[3, "three"],
]);const second = new Map([[1, "uno"],[2, "dos"],
]);// Map 对象同数组进行合并时，如果有重复的键值，则后面的会覆盖前面的。
const merged = new Map([...first, ...second, [1, "eins"]]);console.log(merged.get(1)); // eins
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three

与Object对比

MapObject
键默认不包含任何键，只包含显示存入的键值对。键可以为任何值（包括函数、对象以及任何原始类型）Object有原型，所以包含默认的键。键类型必须为String或Symbol
大小size属性获取Object.keys().length
迭代可迭代没有迭代协议，不能通过for…of迭代
性能在涉及频繁添加和删除键值对的场景中表现更好未针对频繁添加和删除键值对进行优化

二、Set

Set 对象存储任何类型（无论是原始值还是对象引用）的唯一值。

描述

Set 对象是值的合集（collection）。集合（set）中的元素只会出现一次，即集合中的元素是唯一的。你可以按照插入顺序迭代集合中的元素。插入顺序对应于 add() 方法成功将每一个元素插入到集合中（即，调用 add() 方法时集合中不存在相同的元素）的顺序。

如何对比值的相等

值的相等是基于零值相等算法的。（曾使用会将 0 和 -0 视为不同值的同值算法。参见浏览器兼容性。）这意味着 NaN 和 undefined 会被视为是相同的值（即使 NaN !== NaN），而所有其他的值则基于 === 运算符的语义进行相等比较。

性能

has 方法检查某个值是否在集合中，其采用的方式的平均时间比逐个测试先前添加到集合中的元素更快。特别是当一个数组的长度（length）等于集合的大小（size）时，这比 Array.prototype.includes 方法的平均速度更快。

基本使用

实例属性：size（Map长度）

实例方法：

  • Set.prototype.add()： 在 Set 对象中插入一个新的具有指定值的元素。
  • Set.prototype.clear()： 从 Set 对象中移除所有元素。
  • Set.prototype.delete()：移除与 value 关联的元素，并返回一个布尔值来表示是否移除成功。Set.prototype.has(value) 会在此之后返回 false。
  • Set.prototype.entries()：返回一个新的迭代器对象，该对象包含 Set 对象中的代表每个元素的 [value, value] 数组。这与 Map 对象类似，因此 Set 的每个条目的 key 和 value 都相同。
  • Set.prototype.forEach()：按照值插入的顺序为 Set 对象中的每个值调用一次 callbackFn。如果提供了 thisArg 参数，它将被用作每次调用 callbackFn 时的 this 值。
  • Set.prototype.has()：返回一个布尔值，表示给定值在 Set 对象中是否存在。
  • Set.prototype.keys()：Set.prototype.values() 的别名。
  • Set.prototype.values()：返回一个新的迭代器对象，该对象按插入顺序生成 Set 对象中每个元素的值。
  • Set.prototype [Symbol.iterator] ()：返回一个新的迭代器对象，该对象按插入顺序生成 Set 对象中每个元素的值。
javascript">const mySet1 = new Set();mySet1.add(1); // Set(1) { 1 }
mySet1.add(5); // Set(2) { 1, 5 }
mySet1.add(5); // Set(2) { 1, 5 }
mySet1.add("some text"); // Set(3) { 1, 5, 'some text' }
const o = { a: 1, b: 2 };
mySet1.add(o);mySet1.add({ a: 1, b: 2 }); // o 是不同对象的引用，所以这是可以的mySet1.has(1); // true
mySet1.has(3); // false，因为并未将 3 添加到集合中
mySet1.has(5); // true
mySet1.has(Math.sqrt(25)); // true
mySet1.has("Some Text".toLowerCase()); // true
mySet1.has(o); // truemySet1.size; // 5mySet1.delete(5); // 从集合中移除 5
mySet1.has(5); // false，5 已从集合中移除mySet1.size; // 4，因为我们刚刚移除了一个值mySet1.add(5); // Set(5) { 1, 'some text', {...}, {...}, 5 }——先前删除的元素会作为新的元素被添加，不会保留删除前的原始位置console.log(mySet1); // Set(5) { 1, "some text", {…}, {…}, 5 }

与数组的关系

javascript">const myArray = ["value1", "value2", "value3"];// 使用常规的 Set 构造函数将 Array 转换为 Set
const mySet = new Set(myArray);mySet.has("value1"); // 返回 true// 使用展开语法将 Set 转换为 Array。
console.log([...mySet]); // 将显示与 myArray 完全相同的数组

数组去重

javascript">// 用于从数组中删除重复元素
const numbers = [2, 3, 4, 4, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 5, 32, 3, 4, 5];console.log([...new Set(numbers)]); // [2, 3, 4, 5, 6, 7, 32]

零值相等算法

原本js中，NaN !== NaN，但是零值相等算法视为相等，-0 与 0也视作相等。

javascript">const set = new Set([NaN, NaN]);
console.log(set); // Set(1) {NaN}const set1 = new Set([0, -0]);
console.log(set1); // Set(1) {0}

与Array对比

SetArray
值允许存储重复的值不允许存储重复的值。如果尝试向 Set 添加一个已经存在的值，该值将被忽略。
元素的类型判断使用严格相等（===）判断元素是否相等使用零值相等算法，类似于严格相等（===），但 NaN 被视为等于 NaN，-0 === 0。
性能在添加、删除和查找元素时具有更高的性能，特别是对于大量数据。处理大量数据不如Set

使用场景

Array：适用于需要存储有序且可能包含重复元素的数据的场景，如列表、队列、栈等。
Set：适用于需要存储唯一值的集合，如在需要检查是否包含某个值或需要快速去重时。


http://www.ppmy.cn/news/1503606.html

相关文章

Java高频面试题分享

Java高频面试题分享

文章目录 1. 策略模式怎么控制策略的选取1.1 追问：如果有100种策略呢？1.2 追问：什么情况下初始化Map 2. 什么是索引？什么时候用索引？2.1 追问：怎么判断系统什么时候用量比较少2.2 追问：如何实时…
阅读更多...
接口线上调用时间长排查

接口线上调用时间长排查

线上发现这个接口调用时间非常长 花费2min public void exportExcel(GetHistoryDataDTO getHistoryDataDTO, HttpServletResponse httpResponse) {List<Map<String, String>> dataList new ArrayList<>();getHistoryDataDTO.getGetHistoryDataChildren().g…
阅读更多...
揭秘智能工牌：如何成为房企销售团队的数字化转型加速器

揭秘智能工牌：如何成为房企销售团队的数字化转型加速器

在这个竞争激烈的市场环境中&#xff0c;房企想要脱颖而出&#xff0c;不仅需要优质的产品和服务&#xff0c;更需要高效的销售团队。而销售团队的能力提升&#xff0c;离不开精细化管理和科技的赋能。DuDuTalk智能语音工牌&#xff0c;正是这样一款融合了AI技术与销售实战智慧…
阅读更多...
每天网安必用的Python解码神器

每天网安必用的Python解码神器

作者:郭震 解码URL编码的字符串 可以使用Python的urllib.parse模块.以下是一个完整的示例,展示了如何解码这段URL编码的字符串: import urllib.parse# 给定的URL编码字符串 encoded_url "%68%74%74%70%73%3A%2F%2F%76%31%31%2E%74%6C%6B%71%63%2E%63%6F%6D%2F%77%6A%76%3…
阅读更多...
Vue Amazing UI：高颜值、高性能的前端组件库

Vue Amazing UI：高颜值、高性能的前端组件库

Vue Amazing UI&#xff1a;高颜值、高性能的前端组件库 在当今前端开发中&#xff0c;Vue Amazing UI 作为一款功能强大的 UI 组件库&#xff0c;为开发者提供了全面的解决方案。本文将介绍 Vue Amazing UI 的基本信息、特点以及如何快速部署和使用。 软件简介 Vue Amazing U…
阅读更多...
SCI中四区，计算机选题

SCI中四区，计算机选题

借助元启发式算法训练xxxxx的强化学习融合红外和可见光图像 一种基于深度强化学习的动态路xxxxx宽的软件定义网络 xxxxxxx负矩阵分解的高效网络聚类方法 改进雾计算基础设xxxxxxx衡的混合元启发式算法 利用量子计算xxxxxxx物联网设备的新型数字电路
阅读更多...
java实现加水印功能

java实现加水印功能

1-Word加水印 实现原理&#xff1a; ● 通过页眉页脚生成文字水印或图片水印&#xff0c;然后设置页眉页脚的高度以及旋转角度来设置水印。 源代码&#xff1a; 1、引入pom依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml…
阅读更多...
【AIGC】Llama-3 官方技术报告

【AIGC】Llama-3 官方技术报告

Llama-3 技术报告&#xff08;中文翻译&#xff09; 欢迎关注【youcans的AGI学习笔记】原创作品 0. 简介 现代人工智能&#xff08;AI&#xff09;系统的核心驱动力来自于基础模型。 本文介绍了一组新的基础模型&#xff0c;称为 Llama 3。它是一个语言模型系列&#xff0c;原…
阅读更多...
最新文章

Copyright @ 2022~2023