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 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突

相关推荐
什么鬼昵称7 分钟前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色24 分钟前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_23442 分钟前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河44 分钟前
CSS总结
前端·css
NiNg_1_23444 分钟前
Vue3 Pinia持久化存储
开发语言·javascript·ecmascript
读心悦1 小时前
如何在 Axios 中封装事件中心EventEmitter
javascript·http
BigYe程普1 小时前
我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
神之王楠1 小时前
如何通过js加载css和html
javascript·css·html
余生H1 小时前
前端的全栈混合之路Meteor篇:关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍1 小时前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发