Map 与 Set

最新推荐文章于 2022-10-21 21:53:19 发布
最新推荐文章于 2022-10-21 21:53:19 发布
阅读量113 收藏
点赞数
分类专栏： ES6 文章标签： es6 vue javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45828551/article/details/125905920
版权

目录

Map

基本用法

实例的属性和方法

1、size 属性

2、set(key, value) 方法

3、get(key) 方法

4、has(key)

5、delete(key) 方法

6、clear() 方法

遍历方法

1、keys()，values()，entries()

2、forEach()

Map对象的操作

1、Map 与 Array 的转换

2、Map 与 Object 的转换

3、Map的克隆

4、Map的合并

set

基本用法

实例的属性和方法

1、size 属性

2、add(value) 方法

3、has(value) 方法

4、delete(value) 方法

5、clear() 方法

遍历方法

1、keys()，values()，entries()

2、forEach()

set的应用

1、类型转换

2、数组去重

3、并集(Union)

4、交集(Intersect)

5、差集(Difference)

Map

基本用法

和 Object 类似，也是键值对的集合，Object 的键名只能是字符串或Symbol，Map 的键名可以是任何值。

let myMap = new Map();
// 键名是字符串
let key1 = "string";
myMap.set(key1, "我的key是string类型");
console.log(myMap.get(key1)); // 我是string
console.log(myMap.get("string")); // 我是string  因为 key1 ==="string"
// 键名是函数
let key2 = () => {};
myMap.set(key2, "我的key是function类型");
console.log(myMap.get(key2)); // 我是function
console.log(myMap.get(() => {})); // undefined  因为 key2 !== (() => {})
// 键名是对象
let key3 = {};
myMap.set(key3, "我的key是object类型");
console.log(myMap.get(key3)); // 我的key是object类型
console.log(myMap.get({})); // undefined 因为 key3 !== {}
// 键名是NaN
let key4 = NaN;
myMap.set(key4, "我的key是NaN类型");
console.log(myMap.get(key4)); // 我的key是NaN类型
console.log(myMap.get(NaN)); // 我的key是NaN类型

如果对同一个键多次赋值，将覆盖前一次的值，读取一个未知的键，返回undefined。

let myMap = new Map().set("a", 1).set("a", 2);
console.log(myMap.get("a")); // 2
console.log(myMap.get("b")); // 读取未知的键，返回 undefined

如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键，比如0和-0就是一个键，布尔值true和字符串true则是两个不同的键。另外，undefined和null也是两个不同的键。

let myMap = new Map();
myMap.set(-0, 123);
console.log(-0 === +0); // true
console.log(myMap.get(+0)); // 123 因为 -0 === +0

myMap.set(true, 1);
myMap.set("true", 2);
console.log(myMap.get(true)); // 1
console.log(myMap.get("true")); // 2

myMap.set(undefined, 3);
myMap.set(null, 4);
console.log(myMap.get(undefined)); // 3
console.log(myMap.get(null)); // 4

myMap.set(NaN, 123);
myMap.set(NaN, 456);
// 虽然NaN !== NaN，但是值被覆盖了，说明Map认为他们是同一个键
console.log(myMap.get(NaN)); // 456

注意：注意最后一段代码，虽然NaN不严格相等于自身，但 Map 将其视为同一个键。

Map 也可以接收一个数组作为参数。该数组的成员是一个个表示键值对的数组。

let myMap = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);
console.log(myMap.size); // 3
console.log(myMap.has("a")); // true
console.log(myMap.get("a")); // 1
console.log(myMap.has("b")); // true
console.log(myMap.get("b")); // 2

实例的属性和方法

1、size 属性

size属性返回Map的成员总数。

let myMap = new Map().set("a", 1).set("b", 2);
console.log(myMap.size); // 2

2、set(key, value) 方法

set方法接收key、value 两个参数，key为键名，value为键值，然后返回整个Map结构。如果key已经存在，则key对应的键值会被覆盖，否则生成新键。set方法返回的是当前Map对象，因此可以采用链式写法。

let myMap = new Map().set("a", 1).set("b", 2).set("c", 3).set("d", 4);

