首页 > 其他 > 详细

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

时间:2019-08-31 15:45:20      阅读:81      评论:0      收藏:0      [点我收藏+]

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

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

 

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

原文:https://www.cnblogs.com/liquanjiang/p/11438709.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!