Js基础_Map()方法

一、Map对象描述

1.描述

Map对象在迭代时会根据对象中的元素插入顺序进行一个for…of循环，然后返回一个形式为[key，value]

2.Objects和maps的比较

在之前很多时候我都把object当作maps()使用，在以下情况里使用 Map 会是更好的选择：

Map属性

1. Map.length
   属性 length 的值为 0 。
   想要计算一个Map 中的条目数量， 使用 Map.prototype.size.
2. get Map[@@species]
   本构造函数用于创建派生对象。
3. Map.prototype (en-US)
   表示 Map 构造器的原型。 允许添加属性从而应用于所有的 Map 对象。

二、示例

1.使用Map对象

let map = new Map()
let Obj = {}
let fun = function(){}
let str = 'a String'

map.set(str,'a String value')
map.set(Obj,'Obj value')
map.set(fun,'fun value')

console.log(map.size)//3

//读取值
console.log(map.get(str))//a String value
console.log(map.get(Obj))//Obj value
console.log(map.get(fun))//fun value

console.log(map.get('a String'))//a String value 因为str ==='a String'
console.log(map.get({}))//undefined 因为Obj!=={}
console.log(map.get(function(){}))//undefined 因为KeyFunc !== function(){}

2.Map的迭代

let maps = new Map()
maps.set(0, 'zero')
maps.set(1, 'one')
maps.set(2, 'two')

// 1. for...of迭代map对象
for (const [key,value] of maps) {
  console.log(key + '=' +value)
}

// 2.for...of迭代键
for (const key of maps.keys()) {
  console.log(key)
}

// 3.for...of迭代值
for (const value of maps.values()) {
  console.log(value)
}

// 4.entries for...of迭代map对象
for (const [key,value] of maps.entries()) {
  console.log(key + '=' +value)
}

// 5.entries 新的迭代器对象
const mapEntries = maps.entries()
console.log(mapEntries.next().value)
console.log(mapEntries.next().value)
console.log(mapEntries.next().value)
console.log(mapEntries.next().value)
// 6.forEach()方法迭代
maps.forEach(function(value,key){
  console.log(key+'='+value)
})

3.Map与数组的关系

let kvArray = [["key1", "value1"], ["key2", "value2"]];

// 使用常规的Map构造函数可以将一个二维键值对数组转换成一个Map对象
let myMap = new Map(kvArray);

myMap.get("key1"); // 返回值为 "value1"

// 使用Array.from函数可以将一个Map对象转换成一个二维键值对数组
console.log(Array.from(myMap)); // 输出和kvArray相同的数组

// 更简洁的方法来做如上同样的事情，使用展开运算符
console.log([...myMap]);

// 或者在键或者值的迭代器上使用Array.from，进而得到只含有键或者值的数组
console.log(Array.from(myMap.keys())); // 输出 ["key1", "key2"]

三、Map方法

1.get()和set()方法

get()方法 返回某个Map对象中的一个指定元素
set()方法 为Map对象添加或更新一个指定了键（key）和值（value）的（新）键值对。

const map1 = new Map();
map1.set('bar', 'foo');

console.log(map1.get('bar'));//foo
console.log(map1.get('baz'));//undefined

2.clear()方法

clear()方法 清除maps对象中的所有元素

let maps = new Map()
maps.set(0, 'zero')
maps.set(1, 'one')
maps.set(2, 'two')

// clear()方法
console.log(maps.size)//3
//清除maps对象中的所有元素
maps.clear()
console.log(maps.size)//0

3.delete()方法

delete()方法 删除对象中指定的元素

let maps = new Map()
maps.set(0, 'zero')
maps.set(1, 'one')
maps.set(2, 'two')

console.log(maps.has(0))
// delete()方法 删除对象中指定的元素
console.log(maps.delete(0))
console.log(maps.has(0))

4.entries()方法

entries()方法 返回一个迭代顺序与 Map 对象的插入顺序相同的迭代对象

let maps = new Map()
maps.set(0, 'zero')
maps.set(1, 'one')
maps.set(2, 'two')

// 新的迭代器对象
let mapsEntries = maps.entries()
console.log(mapsEntries.next().value)
console.log(mapsEntries.next().value)

5.forEach()方法

forEach()方法 按照插入顺序依次对 Map 中每个键/值对执行一次给定的函数

function logMapElements(value, key, map) {
  console.log(`${key} = ${value}`);
}
new Map([['foo', 3], ['bar', {}], ['baz', undefined]])
  .forEach(logMapElements);
// foo = 3
// bar = [object Object]
// baz = undefined

6.has()方法

方法has() 返回一个bool值，用来表明map 中是否存在指定元素

let maps = new Map()
maps.set(0, 'zero')
maps.set(1, 'one')

// has()方法
console.log(maps.has(1))
console.log(maps.has(2))

7.keys()和values()

keys()方法 返回一个迭代顺序与 Map 对象的插入顺序相同的迭代对象的键
values()方法 返回一个迭代顺序与 Map 对象的插入顺序相同的迭代对象的值

let maps = new Map()
maps.set(0, 'zero')
maps.set(1, 'one')

let mapsKey = maps.keys()
let mapValues = maps.values()
// keys()方法
console.log(mapsKey.next().value)//0
console.log(mapsKey.next().value)//1

// values()方法
console.log(mapValues.next().value)//zero
console.log(mapValues.next().value)//one