【JavaScript】JS——Map数据类型-Toy模板网

这篇具有很好参考价值的文章主要介绍了【JavaScript】JS——Map数据类型。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

什么是Map?

存储键值对的对象。

能够记住键的原始插入顺序
任何值（对象或原始值）都可以作为键或值。

特性

Map中的一个键只能出现一次，新的值会覆盖旧的值。

迭代方式：for…of循环，返回一个 [key，value] 的数组。

键的相等：基于零值相等比较

NaN === NaN
-0 === +0

Map与Object的比较

Map默认不包含任何键。它只包含显示存入的键值对。object 有原型

let map1 = new Map()
let obj1 = new Object()

console.log(map1);
console.log(obj1);

【JavaScript】JS——Map数据类型,JS,javascript,前端,开发语言

安全性：Map是一种独立的数据结构，不存在对象原型。而在 Object上设置用户提供的键值对可能会允许攻击者覆盖对象的原型，这可能会引发潜在的安全问题：
- 原型链污染：攻击者通过提供特定的键值对，污染对象的原型链。例如，攻击者可以通过设置 __proto__ 属性来修改对象的原型，从而修改或劫持对象的原型上的方法和属性。
- 函数劫持：如果用户提供的键值对中的值是一个函数，并且该函数被直接赋值给对象的属性，攻击者可能会通过提供恶意的函数来劫持对象的属性。
- 对象重写：如果用户提供的键值对中的键与对象的原型中的属性冲突，攻击者可能通过提供特定的键值对来覆盖对象的原型属性。
- 访问限制绕过
```
const victim = {};
const attacker = { evilMethod: () => console.log('恶意方法被调用') };

victim.__proto__ = attacker;

// 调用原型上的恶意方法
victim.evilMethod(); // 恶意方法被调用
```

键的类型：Map的键可以为任何值（函数、对象或任何原始值），Object 的键必须为 String或 Symbol

键为函数实例：缓存函数调用结果

const cache = new Map();

function createCacheKey(fn, ...args) {
	return `${fn.name}(${args.join(',')})`;
}

function calculateResult(x, y) {
     const cacheKey = createCacheKey(calculateResult, x,  y);
            
if (cache.has(cacheKey)) {
     console.log('从缓存中获取结果');
     return cache.get(cacheKey);
}
        
const result = x + y;
      cache.set(cacheKey, result);
      return result;
}

console.log(calculateResult(2, 3)); // 输出：5
console.log(calculateResult(2, 3)); // 输出：从缓存中获取结果，5

键的顺序：Map 对象按照插入的顺序迭代条目、键和值。
大小：Map中的项目数量，使用 size属性获知，Object通常是通过获取 Object.keys()返回的数组长度。
迭代：Map 是可迭代对象，Object没有实现迭代协议，默认不能通过 for ...of实现迭代
性能：涉及频繁添加和删除键值对的场景表现更好
序列化或解析：Map 没有序列化或解析的原生支持；Object支持使用 JSON。stringify()序列化Object到JSON，使用 JSON.parse()解析JSON为Object

map的创建

语法

new Map()
new Map(iterable)

iterable 一个元素是键值对的数组或其他可迭代对象。

const map1 = new Map()
const map2 = new Map([
    [1, "a"],
    [2, "b"],
    [3, "c"],
    [4, "c"]
])

console.log(map1,map2);

【JavaScript】JS——Map数据类型,JS,javascript,前端,开发语言

map的属性

size()

map2.size // 4

map相关方法

get()

get(key) 获取该 map 中的指定元素

console.log(map2.get(1)); // a

set()

set(key, value) 向 Map 对象添加或更新一个指定的键值对

map1.set("a", 1)
map1.set("a", 3)
map1.set("b", 2)

// 链式添加 键值对
map1.set("bar","foo").set(1, "foobar")
console.log(map1);

【JavaScript】JS——Map数据类型,JS,javascript,前端,开发语言

has()

返回一个布尔值，指示具有指定键的元素是否存在.

delete()

delete(key)从该 map 中删除指定键的元素。

console.log(map1.delete("a"));	// true 删除成功返回true

clear()

移除该 map 中的所有元素.

map1.clear()
console.log(map1); // Map(0) {size: 0}

groupBy()

Map.groupBy(items, callbackFn)

Map对象每个元素都执行提供的回调函数，根据回调函数返回的值进行分组

const inventory = [
  { name: 'Tom', age: 9 },
  { name: 'Bob', age: 5 },
  { name: 'Alice', age: 23 },
  { name: 'Taixi', age: 12 },
];

const result = Map.groupBy(inventory, ({ age }) =>
age < 18 ? "teenager" : "young",
);
console.log(result.get("teenager"));

【JavaScript】JS——Map数据类型,JS,javascript,前端,开发语言

map的遍历

forEach()

forEach(callbackFn) 按插入顺序对该 map 中的每个键/值对执行一次提供的函数。

const map2 = new Map([
    [1, "a"],
    [2, "b"],
    [3, "c"],
    [4, "c"]
])

function logMapElement(value, key, map) {
    console.log(`m[${key}]=${value}=${map.get(key)}`);
}

map2.forEach(logMapElement)

entries()

按照插入顺序，返回一个新的可迭代迭代器对象，包含了Map对象中的所有键值对。

const mapIter = map2.entries()

console.log(mapIter.next().value);
console.log(mapIter.next().value);
console.log(mapIter.next().value);

【JavaScript】JS——Map数据类型,JS,javascript,前端,开发语言

keys() | values()

返回一个迭代器对象，keys()方法返回Map对象中每个元素的键，values()方法返回Map对象中每个元素的值。

const mapIter1 = map2.keys()

console.log(mapIter1.next().value);
console.log(mapIter1.next().value);
console.log(mapIter1.next().value);

const mapIter2 = map2.values()

console.log(mapIter2.next().value);
console.log(mapIter2.next().value);
console.log(mapIter2.next().value);