Map、Set和Object的区别

Set

ES6提供了新的数据结构Set,类似于数组,但成员值是唯一的,没有重复的值

Set本身是一个构造函数(要 new),用来生成Set数据结构

Set对象允许你储存任何类型的唯一值,无论是原始值或者是对象引用

每个值在 Set 中只能出现一次,因此常用做数组去重

可以接受一个数组作为参数,进行初始化

javascript 复制代码
const s = new Set([1,2,3,4,4,3])
console.log([...s]) // [1,2,3,4]

Set对象的几个常用方法和属性

add() 向 Set 添加新元素
clear() 从 Set 中删除所有元素
delete() 删除由其值指定的元素
has() 如果值存在则返回 true
forEach() 为每个元素调用回调
keys() 返回 Set 对象中值的数组
size 返回元素个数

javascript 复制代码
const s1 = new Set(["a","b","c","d"]);
s1.add("f");//添加f
s1.delete("a");//删除a
console.log(s1.has("b"));//是否含有b,返回布尔值
s1.clear();//全部清除
const ary = [...s1];
console.log(ary);

Set对象的作用

去重

javascript 复制代码
let mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]

求并集(合并两个Set对象)

javascript 复制代码
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
let union = new Set([...a, ...b]); // {1, 2, 3, 4}

求交集

javascript 复制代码
let a = new Set([1, 2, 3])
let b = new Set([2, 3, 6])
let intersect = new Set([...a].filter(x => b.has(x)))  // {2, 3} 利用数组的filter方法

求差集

javascript 复制代码
let a = new Set([1, 2, 3])
let b = new Set([4, 3, 2])
let difference = new Set([...a].filter(x => !b.has(x))) //  {1} 

Map

Map对象保存键值对

Map本身是一个构造函数(要 new),用来生成Map数据结构

Map对象允许你储存任何类型的作为一个键或一个值

可以接受一个数组作为参数,进行初始化

javascript 复制代码
const map = new Map([['key1','value1'],['key2','value2']])
console.log(map) // {'key1' => 'value1', 'key2' => 'value2'}

// 把对象做为key
const myKey = {dec:'本对象做为map键'};
map.set(myKey, 'myKey的键值'); //  {'key1' => 'value1', 'key2' => 'value2', {...} => 'myKey的键值'}
map.get(myKey); // 'myKey的键值'

Map的几个常用方法

set(key, val) 向Map中添加新元素

get(key) 通过键值查找特定的数值并返回

has(key) 判断Map对象中是否有Key所对应的值,有返回true,否则返回false

delete(key) 通过键值从Map中移除对应的数据

clear() 将这个Map中的所有元素删除

javascript 复制代码
const map = new Map([['key1','value1'],['key2','value2']]);

map.set('myKey', 'myKey的键值'); // {'key1' => 'value1', 'key2' => 'value2', 'mykey' => 'myKey的键值'}
map.get('myKey'); // 'myKey的键值'
map.has('myKey'); // true
map.delete('myKey'); // true
map.clear(); // undefined

keys() 返回键名的遍历器

values() 返回键值的遍历器

entries() 返回键值对的遍历器

forEach() 使用回调函数遍历每个成员

javascript 复制代码
const map = new Map([['a', 11], ['b',  22]])

for (let key of map.keys()) {
  console.log(key)
}
// "a"
// "b"

for (let value of map.values()) {
  console.log(value)
}
// 11
// 22

for (let item of map.entries()) {
  console.log(item)
}
// ["a", 11]
// ["b", 22]

console.log(map.entries===map[Symbol.iterator]);//true
for (let item of map[Symbol.iterator]()) {
    console.log(item)
}
// ["a", 11]
// ["b", 22]

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value)
}
// "a" 11
// "b" 22

// for...of...遍历map等同于使用map.entries()

for (let [key, value] of map) {
  console.log(key, value)
}
// "a" 11
// "b" 22

map.forEach(item=>{
    console.log(item);
})//11 22

Map与对象的互换

javascript 复制代码
const obj = {}
const map = new Map()
map.set('a', 11)
map.set('b', 22)
for(let [key,value] of map) {
  obj[key] = value
}
console.log(obj) // {a:11, b: 22}

Map和Object的区别

1.Object的key 必须是简单数据类型(整数、字符串、symbol),map的key可以是任何类型

2.Map元素插入顺序是FIFO,object没有

3.Map继承Object

4.Map在存储大量元素的时候性能表现更好

5.写入删除密集的情况应该使用 Map

Map和Set的区别

1.一个Object 的键只能是字符串或者 Symbols,但一个Map 的键可以是任意值

2.Map中的键值是有序的(FIFO 原则),而添加到对象中的键则不是

3.Map的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算

4.Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突

相关推荐
顾安r2 小时前
11.8 脚本网页 星际逃生
c语言·前端·javascript·flask
Hello.Reader2 小时前
Data Sink定义、参数与可落地示例
java·前端·网络
im_AMBER2 小时前
React 17
前端·javascript·笔记·学习·react.js·前端框架
一雨方知深秋2 小时前
2.fs模块对计算机硬盘进行读写操作(Promise进行封装)
javascript·node.js·promise·v8·cpython
谷歌开发者3 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (六)
前端·chrome·学习
一晌小贪欢3 小时前
【Html模板】电商运营可视化大屏模板 Excel存储 + 一键导出(已上线-可预览)
前端·数据分析·html·excel·数据看板·电商大屏·大屏看板
发现你走远了3 小时前
连接模拟器网页进行h5的调试(使用Chrome远程调试(推荐)) 保姆级图文
前端·chrome
街尾杂货店&4 小时前
css - 实现三角形 div 容器,用css画一个三角形(提供示例源码)简单粗暴几行代码搞定!
前端·css
顺凡4 小时前
删一个却少俩:Antd Tag 多节点同时消失的原因
前端·javascript·面试
小白路过4 小时前
CSS transform矩阵变换全面解析
前端·css·矩阵