3、get(key) 方法

get方法读取key对应的键值，如果找不到key，返回undefined。

let myMap = new Map();
console.log(myMap.get("a")); // undefined

4、has(key)

has方法返回一个Boolean值，标识key是否在当前Map中。

let myMap = new Map().set("a", 1).set("b", 2).set("c", 3).set("d", 4);
console.log(myMap.has("a")); // true
console.log(myMap.has("b")); // true
console.log(myMap.has("c")); // true
console.log(myMap.has("d")); // true
console.log(myMap.has("e")); // false
console.log(myMap.has("f")); // false

5、delete(key) 方法

delete方法删除key键，返回true，如果删除失败，则返回false。

let myMap = new Map().set("a", 1);
console.log(myMap.has("a")); // true
console.log(myMap.delete("a")); // true
console.log(myMap.has("a")); // fasle
console.log(myMap.delete("a")); // false

6、clear() 方法

clear方法清除Map所有成员，无返回值。

let myMap = new Map().set("a", 1).set("b", 2).set("c", 3).set("d", 4);
console.log(myMap.size); // 4
myMap.clear();
console.log(myMap.size); // 0

遍历方法

Map 结构原生提供三个遍历器生成函数。

  • Map.prototype.keys()：返回键名的遍历器。
  • Map.prototype.values()：返回键值的遍历器。
  • Map.prototype.entries()：返回所有成员的遍历器。
  • Map.prototype.forEach()：遍历 Map 的所有成员。

需要特别注意的是，Map 的遍历顺序就是插入顺序。

1、keys()，values()，entries()

let myMap = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);
for (let key of myMap.keys()) {
  console.log(key);
  // a
  // b
  // c
}
for (let value of myMap.values()) {
  console.log(value);
  // 1
  // 2
  // 3
}
for (let item of myMap.entries()) {
  console.log(item);
  // ['a', 1]
  // ['b', 2]
  // ['c', 3]
}
for (let [key, value] of myMap.entries()) {
  console.log(key, value);
  // a 1
  // b 2
  // c 3
}
// 等同于使用map.entries()
for (let [key, value] of myMap) {
  console.log(key, value);
  // a 1
  // b 2
  // c 3
}

注意最后一段代码，Map 结构的默认遍历器接口(Symbol.iterator属性)，就是entries方法。

2、forEach()

Map的forEach方法，与数组的forEach方法类似，也可以实现遍历。

let myMap = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);
myMap.forEach((value, key) => {
  console.log("Key: %s, Value: %s", key, value);
  // Key: a, Value: 1
  // Key: b, Value: 2
  // Key: c, Value: 3
});

Map对象的操作

1、Map 与 Array 的转换

（1）Map 转为 Array

Map 转为 Array方便的方法就是使用扩展运算符(...)，也可以使用 Array.from 方法将 Map 转换为二维数组。

let myMap = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);
console.log([...myMap]); // [["a", 1], ["b", 2], ["c", 3]]
console.log(Array.from(myMap)); // [["a", 1], ["b", 2], ["c", 3]]

（2）Array 转为 Map

直接使用Map构造函数就可以将数组转换为Map。

let arr = [
  ["a", 1],
  ["b", 2],
  ["c", 3],
];
let myMap = new Map(arr);
console.log(myMap); // {'a' => 1, 'b' => 2, 'c' => 3}

2、Map 与 Object 的转换

（1）Map转Object

如果有非字符串的键名，那么这个键名会被转成字符串，再作为对象的键名。

function handleMapToObject(map) {
  let obj = {};
  for (let [key, val] of map) {
    obj[key] = val;
  }
  return obj;
}
let myMap = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
  [NaN, NaN],
  [() => {}, () => {}],
]);
console.log(handleMapToObject(myMap)); // {a: 1, b: 2, c: 3, NaN: NaN, () => {}: ƒ}

（2）Object转Map

可以使用Object.entries()。

let obj = { a: 1, b: 2, c: 3 };
let myMap = new Map(Object.entries(obj));
console.log(myMap); // {'a' => 1, 'b' => 2, 'c' => 3}

还可以自己写一个转换方法。

