JavaScript 之Map学习笔记（一）

1. Map方法介绍

1.1 Map描述

• MDN描述：MDN关于Map介绍及案例

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值

1.2 Object和Map的比较

类似的是，它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。不过 Map 和 Object 有一些重要的区别：（引用比较重要的三点）

• 不同点一：

  • 一个 Map 的键可以是任意值，包括函数、对象或任意基本类型。

  • 一个 Object 的键必须是一个 String 或是 Symbol。

• 不同点二：

  • Map 的键值对个数可以轻易地通过 size 属性获取。

  • Object 的键值对个数只能手动计算，当然你可以用Object.keys().length来计算

• 不同点三：

  • 在频繁增删键值对的场景下表现更好。

  • 在频繁添加和删除键值对的场景下未作出优化。

以上内容基本引用至MDN，详见MDN->Map

2. 范例和应用

2.1 Map的实例方法

1. Map.propertype.set(key, value) - 设置与指定的键 key 关联的值 value，并返回 Map 对象

let map = new Map();
map.set('one', 1);
map.set('two', 2);
console.log(map); // Map(2) {'one' => 1, 'two' => 2}

2. Map.prototype.get(key) - 返回与 key 关联的值

let map = new Map();
map.set('one', 1);
map.set('two', 2);
console.log(map.get('one')); //输出 1
console.log(map.get('two')); //输出 2
console.log(map.get('three')); //输出 undefined (不存在关联的值，则返回 undefined)

3. Map.prototype.has(key) - 返回一个布尔值,key 存在 true, 不存在 false

let map = new Map();
map.set('one', 1);
map.set('two', 2);
console.log(map.has('one')); //输出 true
console.log(map.has('two')); //输出 true
console.log(map.has('three')); //输出 false

4. Map.prototype.delete(key) - 移除 Map 对象中指定的键值对，如果键值对存在并成功被移除，返回 true，否则返回 false

let map = new Map();
map.set('one', 1);
map.set('two', 2);
console.log(map.delete('one')); // 输出 true

console.log(map.has('two')); //输出 true
console.log(map.delete('two')); // 输出 true
console.log(map.has('two')); //输出 false

console.log(map.delete('three')); // 输出 false 

5. Map.prototype.clear() - 移除 Map 对象中所有的键值对。

let map = new Map();
map.set('one', 1);
map.set('two', 2);
map.clear();
console.log(map); // 输出 Map(0) {size: 0}

2.2 Map的实例属性

Map.prototype.size - 返回 Map 对象中的键值对数量。

let map = new Map();
map.set('one', 1);
map.set('two', 2);
console.log(map.size); // 输出 2

map.set('three', 3);
console.log(map.size); // 输出 3

2.3 Map的迭代方法

1. Map.prototype.keys() - keys() 返回一个引用的 Iterator 对象 （Map 对象中所有的键）

let map = new Map();
map.set('one', 1);
map.set('two', 2);
for (const iterator of map.keys()) {
  console.log(iterator); // 依次输出one，two
}

2. Map.prototype.values() - values() 返回一个引用的 Iterator 对象 （Map 对象中所有的值）

let map = new Map();
map.set('one', 1);
map.set('two', 2);
for (const iterator of map.values()) {
  console.log(iterator); // 依次输出1，2
}

3. 使用 for..of 方法迭代 Map

let map = new Map();
map.set('one', 1);
map.set('two', 2);
for (const iterator of map) {
  console.log(iterator); // 依次返回['one', 1], ['two', 2]
}

// 解构
for (const [key, value] of map) {
  console.log(key, value); // 依次输出 one 1，two 2
}

4. 使用 forEach() 方法迭代 Map

• forEach 回调的三个参数

  • value：每个迭代的值。- 可选

  • key： 每个迭代的键。 - 可选

  • maps： 被迭代的 map。 - 可选

