相同点
都是以key:value的形式对数据进行存储
不同点
- key值的数据类型范围不同
Object:key值只能是string、Symbol、number
Map:key值可以为任意值，目前存在的类型都支持
- key的顺序
Object:key升序的方式排序
Map:key以声明的顺序进行排序
- 创建方式不同
Object:创建方式
const obj1=new Object()
const obj2={}
const obj3=Object.create({})
Map:创建方式
const Map=new Map()
- key的调用方式不同
Object:可通过 . 或 []
Map:只能用原生的get方法进行调用
判断是否有某个属性
Object：1 in obj;判断obj中是否有1这个属性
Map：map.has(1);判断map中是否有a这个属性
- 设置属性的方式不同
Object:obj['1']='obj'
Map:map.set(1,'map')
- 删除key的方式
Object:delete obj['1']
Map:map.delete(1) 删除属性1
map.clear() 删除所有的属性
- 获取size
Object:object.keys(obj).length
Map:map.size // size属性无法修改
- Iterating(迭代)
Objcet不可以，Map可以
console.log(typeof new Map()[Symbol.iterator]) // function
console.log(typeof {}[Symbol.iterator]) // undefined
- JSON操作
Object:支持JSON.stringify和JSON.parse的操作
Map:不支持
- this不同
Object:
const f=function(){console.log(this)}
const obj={fn:f}
obj.fn() // 指向obj
Map:
const map=new Map()
map.set('fn',f)
map.get('fn')() // 指向window,取决于函数的调用者
map与数组/对象之间的相互转换
1.map与数组之间的转换
1.1 map转数组
let map = new Map()
map.set('key',1)
map.set('key1',2)
// 获取键数组
const kArr = Array.from(map.keys())
console.log(kArr) // ["key", "key1"]
// 获取值数组
const vArr = Array.from(map.values())
console.log(vArr) // [1, 2]
// 获取key,value成数组
const vkArr=[...map]
console.log(vkArr) // [["key", 1],["key1", 2]]
2.map与对象之间的转换
2.1 map转对象
let obj = {}
let map = new Map()
map.set(1, 1)
map.set(2, 3)
// 1.使用 for of
for (let [key, v] of map) {
obj[key] = v
}
// 2.使用 forEach
map.forEach((v, k, map) => {
obj[k] = v
})
console.log(obj, map) // {1: 1, 2: 3} Map(2) {1 => 1, 2 => 3}
2.1 对象转map
// 方案一
Object.keys(obj).forEach(key=>{
map.set(key,obj[key])
})
// 方案二
for(let key in obj){
if(Object.hasOwnProperty.call(obj, key)){
map.set(key,obj[key])
}
}
map与Object的使用场景
何时使用Object
- 当存储简单数字类型，并且key都是string或者symbol的时候，优先使用Object，字面量形式创建的Object更加高效
- 当需要联合this实现一些逻辑的时候，需要使用Object，Object中的非箭头函数函数指向调用者即Object本身，这点map做不到
- 与后端接口交互时，需要使用Object，JSON不支持map格式 何时使用Map
- 必须保证键的输出顺序与插入顺序一致时，优先使用map，因为Object在键全部是字符串或symbol时候的迭代顺序,在有数字或者汉字的情况下key会乱序
- 数据量大、增删频繁的时候优先使用map，map对增删频繁的场景做了优化
- 需要直接获取size
