Es6 Map详解：键值对操作与Object对比-优快云博客

一、概述

map数据类型是Es6新增的一种常用的引用数据类型
他与Array和Object不同,他是键值对集合

二、map的使用

1. 定义

先定义再赋值

let mapInfo = new Map()
mapInfo.set(name,"小靳靳")

定义时就赋值

// new Map([ [key,value] , [key,value] ]) kay是属性,value是属性值
let mapInfo  = new Map([ [name,'小靳靳'], ["age",'25'],["sex","男"]])

2. set()

mapInfo.set("name",'我修改了')

注 : 连续设置就会被覆盖掉之前设置的内容

3. get()

通过这个方法来获取对应的值,如果获取不存在的属性,返回undefined。

4. has()

查询键在实例中是否存在,返回的是布尔值

5. delete()

删除map实例中的键,删除不存在的键返回false

6. clear()

let mapInfo  = new Map([ ["name",'小靳靳'], ["age",'25'],["sex","男"]])
mapInfo.clear() //清空map实例的数据

7. forEach()

将map实例遍历,参数一:键值,参数二:键名,参数三:map实例

和数组的分开,map不是数组,他是Object类型

mapInfo instanceof Object //true

let mapInfo  = new Map([ ["name",'小靳靳'], ["age",'25'],["sex","男"]])
mapInfo.forEach((value,key,map)=>{
    console.log(value,key,map)
 //小靳靳,name,Map(3) {'name' => '小靳靳', 'age' => '25', 'sex' => '男'}
})

8. size属性

获取个数

let mapInfo  = new Map([ ["name",'小靳靳'], ["age",'25'],["sex","男"]])
mapInfo.size // 3

三、map和Object区别

此次我们来详细的讲解一下两者的区别

首先先了解Object

声明

Object也是我们接触js最常用的一种引用数据类型,可用于存键值对的集合

let obj = {
    name : '小靳靳',
    age : '28',
    sex : '男'
}

map 的声明 => new Map()

两者的不同点
键类型

Object 一般键的类型都是串,如果不是,也会转成串

const obj1 = {
	name: "小金金"
}
obj1["sex"] = "男"
obj1[[1, 2]] = 'arr' //会转成字符串
obj1[{"name" :'obj'}]  = 'obj' //特殊情况以[Object,Object]输出
obj1[1] = 1
obj1['2'] = 2  //不管是number还是字符串,最后都会转成字符串
console.log(obj1) 
//{1: 1, 2: 2, name: '小金金', sex: '男', 1,2: 'arr', [object Object]: 'obj'}

Map 键可以根据自己的类型进行定义,包括对象\数组\函数\等,他不会想上面进行类型转换

let map = new Map()
//key和value可以是function\obj\string\number\array
map.set(66,66)
map.set("str","字符串")
map.set([1,2],"arr")
map.set([2,3],[2,3])
map.set({"name":"小靳靳"},"obj")
map.set({"name":"小靳靳1"},{"name":"小靳靳1"})
map.set(function foo(){},{"name":"小靳靳1"})

键顺序

Object 键是无顺序的,不会按我们所定义的顺序进行存储

map 键是有顺序的,我们怎么定义的,他会按照我们定义的顺序输出

//Object
const obj = {
    4:4,
    '3':'3',
    2:2,
    1:1,
}
console.log(obj,Object.keys(obj))
//{1: 1, 2: 2, 3: '3', 4: 4}
//['1', '2', '3', '4']

//map
let map = new Map()
map.set(4,4)
map.set(3,3)
map.set(2,2)
map.set(1,1)
console.log(map,map.keys())

// Map(4) {4 => 4, 3 => 3, 2 => 2, 1 => 1}
// [[Entries]]
// 0: {4 => 4}
// 1: {3 => 3}
// 2: {2 => 2}
// 3: {1 => 1}
// size: 4
// [[Prototype]]: Map

键的个数

Object 个数我们需要通过Object自带的key方法或者for in来计算

Map 有自己的size属性,直接去访问

//Object
const obj = {"name" : "小靳靳","age":"25","sex":"男"}
console.log(Object.keys(obj).length) // 3
let count = 0
for (const i in obj) {
  num++
}
console.log(num) // 3

//map
const map = new Map()
map.set("name","小靳靳")
map.set("age", "25")
map.set("sex", "男")
console.log(map.size) // 3