let obj = { a: 1, b: 2, c: 3 };
function handleObjectToMap(obj) {
  let myMap = new Map();
  for (let key in obj) {
    myMap.set(key, obj[key]);
  }
  return myMap;
}
console.log(handleObjectToMap(obj)); // {'a' => 1, 'b' => 2, 'c' => 3}

3、Map的克隆

Map构造函数传入一个Map实例，迭代出新的对象。

let myMap = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);
let cloneMap = new Map(myMap);
console.log(cloneMap === myMap); // false

4、Map的合并

合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的。

let myMap = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);
let myMap1 = new Map([
  ["a", "a"],
  ["b", "b"],
]);
let merged = new Map([...myMap, ...myMap1]);
console.log(merged); // {'a' => 'a', 'b' => 'b', 'c' => 3}

set

基本用法

和数组类似，但是成员的值都是唯一的。

let mySet = new Set();
console.log(mySet.add(1)); // Set(1) {1}
console.log(mySet.add(2)); // Set(2) {1, 2}
console.log(mySet.add(3)); // Set(3) {1, 2, 3}
// 现在开始添加重复值，打印数据和上面一样，体现了值的唯一性
console.log(mySet.add(3)); // Set(3) {1, 2, 3}
console.log(mySet.add("3")); // Set(4) {1, 2, 3, '3'}

上面代码通过add()方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值。

实际上两个NaN是不严格相等的，但是在Set内部，他们被认为是相等的。另外，两个对象总是不相等的。

let mySet = new Set();
mySet.add(NaN);
mySet.add(NaN);
// 添加了两个NaN，但是打印只有一个
console.log(mySet); // Set(1) {NaN}
mySet.add({});
mySet.add({});
// 由于两个空对象不相等，所以它们被视为两个值
console.log(mySet); // Set(3) {NaN, {…}, {…}}

实例的属性和方法

1、size 属性

size属性返回Set的成员总数。

let mySet = new Set().add(1).add(2).add(3);
console.log(mySet.size); // 3

2、add(value) 方法

添加某个值，add方法返回的是当前Set结构本身，因此可以采用链式写法。

let mySet = new Set().add(1).add(2).add(3).add(4).add(5);

3、has(value) 方法

返回一个布尔值，表示该值是否为Set的成员。

let mySet = new Set().add(1).add(2).add(3);
console.log(mySet.has(1)); // true
console.log(mySet.has(5)); // false

4、delete(value) 方法

删除某个值，返回一个Boolean值，成功返回true，失败返回false。

let mySet = new Set().add(1).add(2).add(3);
console.log(mySet.has(1)); // true
console.log(mySet.delete(1)); // 删除成功返回 true
console.log(mySet.has(1)); // false
console.log(mySet.delete(1)); // 删除失败 返回 false

5、clear() 方法

清除Set结构所有成员，没有返回值。

let mySet = new Set().add(1).add(2).add(3).add(4).add(5);
console.log(mySet.size); // 5
mySet.clear();
console.log(mySet.size); // 0

遍历方法

Set 结构的实例有四个遍历方法，可以用于遍历成员

  • Set.prototype.keys()：返回键名的遍历器
  • Set.prototype.values()：返回键值的遍历器
  • Set.prototype.entries()：返回键值对的遍历器
  • Set.prototype.forEach()：使用回调函数遍历每个成员

需要特别注意的是，Set的遍历顺序和Map一样，就是插入顺序。

1、keys()，values()，entries()

由于Set结构没有键名，只有键值（键名和键值相同），所以keys方法和values方法返回数据完全一致。

let mySet = new Set().add(1).add(2).add(3);
for (let key of mySet.keys()) {
  console.log(key);
  // 1
  // 2
  // 3
}
for (let value of mySet.values()) {
  console.log(value);
  // 1
  // 2
  // 3
}
for (let item of mySet.entries()) {
  console.log(item);
  // [1, 1]
  // [2, 2]
  // [3, 3]
}
for (let value of mySet) {
  console.log(value);
  // 1
  // 2
  // 3
}

Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法。

这意味着，可以省略values方法，直接用for...of循环遍历 Set。(上面代码最后一段)

2、forEach()

