set/map(ES6)
2022-10-27 本文已影响0人
小刺猬_0421
set与map理解
ES6中新增，set集合和map集合就是一种数据的存储结构(在ES6之前数据存储结构只有array,object)，不同的场景使用不同的集合去存储数据
set集合
Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
- 语法：
//创建一个set集合，传参为一个可迭代的对象
const s1 = new Set(iterable);
API
| 名称 | 类型 | 简介 |
|---|---|---|
| Set.add() | 原型方法 | 添加数据 |
| Set.has() | 原型方法 | 判断是否存在一个数据 |
| Set.delete() | 原型方法 | 删除数据 |
| Set.clear() | 原型方法 | 清空集合 |
| Set.size属性 | 属性 | 集合长度 |
| for of | 原型方法 | 遍历 |
- 例子：
// 1.add() 往创建好的集合中添加数据的
const s1 = new Set();
s1.add(1)
s1.add(2)
s1.add(3)
s1.add(4)
s1.add(1) //无效添加，因为数据重复
console.log(s1)
// 2.has() 判断数据是否存在
console.log(s1.has(1))
console.log(s1.has(10))
// 3.delete() 返回是否删除成功
s1.delete(1)
console.log(s1)
console.log(s1.delete(10))
// 4.clear() 清空集合
s1.clear()
console.log(s1)
// 5.size属性 只能读，不能改
console.log(s1.size)
// 6.遍历:for of,因为是一个可迭代的对象
for(const item of s1){
console.log(item)
}
// 重写的实例方法 forEach
s1.forEach((item, index, s) => {
// index 不是下标，set集合没有下标
// forEach中的第一个参数的值和第二个参数的值是相同的，都表示set中的每一项数据
console.log(item, index, s)
})
使用场景
//数组去重
const arr = [1,1,22,22,3,1,88,88,65,123,444,65];
const s = new Set(arr);
console.log([...s]);
//或者一句话搞定
const result = [...new Set(arr)];
console.log(result);//[1,22,3,88,65,123,444,65]
// 两个数组的交集，并集，差集，结果得到一个新的数组
const arr1 = [12,34,55,33,11,33,5,12];
const arr2 = [55,34,11,78,10,19,88,88,99,99];
// 用set完成
// 交集:你有我也有的数组元素 组成一个新数组
const cross = [...new Set(arr1)].filter(item => arr2.indexOf(item) >= 0);
console.log(cross);//[]
// 并集：数组合并去重之后的新数组
const result = [...new Set([...arr1,...arr2])];
console.log(result);
// 差集：你有我没有，我有你没有的数组元素 组成一个新数组
let arr4 = result.filter(item=>{
// 判断arr1里面存在并且arr2不存在的数据 和 arr1里面不存在并且arr2里存在的数据
return arr1.includes(item) && !arr2.includes(item) || !arr1.includes(item) && arr2.includes(item)
})
console.log(arr4) //[12, 33, 5, 78, 10, 19, 88, 99]
map集合(映射)
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
- 语法：
let swk=new Map()
console.log(swk);//Map(0)
API
| 名称 | 类型 | 简介 |
|---|---|---|
| Map.set(key,value) | 原型方法 | 添加数据 |
| Map.get(key) | 原型方法 | 获取数据 |
| Map.has(key) | 原型方法 | 判断是否存在一个数据 |
| Map.delete(key) | 原型方法 | 删除数据 |
| Map.clear() | 原型方法 | 清空集合 |
| Map.size属性 | 原型方法 | 集合长度 |
| for of | 原型方法 | 遍历 |
- 例子：
let swk=new Map();
console.log(swk);
// 1. 新增map元素
// Map.set(key,value) 设置Map对象的键值对（键名，键值） 返回当前对象
swk.set('uname', '孙悟空');
swk.set('age', 600);
swk.set('master', '唐僧');
swk.set('weapon', '金箍棒');
console.log(swk); //Map(4) {'uname' => '孙悟空', 'age' => 600, 'master' => '唐僧', 'weapon' => '金箍棒'}
swk.set('age', 601);
console.log(swk);
// 键不存在，则添加一项
// 键存在，则修改
// 2. 获取map元素
// Map.get(key)返回key值对应的value 如果key不存在则返回undefined
console.log(swk.get('uname')); //孙悟空
console.log(swk.get({})); //undefined
// 3. 判断元素是否存在 has 返回布尔值
console.log(swk.has('uname')); //true
console.log(swk.has({})); //false
// 4. 删除映射元素
swk.delete('weapon');
console.log(swk); //Map(3) {'uname' => '孙悟空', 'age' => 600, 'master' => '唐僧'}
//5. 清空映射元素
// swk.clear();
// console.log(swk); //Map(0) {size: 0}
// 6. 映射元素长度
console.log(swk.size); //3
// 7. 可以使用for of 循环
for (let [key, value] of swk) {
console.log(key, value);
for (let item in value) {
console.log(value[item])
}
}
console.log('=====forEach=====');
// 8. 可以使用forEach 遍历
swk.forEach((item, index, map) => {
console.log(index); //uname age master
console.log('==========');
console.log(item); // 孙悟空 60 唐僧
console.log('==========');
console.log(map);
console.log('==========');
})
Maps 和 Objects 的区别
- 一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值（字符串，对下个，函数，NaN）。
- Map 中的键值是有序的，而添加到对象中的键则不是。
- Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
- Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
