棕色网站设计,网页制作与网站建设实战大全 pdf下载,制作公司工作网站,php做网站的分站【JavaScript】JS——Map数据类型 什么是Map?特性Map与Object的比较 map的创建map的属性map相关方法map的遍历 什么是Map?
存储键值对的对象。 能够记住键的原始插入顺序任何值#xff08;对象或原始值#xff09;都可以作为键或值。
特性
Map中的一个键只能出现一次对象或原始值都可以作为键或值。
特性
Map中的一个键只能出现一次新的值会覆盖旧的值。
迭代方式for…of循环返回一个 [keyvalue] 的数组。
键的相等基于零值相等比较
NaN NaN
-0 0Map与Object的比较
Map默认不包含任何键。它只包含显示存入的键值对。object 有原型
let map1 new Map()
let obj1 new Object()console.log(map1);
console.log(obj1);安全性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);map的属性
size()
map2.size // 4map相关方法
get()
get(key) 获取该 map 中的指定元素
console.log(map2.get(1)); // aset()
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);has()
返回一个布尔值指示具有指定键的元素是否存在.
delete()
delete(key)从该 map 中删除指定键的元素。
console.log(map1.delete(a)); // true 删除成功返回trueclear()
移除该 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));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);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);