Set 结构的实例与Map一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

let mySet = new Set().add(1).add(2).add(3);
mySet.forEach((value, key, set) => {
  console.log("Key: %s, Value: %s", key, value);
  // Key: 1, Value: 1
  // Key: 2, Value: 2
  // Key: 3, Value: 3
});

set的应用

1、类型转换

Set转Array

扩展运算符(...)、Array.from()。

let mySet = new Set().add(1).add(2).add(3);
console.log([...mySet]); // [1, 2, 3]
console.log(Array.from(mySet)); // [1, 2, 3]

2、数组去重

let arr = [1, 2, 3, 3, 3, 4, 5, 5, 5, 5];
let mySet = new Set(arr);
console.log([...mySet]); // [1, 2, 3, 4, 5]

3、并集(Union)

// 并集
let mySet1 = new Set([1, 2, 3]);
let mySet2 = new Set([2, 3, 4]);
let union = new Set([...mySet1, ...mySet2]);
console.log([...union]); // [1, 2, 3, 4]

4、交集(Intersect)

// 交集
let mySet1 = new Set([1, 2, 3]);
let mySet2 = new Set([2, 3, 4]);
let intersect = new Set(Array.from(mySet1).filter((el) => mySet2.has(el)));
console.log([...intersect]); // [2, 3]

5、差集(Difference)

