# map
# map对象
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
- new Map中填入二维数组，大数组里的小数组只有两个参数，一个是map的key，一个是value
- 利用Symbol.iterator函数
- set设置
const m = new Map();
// Initialize map with nested arrays
const m1 = new Map([
["key1", "val1"],
["key2", "val2"],
["key3", "val3"]
]);
console.log(m1.size); // 3
console.log(m1)//Map(3) {'key1' => 'val1', 'key2' => 'val2', 'key3' => 'val3'}
// Initialize map with custom-defined iterator
const m2 = new Map({
[Symbol.iterator]: function*() {
yield ["key1", "val1"];
yield ["key2", "val2"];
yield ["key3", "val3"];
}
});
console.log(m2.size); // 3
// Map expects values to be key/value whether they are provided or not
const m3 = new Map([[]]);
console.log(m3.has(undefined)); // true
console.log(m3.get(undefined)); // undefined
# Map 和 Object 的区别
- 一个 Object 的键只能是数字、字符串或者 Symbols，
但一个 Map 的键可以是任意值。 - Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
- Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
- Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
# Map的key
- 字符串时
var myMap = new Map();
var keyString = "a string";
myMap.set(keyString, "和键'a string'关联的值");
myMap.get(keyString); // "和键'a string'关联的值"
myMap.get("a string"); // "和键'a string'关联的值"
// 因为 keyString === 'a string'
- 对象时
var myMap = new Map();
var keyObj = {};
myMap.set(keyObj, "和键 keyObj 关联的值");
myMap.get(keyObj); // "和键 keyObj 关联的值"
myMap.get({}); // undefined, 因为 keyObj !== {}
- 函数时
var myMap = new Map();
var keyFunc = function () {}, // 函数
myMap.set(keyFunc, "和键 keyFunc 关联的值");
myMap.get(keyFunc); // "和键 keyFunc 关联的值"
myMap.get(function() {}) // undefined, 因为 keyFunc !== function () {}
- NaN时
var myMap = new Map();
myMap.set(NaN, "not a number");
myMap.get(NaN); // "not a number"
var otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"
const m = new Map();
const a = 0/"", // NaN
b = 0/"", // NaN
pz = +0,
nz = -0;
console.log(a === b); // false
console.log(pz === nz); // true
虽然 NaN 和任何值甚至和自己都不相等(NaN !== NaN 返回true)，NaN作为Map的键来说是没有区别的。
const m = new Map();
console.log(m.has("firstName")); // false
console.log(m.get("firstName ")); // undefined
console.log(m.size); // 0
m.set("firstName", "Matt")
.set("lastName", "Frisbie");
console.log(m.has("firstName")); // true
console.log(m.get("firstName")); // Matt
console.log(m.size); // 2
m.delete("firstName"); // deletes only this key/value pair
console.log(m.has("firstName")); // false
console.log(m.has("lastName")); // true
console.log(m.size); // 1
m.clear(); // destroys all key/value pairs in this Map instance
console.log(m.has("firstName")); // false
console.log(m.has("lastName")); // false
console.log(m.size); // 0
# map的迭代
- 和对象类型有entries，keys，values等方法
- 转为二维数组，可以使用三点运算符简单操作
- for of
var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
// 将会显示两个 log。 一个是 "0 = zero" 另一个是 "1 = one"
for (var [key, value] of myMap) {
console.log(key + " = " + value);
}
for (var [key, value] of myMap.entries()) {
console.log(key + " = " + value);
}
/* 这个 entries 方法返回一个新的 Iterator 对象，
它按插入顺序包含了 Map 对象中每个元素的 [key, value] 数组。*/
// 将会显示两个log。 一个是 "0" 另一个是 "1"
for (var key of myMap.keys()) {
console.log(key);
}
/* 这个 keys 方法返回一个新的 Iterator 对象， 它按插入顺序包含了 Map 对象中每个元素的键。 */
// 将会显示两个log。 一个是 "zero" 另一个是 "one"
for (var value of myMap.values()) {
console.log(value);
}
/* 这个 values 方法返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的值。 */
- forEach
var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
// 将会显示两个 logs。 一个是 "0 = zero" 另一个是 "1 = one"
myMap.forEach(function(value, key) {
console.log(key + " = " + value);
}, myMap)
- 与Object不同的是，Map实例会维护键值对的插入顺序，因此可以根据插入顺序执行迭代操作。
- 映射实例可以提供一个迭代器，能以插入顺序生成[key,value]形式的数组，可以通过entries()方法或者(Symbol.iterator属性，它引用了entries())取的迭代器
const m = new Map([
["key1", "val1"],
["key2", "val2"],
["key3", "val3"]
]);
console.log(m.entries === m[Symbol.iterator]); // true
for (let pair of m.entries()) {
console.log(pair);
}
// [key1,val1]
// [key2,val2]
// [key3,val3]
for (let pair of m[Symbol.iterator]()) {
console.log(pair);
}
// [key1,val1]
// [key2,val2]
// [key3,val3]
# map对象操作
- map 与array的转化
var kvArray = [["key1", "value1"], ["key2", "value2"]];
// Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
var myMap = new Map(kvArray);
console.log(myMap)
//Map(2) {"key1" => "value1", "key2" => "value2"}
console.log(myMap.get("key1"))
//value1
// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
var outArray = Array.from(myMap);
console.log(outArray)
//[["key1", "value1"],["key2", "value2"]]
- map的克隆
var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
var myMap2 = new Map(myMap1);
console.log(myMap2)
//{"key1" => "value1", "key2" => "value2"}
console.log(myMap1 == myMap2); //false
- map的合并
var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos， three
var merged = new Map([...first, ...second]);
console.log(merged)
//{1 => "uno", 2 => "dos", 3 => "three"}
# Map遍历时修改键值
- 原始对象的键改了无效
- 对象作为键,如果修改了他内部属性，因为引用地址没变化，所以生效的
const m1 = new Map([['key1','val1']])
for(let key of m1.keys()){
key = 'newkey'
console.log(key)//newkey
console.log(m1.get('newkey'))//undefined
console.log(m1.get('key1'))//val1
}
const s ={id:1}
const m1 = new Map([[s,'val1']])
for(let key of m1.keys()){
key.id = 'newkey'
console.log(key)//{id: 'newkey'}
console.log(m1.get(s))//val1
}
- Map实例，即使删除了为对象的键，这个值就仍然保存在Map实例中，只不过就不能根据原来的名字获取到了，可以利用keys()获取
- 所以如果Map对象中某个键不需要了，现在Map中删除，再对那个键进行处理
let s ={id:1}
const m1 = new Map([[s,'val1']])
s= null
for(let key of m1.keys()){
console.log(key)//{id: 1}
key.id = 'newkey'
console.log(key)//{id: 'newkey'}
console.log(m1.get(s))//undefined
}
console.log(m1)//{{…} => 'val1'}
console.log(s)//null
let s2 ={id:2}
const m2 =new Map([[s2,'val1']])
for(let key of m2.keys()){
console.log(key)//{id: 2}
key.id = 'newkey'
console.log(key)//{id: 'newkey'}
console.log(m2.get(s2))//val1
}
m2.set(s2,1000)
console.log(m2.get(s2))//1000
m2.delete(s2)
console.log(m2.get(s2))//undefined
console.log(s2)//{id: 'newkey'}
# WeakMap
- WeakMap的键是弱引用，可以被销毁，销毁在一定时间后，这条记录也会被垃圾回收机制回收，因为没有迭代方法，即使不回收，也再也拿不到这个值了。
- WeakMap的键只能是Object类型的(简单类型可以先包装)
let s ={id:1}
const m1 = new WeakMap([[s,'val1']])
s= null
console.log(m1.get(s))//undefined
setTimeout(()=>{
console.log(m1)
},5000)
console.log(m1)//??
console.log(s)//null
set()初始化了一个新对象并将它作为一个字符串的键，因为没有指向这个对象其他引用。所以当执行完这行代码后， 这个对象键会被当成垃圾回收. 这个键值对就从弱映射中消失了，称为了一个空映射.
const wm = new WeakMap();
wm.set({}, "val");
console.log(wm)
这里有个container对象维护着一个弱映射的引用，因此这个对象键不会被当成垃圾回收
const wm = new WeakMap();
const container = {
key: {}
};
wm.set(container.key, "val");
console.log(wm)
# WeakMap应用
- 模拟私有变量
const wm = new WeakMap();
class User {
constructor(id) {
this.idProperty = Symbol('id');
this.setId(id);
}
setPrivate(property, value) {
console.log(wm.get(this))
const privateMembers = {};
// console.log(privateMembers)
privateMembers[property] = value;
wm.set(this, privateMembers);
}
getPrivate(property) {
// console.log(this)// User {idProperty: Symbol(id)}
// console.log(property)// Symbol(id)
// console.log(wm.get(this))//{Symbol(id): 123}
// console.log(wm.get(this)[property])//123
return wm.get(this)[property];
}
setId(id) {
this.setPrivate(this.idProperty, id);
}
getId() {
return this.getPrivate(this.idProperty);
}
}
const user = new User(123);
console.log(user.getId()); // 123
user.setId(456);
console.log(user.getId()); // 456
// 并不是真正的私有，还是可以有办法获取
console.log(wm.get(user)[user.idProperty]); // 456
用闭包把WeakMap包装起来，这样就可以把弱映射与外界完全隔离开了，但是又引进了闭包。
const User = (() => {
const wm = new WeakMap();
class User {
constructor(id) {
this.idProperty = Symbol('id');
this.setId(id);
}
setPrivate(property, value) {
const privateMembers = wm.get(this) || {};
privateMembers[property] = value;
wm.set(this, privateMembers);
}
getPrivate(property) {
return wm.get(this)[property];
}
setId(id) {
this.setPrivate(this.idProperty, id);
}
getId(id) {
return this.getPrivate(this.idProperty);
}
}
return User;
})();
const user = new User(123);
console.log(user.getId()); // 123
user.setId(456);
console.log(user.getId()); // 456
当删除了#login这个元素，Map中还会保留着按钮的引用，除非明确从映射中删除，这种情况下适合用WeakMap
const m = new Map();
const loginButton = document.querySelector('#login');
// Associates some metadata with the node
m.set(loginButton, {disabled: true});
# Map相关的面试题
# Map 和 Objcet比较
Map和Object对业务没太大影响，但是如果考虑到性能和内存的优化就可以对比二者的差异。
- 内存占用：在固定的内存对比下，Map大约可以比Object多存储50%的键值对
- 插入性能：Map在大多数浏览器稍微快一点，如果大批量的数据，Map的优势就是比较明显
- 查找速度：二者差异极小，如果少量数据，Object有时候会更快，在把Object当成数组的情况下(比如使用连续的整数作为属性)，浏览器引擎可以进行优化，在内存中使用更高效的布局，Map做不到这一点。
- 删除性能：Object的delete一直被诟病，为此，出现一些伪删除，把属性设为null/undefined的折中方案。而Map的delete操作都比插入和查找更快，如果涉及大量删除操作，优选Map
# 介绍下 Set、Map、WeakSet 和 WeakMap 的区别
Set 和 Map 主要的应用场景在于 数据重组 和 数据储存
- Set 是一种叫做集合的数据结构
add(value)：新增，相当于 array里的push
delete(value)：存在即删除集合中value
has(value)：判断集合中是否存在 value
clear()：清空集合
size：个数
- WeakSet 对象允许你将弱引用对象储存在一个集合中
WeakSet 与 Set 的区别
- WeakSet 只能储存对象引用，不能存放值，而 Set 对象都可以，set存储的对象，如arr，即使将arr=null，依旧在set集合中存在且保持原先存在的值！！！而Weakset则会移除该数组，同时如果直接在weakset中设置了一个数组，因为根本无法在找到，也会在稍后被移除(可以声明，然后add变量名)
- [如果同时有set和weakset都引用了某个值，然后arr=null，set和weakset都会存在这个值,但注意：xxx.has(arr)两者均为false;如果set删除了该选项，则weakset中的也会删除]
- WeakSet 对象中储存的对象值都是被弱引用的，即垃圾回收机制不考虑 WeakSet 对该对象的应用，如果没有其他的变量或属性引用这个对象值，则这个对象将会被垃圾回收掉（不考虑该对象还存在于 WeakSet 中），所以，WeakSet 对象里有多少个成员元素，取决于垃圾回收机制有没有运行 ，运行前后成员个数可能不一致，遍历结束之后，有的成员可能取不到了（被垃圾回收了），WeakSet 对象是无法被遍历的，也没有办法拿到它包含的所有元素 [故而用不了size+遍历以及clear等方法,也只能存引用类型]
- Map 是一种叫做字典的数据结构：任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作Map构造函数的参数
set(key, value)：向字典中添加新元素
get(key)：通过键查找特定的数值并返回
has(key)：判断字典中是否存在键key
delete(key)：通过键 key 从字典中移除对应的数据
clear()：将这个字典中的所有元素删除
size：返回字典中所包含的元素个数
- WeakMap
+ 只接受对象作为键名（null除外），不接受其他类型的值作为键名
+ 键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的
+ 不能遍历，方法有get、set、has、delete
+ 同weakset和set的关系一致，weakmap和map之间也在删除和引用到同一个数据时的关联问题
← set 和 weakset Proxy →