JavaScript映射与集合（Map、Set）数据类型基础知识介绍与使用

文章目录

• 映射与集合（Map、Set）
• • 映射（Map）
  • • Map常用的方法
    • 不要使用map[key]访问属性
    • 对象作为Map的键
    • Map的遍历与迭代
    • • 默认的迭代方式
      • forEach()
      
      
    • 从数组、对象创建Map
    • 从数组、Map创建对象
    
    
  • 集合（Set）
  • • 集合迭代
    
    
  • 总结
  
  

let clazz = {className:'9年1班'}
let school = new Map()
school.set(clazz,{stu1:'xiaoming',stu2:'xiaohong'})
console.log(school.get(clazz))

代码执行结果：

在对象中，对象是不能作为属性名称存在的，如果我们把对象作为属性名，也会发生奇怪的事：

let obj = {}
let objKey = {key:'key'}
obj[objKey] = 'haihaihai'
console.log(obj['[object Object]'])

代码执行结果：

发生这种现象的原因也非常简单，对象会把非字符串、Symbol类型的属性名转为字符串类型，对象相应的就转为'[object Object]'了，于是对象中就出现了一个名为'[object Object]'的属性。

Map键值比较方法

Map使用SameValueZero算法比较键值是否相等，和===差不多，但是NaN和NaN是相等的，所以NaN也可以作为键使用！

链式调用

由于map.set返回值是map本身，我们可以使用如下调用方式：

map.set(1,1)
.set(2,2)
.set(3,3)

Map的遍历与迭代

我们可以在以下三个函数的帮助下完成映射的迭代：

1. map.keys()——返回map所有键的可迭代对象；
2. map.values()——返回map所有值的可迭代对象；
3. map.entries()——返回map所有键值对的可迭代对象；

举个栗子：

let map = new Map([
['key1',1],
['key2',2],
['key3',3],
])

//遍历所有的键
for(let key of map.keys()){
console.log(key)
}

//遍历所有的值
for(let val of map.values()){
console.log(val)
}

//遍历所有的键值对
for(let ky of map.entries()){
console.log(ky)
}

代码执行结果：

遍历的顺序

遍历的顺序和元素插入顺序是相同的，这是和对象的区别之一。

默认的迭代方式

实际上，我们很少使用map.entries()方法遍历Map中的键值对，因为map.entries()是map的默认遍历方式，我们可以直接使用如下代码：

let map = new Map([
['key1',1],
['key2',2],
['key3',3],
])
for(let kv of map){

    console.log(kv)
}

码执行结果：

forEach()

我们还可以通过Map内置的forEach()方法，为每个元素设置一个遍历方法，就像遍历数组一样。

举例如下：

let map = new Map([
['key1',1],
['key2',2],
['key3',3],
])

map.forEach((val,key,map)=>{

    console.log(`${key}-${val}`)
})

代码执行结果：

从数组、对象创建Map

可能童鞋们已经发现了，在上面的案例中，我们使用了一种独特的初始化方式（没有使用set方法）

let map = new Map([
['key1',1],
['key2',2],
['key3',3],
])

我们通过向new Map()传入一个数组，完成了快速的映射创建。

我们还可以通过Object.entires(obj)方法将对象转为数组，该数组的格式和Map需要的格式完全相同。

举个例子：

let obj = {
xiaoming:'heiheihei',
xiaohong:'hahahahah'
}
let map = new Map(Object.entries(obj))

console.log(map)

代码执行结果：

Object.entries(obj)会返回obj对应的数组：[['xiaoming':'heiheihei'],['xiaoming':'hahahahah']]。

从数组、Map创建对象

Object.fromEntries()和Object.entries()功能相反，可以把数组和Map转为对象。

数组转对象：

let obj = Object.fromEntries([
['key1','val1'],
['key2','val2'],
['key3','val3'],
])

console.log(obj)

代码执行结果：

Map转对象：

let map = new Map()

map.set('key1','val1')
.set('key2','val2')
.set('key3','val3')
let obj = Object.fromEntries(map)

console.log(obj)

代码执行结果：

map.entries()会返回映射对应的键值对数组，我们也可以使用一种稍微麻烦的方式：

let obj = Object.fromEntries(map.entries())

在Map中使用的方法，Set同样适用：

1. set.keys()——返回一个包含所有值的可迭代对象
2. set.values()——返回值和set.keys()完全相同
3. set.entries()——返回[val,val]可迭代对象

看起啦这些方法有些功能上的重复，很奇怪。实际上，和forEach一样，都是为了和Map兼容。

总结

Map 是一个带键的数据项的集合。

与普通对象 Object 的不同点主要是任何类型都可以作为键，包括对象、NaN。

Set —— 是一组值的集合。

常用方法和属性：