// 差集
let mySet1 = new Set([1, 2, 3]);
let mySet2 = new Set([2, 3, 4]);
let difference = new Set(Array.from(mySet1).filter((el) => !mySet2.has(el)));
console.log([...difference]); // [1]
海盗船长。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
map与set的底层大概框架-红黑树
04-04
学习map和set的友友们如果对红黑树的底层框架很模糊。 可以借鉴一下本文件中的红黑树。 虽然有些地方写的不够全不够好， 但是基本的迭代器功能都已经实现。其实红黑树的学习主要就是学习它的插入， 最重要的就是...
Map和Set的区别
12-21
Map和Set的区别 —————————————–分割线—————————– 　map和set都是stl中的关联容器，map以键值对的形式存储，key=value组成pair，是一组映射关系。set只有值，可以认为只有一个数据，并且set...
map和set方法总结和详解
Br不二
10-18 1285
Map和Set方法的各种用法和介绍
javascript之Map 和 Set
影子
08-21 1020
存储带键的数据（keyed）集合的对象。 存储有序集合的数组。 Map是一个带键的数据项的集合，就像一个Object一样。 但是它们最大的差别是Map允许任何类型的键（key）。 Map它的方法和属性如下： new Map()—— 创建 map。 map.set(key, value)—— 根据键存储值。 map.get(key)—— 根据键来返回值，如果map中不存在对应的key，则返回undefined。 map.has(key)—— 如果key存在则返回...
Map 和Set(映射和集合)
叮当的猫猫的博客
12-21 1323
可迭代对象是数组的泛化，这个概念就是说任何对象都可以被定制为在 for …of 循环中使用的对象 数组是可迭代的，很多其他内建对象也都是可迭代的，比如字符串。（内建对象包括：string、da te、Array对象、Math、Functions全局函数） 1.Symbol.iterator 通过创建一个对象，我们就可以轻松掌握可迭代的概念。 比如，我们有一个数组，它并不是数组，比如一个range 对象，它代表你一个数字区间。 ...
Map和Set
努力工作娶老婆的博客
10-21 262
Map和Set
map和set的模拟实现
iwkxi的博客
08-18 242
因为map的_date是pair，虽然pair比较大小能通过编译，但并不是我们预期的效果，pair本身比较大小是key小就小，如果不是，则value小的小。为了实现pair的正确比较大小，我们在RBTree的模板参数中增加一个KeyOfT的仿函数，它的作用是支持取出T对象中的Key。map和set底层都是红黑树，为了实现更高维的泛型编程，便于复用，我们让map和set用同一颗红黑树。(SGI源码也是这样的)根据需求改造我们的红黑树，我们不用像库里面继承搞那么复杂，我们用一个模板参数T来控制。...
详解ES6中的Map与Set集合
10-17
主要介绍了详解ES6中的Map与Set集合，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
list map set区别
01-05
list map set联系与区别 list map set联系与区别 list map set联系与区别
ES6中的Map和Set详解
m0_45093055的博客
08-19 3764
ES6中的Map和Set
ES6 Map Set对象方法
qq_59934281的博客
04-18 3537
ES6 Map Set对象方法
Java集合类List、Set、Queue、Map实现类
xiaoguangtouqiang的博客
03-11 5590
1.Collection    Collection最基本的集合接口，一个Collection代表一组Object的集合public interface Collection<E> extends Iterable<E> {任何实现Collection接口的类，都必须实现iterator方法来提供遍历集合中的元素Iterator<T> iterator();例如...
Map集合——(1) 常用方法与MapSet
真香号
09-12 4929
package cn.itcast.p6.map.demo; import java.util.Collection; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Set; public class MapDemo { public static v...
ES6中map和set用法
有问题可关注公众号：前端研究院 后台输入问题回复
06-04 3223
一、map Map是一组键值对的结构，具有极快的查找速度 举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array; var names = ['Michael', 'Bob', 'Tracy']; var scores = [95, 75, 85]; 给定一个名字，要查找对应的成绩，就先要在names中找到对应的位置，再从scores取出对应的成绩，Arr...
map和set的概念及使用
海盗船长y的博客
04-20 5751
什么是关联式容器？ 关联式容器也是用来存储数据的，与序列式容器不同的是，其里面存储的是<key, value>结构的键值对，在数据检索时比序列式容器效率更高 什么是键值对？ 用来表示具有一一对应关系的一种结构，该结构中一般只包含两个成员变量key和value，key代表键值，value表示与key对应的信息 STL中对键值对的定义： template <class T1,...
Set集合与Map集合
凌晨四点的博客君
08-03 1375
一、Set集合：         无序、不能出现重复元素、没有角标   的集合           Set的遍历方式：             1、直接打印System.out.println(set);             2、增强for循环foreach             3、迭代器遍历iterator     特点：                  无序：...
Map、Set对象的用法
林中明月间丶
01-07 430
https://www.cnblogs.com/zsg88/p/11158637.html https://blog.csdn.net/weixin_41646716/article/details/91509295 声明 var map = new Map(); 设值 map.set("key","value"); 取值 map.get("key"); 判断key是否存在 map....
Map与Set详解
qq_46804966的博客
03-06 4437
文章目录Map1.Map的定义2.Map的常见方法3.Map的注意事项4.代码示例Set1.Set的定义2.Set的常用方法3.Set的注意事项4.代码示例 Map 1.Map的定义 Map中存储的是Key-Value的键值对，将键映射到值的对象，映射不能包含重复的键，每个键最多可以映射到一个值 2.Map的常见方法 3.Map的注意事项 （1）put是根据一个函数来存放的，并非按顺序存放 （2）Map不能存放相同的键，如果存放，则会更新为最新的value （3）Map不能使用迭代器进行打印 （4）Map
unordered_set和unordered_map与set和map的区别
最新发布
04-17
unordered_set和unordered_map是C++标准库中的容器，而set和map也是C++标准库中的容器。它们之间的区别主要有以下几点： 1. 实现方式：unordered_set和unordered_map使用哈希表实现，而set和map使用红黑树实现。哈希表的插入、查找和删除操作的平均时间复杂度为O(1)，而红黑树的平均时间复杂度为O(log n)。 2. 元素顺序：unordered_set和unordered_map中的元素是无序的，而set和map中的元素是按照键值进行排序的。如果需要按照特定顺序访问元素，可以使用set和map；如果不需要关心元素的顺序，可以使用unordered_set和unordered_map。 3. 键值唯一性：set和unordered_set中的键值是唯一的，即每个键只能出现一次；而map和unordered_map中的键值是唯一的，但值可以重复。 4. 内存占用：由于使用了哈希表，unordered_set和unordered_map通常会占用更多的内存空间，而set和map通常会占用较少的内存空间。 5. 迭代器稳定性：在进行插入和删除操作后，set和map中的迭代器仍然有效，而unordered_set和unordered_map中的迭代器可能会失效。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值