ES6中的数据结构Map的理解和描述

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

// 同一个引用下指向的地址相同