ES6新增的集合

发表于 更新于 分类于 ， 阅读次数： Changyan： 本文字数： 2.6k 阅读时长 ≈ 2 分钟
set和map的使用以及遍历的方法，for-of的使用

其他集合

set 集合

set 用于存放不重复的数据

1. 如何创建 set 集合

1
2
3
4
5
6
7
8
9
new Set(); //创建一个没有任何内容的set集合

new Set(iterable); //创建一个具有初始内容的set集合，内容来自于可迭代对象每一次迭代的结果

const s = new Set([1, 2, 3, 4, 5]);
console.log(s);

// 运行结果：
// Set(5) {1, 2, 3, 4, 5}

2. 如何对 set 集合进行后续操作

  • add(数据): 添加一个数据到 set 集合末尾，如果数据已存在，则不进行任何操作
    • set 使用 Object.is 的方式判断两个数据是否相同，但是，针对+0 和-0，set 认为是相等
1
2
3
4
5
const s = new Set();
s.add(1);
s.add(2);
s.add(3);
console.log(s);
  • has(数据): 判断 set 中是否存在对应的数据
  • delete(数据)：删除匹配的数据，返回是否删除成功
  • clear()：清空整个 set 集合
  • size: 获取 set 集合中的元素数量，只读属性，无法重新赋值

3. 如何与数组进行相互转换

1
2
3
const s = new Set([x, x, x, x, x]);
// set本身也是一个可迭代对象，每次迭代的结果就是每一项的值
const arr = [...s];
1
2
3
4
// 将集合变为数组
const s = new Set([1, 2, 3, 4, 5, 6, 7]);
const result = [...s];
console.log(result);

4. 如何遍历

1). 使用 for-of 循环

1
2
3
4
5
6
const s = new Set([1, 2, 3, 4, 5, 6, 7]);
for (const item of s) {
	console.log(item);
}

// 输出：1 2 3 4 5 6 7

2). 使用 set 中的实例方法 forEach

1
2
3
4
5
6
7
8
9
10
11
12
const set = new Set([1,2,3,4,5,4]);
set.forEach((item,index)=>{
    console.log(item,index)
})

// 输出：
// 1 1
// 2 2
// 3 3
// 4 4
// 5 5

注意：set集合中不存在下标，因此forEach中的回调的第二个参数和第一个参数是一致的，均表示set中的每一项

set的应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const arr1 = [24, 42, 32, 34, 42, 31, 32, 90, 86, 32];
const arr2 = [24, 47, 32, 38, 49, 11, 32, 90, 47];
// 求两个数组的并集
const arr3 = [...new Set([...arr1, ...arr2])];
console.log(arr3);

// 求两个数组的交集
const arr4 = new Set(arr1);
const arr5 = [...new Set(arr2)];
const result = arr5.filter(item => {
    return arr4.has(item);
})
console.log(result);

// 求两个数组的差集
const result1 = arr3.filter(item => {
    return !(arr4.has(item))
})
console.log(result1)

map 集合

键值对（key value pair）数据集合的特点：键不可重复

map 集合专门用于存储多个键值对数据。

在 map 出现之前，我们使用的是对象的方式来存储键值对，键是属性名，值是属性值。

使用对象存储有以下问题：

  1. 键名只能是字符串
  2. 获取数据的数量不方便
  3. 键名容易跟原型上的名称冲突

1. 如何创建 map

1
2
new Map(); //创建一个空的map
new Map(iterable); //创建一个具有初始内容的map，初始内容来自于可迭代对象每一次迭代的结果，但是，它要求每一次迭代的结果必须是一个长度为2的数组，数组第一项表示键，数组的第二项表示值
1
2
3
4
5
6
7
8
9
10
const mp = new Map([
   [1, 2],
   [3, 4],
   [5, 6],
   [1, 2]
]);
console.log(mp)

输出：
Map(3) {1 => 2, 3 => 4, 5 => 6}

2. 属性和方法

  • size：只读属性，获取当前 map 中键的数量
  • set(键, 值)：设置一个键值对，键和值可以是任何类型
    • 如果键不存在，则添加一项
    • 如果键已存在，则修改它的值
    • 比较键的方式和 set 相同
  • get(键): 根据一个键得到对应的值
  • has(键)：判断某个键是否存在
  • delete(键)：删除指定的键
  • clear(): 清空 map

3. 和数组互相转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const mp = new Map([
    [1, 2],
    [3, 4],
    [5, 6],
    [1, 2]
]);
const arr = [...mp];
console.log(arr)

输出：
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) [3, 4]
2: (2) [5, 6]

4. 遍历

  • for-of，每次迭代得到的是一个长度为 2 的数组
  • forEach，通过回调函数遍历
    • 参数 1：每一项的值
    • 参数 2：每一项的键
    • 参数 3：map 本身
1
2
3
4
5
6
7
8
9
10
const map = new Map([[1,"a"],[2,"b"],[3,"c"]])
for (const [key,value] of map) {
    console.log(key,value)
}


输出：
1 'a'
2 'b'
3 'c'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const mp = new Map([
    [1, 2],
    [3, 4],
    [5, 6],
    [1, 2]
]);
mp.forEach((value, index, array) => {
    console.log(value, index, array)
})

输出：
2 1 Map(3) {1 => 2, 3 => 4, 5 => 6}
4 3 Map(3) {1 => 2, 3 => 4, 5 => 6}
6 5 Map(3) {1 => 2, 3 => 4, 5 => 6}