JS 中 Map 和 Object、Set 和 Array？

题干

题解

Map 和 Set 都是 ES6 引入的新的数据结构，用于存储数据集合。

Map

Map 是一种键值对的集合，类似于对象，但是键可以是任意类型的值，而不仅仅是字符串或符号。

Map 中的键是唯一的，而值可以重复。Map 可以通过 set() 方法添加键值对，通过 get() 方法获取值，通过 has() 方法判断键是否存在，通过 delete() 方法删除键值对，还可以使用 size 属性获取 Map 的大小。

Map 和 Object 对象相比：

Map 中的键可以是任意类型的值，而对象的键只能是字符串或符号。
Map 中的键值对是按照插入顺序进行迭代的，而对象中的属性的顺序是不确定的。
Map 可以直接获取键值对的数量，而对象则不能。
Map 可以直接遍历键值对，而对象则需要先获取键的数组再遍历。
Map 可以更容易地实现复杂的数据结构，比如嵌套的 Map，而对象则需要额外的处理。
大量数据的情况下，Map 的性能比对象更好，因为 Map 内部使用了更高效的数据结构来存储和访问键值对。

// 创建一个 Map
let map = new Map([
  ["name", "Alice"],
  ["age", 18],
  ["gender", "female"]
]);

// 添加一个键值对
map.set("hobby", "reading");

// 删除一个键值对
map.delete("gender");

// 查找一个键是否存在
map.has("name"); // true

// 获取一个键对应的值
map.get("age"); // 18

// 获取键值对的数量
map.size; // 3

// 清空所有键值对
map.clear();

// 遍历所有键值对
for (let [key, value] of map) {
  console.log(key, value);
}

Map 使用场景：

存储数据：Map 可以用来存储数据，其中键可以是任何数据类型，值可以是任何类型的数据。
映射关系：可以使用 Map 将一个值映射到另一个值，例如将字符串映射到颜色值，或将数字映射到对应的文本。
缓存数据：可以将数据存储在 Map 中，以便快速查找和访问，而无需每次都重新计算或从数据库中读取数据。
迭代和排序：Map 的键值对是有序的，可以使用 Map 来迭代和排序数据。
...

Set

Set 是一种无重复值的集合，类似于数组，但是成员的值都是唯一的，没有重复的值。

Set 可以用来存储任何类型的值，包括原始类型和对象类型。Set 可以通过 add() 方法添加值，通过 has() 方法判断值是否存在，通过 delete() 方法删除值，还可以使用 size 属性获取 Set 的大小。

针对于 Array 数组，Set 的优势在于：

Set 对象值是唯一的，可以用来去除数组的重复成员，或者实现并集、交集、差集等操作。
Set 对象可以快速地判断一个元素是否在集合中，而数组需要遍历整个数组才能完成这个操作；

// 创建一个 Set
let set = new Set([1, 2, 3, 4, 4]);

// 添加一个值
set.add(5);

// 删除一个值
set.delete(4);

// 查找一个值是否存在
set.has(3); // true

// 获取值的数量
set.size; // 4

// 清空所有值
set.clear();

// 遍历所有值
for (let value of set) {
  console.log(value);
}

Set 使用场景：

去重：Set 可以用来去重数据，其中值可以是任何数据类型。
求交集：Set 可以用来求两个集合的交集，其中值可以是任何数据类型。
求并集：Set 可以用来求两个集合的并集，其中值可以是任何数据类型。
...

// 创建一个数组
let arr = [1, 2, 3, 4, 4, 5, 6, 6];

// 使用 Set 去重
let set = new Set(arr);

// 打印结果
console.log(set); // Set {1, 2, 3, 4, 5, 6}

// 创建两个 Set
let setA = new Set([1, 2, 3, 4]);
let setB = new Set([3, 4, 5, 6]);

// 使用 filter 方法和 has 方法求交集
let setC = new Set([...setA].filter(x => setB.has(x)));

// 打印结果
console.log(setC); // Set {3, 4}

// 使用扩展运算符求并集
let setD = new Set([...setA, ...setB]);

// 打印结果
console.log(setD); // Set {1, 2, 3, 4, 5, 6}

贡献者

isboyjc

JS 中 Map 和 Object、Set 和 Array？ ​

题干 ​

题解 ​

Map ​

Set ​

相关 ​

贡献者 ​

JS 中 Map 和 Object、Set 和 Array？

题干

题解

Map

Set

相关

贡献者