1、什么是Map?
JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。
Map类型的数据结构,类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象、null、undefined、false、0、空字符串,false等)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。
利用Map构造函数生成一个简单地Map类型对象
const map = new Map(
[
['name', '李大师'],
['title', 'title']
]
)
console.log(map)
2、Map实例对象的属性和操作方法
(1) Map.prototype.size 这个属性返回Map的总得成员数量
(2) Map.prototype.set(key, value) , 设置Map的成员,如果没有这个key,则新增,如果已经有这个key,则使用新值覆盖旧值
const map = new Map()
const obj = { a : 1}
map.set(obj, 2)
map.set(null, 0)
map.set('a' ,1)
map.set(0, false)
map.size // 4
(3)Map.prototype.get(key) get
方法读取key
对应的键值,如果找不到key
,返回undefined
。
(4)Map.prototype.has(key) has
方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。
(5)Map.prototype.delete(key) delete
方法删除某个键,删除成功后返回true
。如果删除失败,返回false
。
(6)Map.prototype.clear() clear
方法清除所有成员,没有返回值。
const map = new Map()
const obj = { a : 1}
map.set(obj, 2)
map.set(null, 0)
map.set('a' ,1)
map.set(0, false)
map.size // 4
map.get(obj) // 2
map.get(null) // 0
map.has(0) // true
map.delete(0) // true
map.clear()
map.size // 0
3、Map数据结构的遍历器方法
Map.prototype.keys(), Map.prototype.values(), Map.prototype.entries(), Map.prototype.forEach()
注意在使用forEach时,和数组以及Set结构中类似,函数参数中的第一个参数是value,第二个是key,使用时要注意这一点
const map = new Map()
const obj = { a : 1}
map.set(obj, 2)
map.set(null, 0)
map.set('a' ,1)
map.set(0, false)
map.size // 4
map.get(obj) // 2
map.get(null) // 0
map.has(0) // true
map.delete(0) // true
const keys = map.keys()
for(let item of keys) {
console.log(item)
}
// {a :1 }, null , a
const values = map.values()
for(let item of values) {
console.log(item)
}
//2 ,0 ,1
const en = map.entries()
for(let item of en) {
console.log(item)
}
// [ {a: 1}, 2] [null, 0] , ['a', 1]
map.forEach((value, key)=>{
console.log(value, key)
})
// 2 {a: 1} 0 null 1 'a'
4、Map与数组Array之间的转换
可以使用扩展运算符..., 也可使用Array.prototype.form()方法
const map = new Map()
map.set(0, 0)
map.set(1, 1)
map.set(2, 2)
map.set(null, null)
const array = Array.from(map)
const arr2 = [...map]
console.log(array)
// 输出 [[0,0], [1,1], [2, 2], [null, null]]
console.log(arr2)
// 输出 [[0,0], [1,1], [2, 2], [null, null]]
将数组结构的数组转为map, 注意由于Map是键值对类型的结构,那么必须是二维数组的形式
const arr1 = [ [ 1, 2 ], [3, 4], [5,6]]
const map1 = new Map(arr1)
const en1 = map1.entries()
for(let item of en1) {
console.log(item)
}
// [1, 2], [3, 4], [5,6]
const arr2 = [[1, 2, 3], [ 4,5,6,7], [8,9,10]]
const map2 = new Map(arr2)
const en2 = map2.entries()
for(let item of en2) {
console.log(item)
}
// [1, 2], [4, 5] , [8 ,9]
const arr3 = [[ 1, [2, 3]], [4, [5, 6, 7]], [8, [9, [10,11]]] ]
const map3 = new Map(arr3)
const en3 = map3.entries()
for(let item of en3) {
console.log(item)
}
// [1, [2, 3]], [4, [5,6,7]], [8, [9, [10, 11]]]
将JSON或者对象转为Map
JSON对象或者合法的Object对象的key都是字符串,那么转为Map非常容易
function objectTomap(obj) {
const map = new Map();
for (let k of Object.keys(obj)) {
map.set(k, obj[k]);
}
return map
}
const obj = {
a : 1 ,
b: 2,
c: 3
}
const map = objectTomap(obj)
const en = map.entries()
for(let item of en) {
console.log(item)
}
// ['a', 1], ['b', 2], ['c', 3]
5、注意事项
在map中,同一个变量在key中是不允许重复的,但是同一个引用类型的对象却是可以的
const map = new Map()
const arr = [1]
map.set(arr, 1)
map.set([1], 1)
map.set([1], 2)
map.get(arr) // 1
map.get([1]) // undefined
// 这是因为[1] != [1] ,数组和对象都指向 不同的引用的地址,那么即使
map.set([1], 1)
map.get([1]) // undefined, 因为这里的[1]已经是一个新的数组,而不是上面那个set操作里的那个[1], 如果想这么设置就需要定义一个变量
const arr2 = [1]
map.set(arr2, 1)
map.get(arr2) // 1, 因为这里的arr2是一个独一无二的引用
const arr3 = arr2
map.set(arr3, 2)
map.get(arr2) // 2
map.get(arr3) // 2
// 同一个引用下指向的地址相同