let map = new Map();
map.set('one', 1);
map.set('two', 2);
map.forEach((value, key, maps) => {
  console.log(value); //依次输出 1，2
  console.log(key); //依次输出 one，two
  console.log(maps); //依次输出 Map(2) {'one' => 1, 'two' => 2} Map(2) {'one' => 1, 'two' => 2}
});

5. Map.prototype.entries() - entries() 方法返回一个新的包含 [key, value] 对的 Iterator 对象

let map = new Map();
map.set('one', 1);
map.set('two', 2);
const iterator = map.entries();
// console.log(iterator.next()); // 输出{value: Array(2), done: false}   done：表示遍历是否结束，false 表示 未结束
console.log(iterator.next().value); // 输出 ['one', 1]

// console.log(iterator.next()); // 输出 {value: Array(2), done: false}
console.log(iterator.next().value); // 输出 ['two', 2]
console.log(iterator.next()); // 输出 {value: undefined, done: true}

for (const iteratorChild of iterator) {
  console.log(iteratorChild); // 依次输出 ['one', 1]，['two', 2]
}

2.4 复制Map

const original = new Map([[1, 'one']]);
console.log(original); //输出 Map(1) {1 => 'one'}
const clone = new Map(original);
console.log(clone); //输出 Map(1) {1 => 'one'}
console.log(clone.get(1)); // one
console.log(original === clone); // false. 浅比较

//浅比较范例——————浅比较(只检查左右两边是否是同一个对象的引用)
console.log({ a: 1 } === { a: 1 }); // false
const m = { a: 1 };
const n = { a: 1 };
console.log(m === n); //false
const md = { a: 1 };
const nd = md;
console.log(md === nd); //true

2.5 合并Map

1.合并时，如果有重复的键值，则后面的会覆盖前面的。
2.展开运算符本质上是将 Map 对象转换成数组。

1. 合并 —— 两个Map 进行合并

const first = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

const second = new Map([
  [1, 'uno'],
  [2, 'dos'],
]);

const merged = new Map([...first, ...second]);

for (const iterator of merged) {
  console.log(iterator); // 依次输出 [1, 'uno']，[2, 'dos']，[3, 'three']
}

2. 合并 —— Map和数组进行合并

const first = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

const second = new Map([
  [1, 'uno'],
  [2, 'dos'],
]);

const merged1 = new Map([...first, ...second, [4, 'whh', 5, 'dd'], [6, 'ddd']]);

for (const iterator of merged1) {
  console.log(iterator); // 依次输出 [1, 'uno']，[2, 'dos']，[3, 'three']，[4, 'whh']，[6, 'ddd']  
    				   //  如果合并的数组length超过2，它似乎也只截取前两下标位
}

2.6 Map 和 数组 的转换

1. 数组转换为Map

const arr = [
  [1, 'news'],
  [2, 'gyl'],
];

const myMap = new Map(arr);
console.log(myMap); // 输出 Map(2) {1 => 'news', 2 => 'gyl'}

2. Map转化为数组 一

const myArr = Array.from(myMap);
console.log(myArr); // 输出 [[1, 'news'],[2, 'gyl']]

3. Map转化为数组 二

const myArr1 = [...myMap];
console.log(myArr1); // 输出 [[1, 'news'],[2, 'gyl']]

4. 其它类似转化

const myArr2 = [...myMap.keys()];
console.log(myArr2); // 输出 [0, 1]

2.7 Map 键或值为函数时

const keyFun = () => {
  console.log('调了');
};
const mapFun = new Map([
  [
    'myfun',
    (a, b) => {
      return a + b;
    },
  ],
  [keyFun(), 'ddd'],
]);

console.log(mapFun.get('myfun')(1, 2)); //依次输出 调了 3

console.log(mapFun.get(keyFun())); // 依次输出 调了 ddd

本文是作者自己的经验以及从各博客论坛引用或收集的知识点，如有不足之处，还请见谅和指出。