Javascript中的Map类

[FrankKai]

Map是一个可以体现出javascript不将就态度的数据类型，很多场景下Map比Object更加合适也更加严谨。

• Map基本概念
• 普通Object和Map的对比
• Map实战

学习资料：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

[FrankKai]

Map基本概念

• Map对象也是key-value的形式
• Map对象可以记忆住键的插入顺序
• Map对象的key，value可以是任何类型（对象和基本数据类型都可以）
• 基本语法是new Map([iterable])。多数情况是传一个数组二维的n*2数组，n代表数组元素个数，2代表数组元素有2个元素，第一个作为Map数据结构的key，第二个作为value。例如[[ 1, 'one' ],[ 2, 'two' ]]。数组映射为Map是最常用的场景。

var map = new Map();
map.set(undefined, undefined);
map.set(null, null);
map.set(true, true);
map.set(24, 24);
map.set(BigInt(24), BigInt(24));
map.set('string', 'string');
map.set(Symbol('foo'),Symbol('foo') );
map.set(()=>'function', ()=>'function');
map.set({},{});
map.set([],[]);

除Symbol在控制台的输出比较特殊以外，其余都蛮正常。

A symbol value may be used as an identifier for object properties; this is the data type's only purpose.

symbol作为一个基础数据类型，只能用在对象的key中。我个人是很少用到这个类型，或许在Map类中会有不一样的火花。

问题一：js中对象的key可以是对象吗？若不能，js对象的key只能是什么，value呢？
不能。js中对象key只能是字符串和Symbol，value可以是任何值。

[FrankKai]

普通Object和Map的对比

对于Object和Map来说，设置key-value，查询value，删除key，检测key。由于最初js中只有Object一种可以存储key-value的数据类型，所以几乎所有的key-value都是这样存的，所以Map类型也只能用Object将就。但是，有以下几个强烈推荐使用Map数据类型的场景：

• 对象的key只有String和Symbol。但是Map的key可以是任意类型。
• Map中的key是有序的。 Object显然不是。所以，在迭代Map的时候，Map可以按照插入顺序返回key值，而Object显然做不到这个，Object大概是按照字母首字母排序的，亦或是有其他的排序方式，这不重要，重要的是Map有序。(注意：虽然对象中的key是无序的，但是使用Object.keys()获得对象的key数组是有序的，其次Symbol类型的key不会出现在Object.keys()的返回结果中。)
• 可以通过Map的size属性轻松拿到key的个数。 对js有一定了解的人都知道，Object是没有length这个属性的，需要手动定义一个专门用来记录key个数的属性。或者是通过Object.keys()获取length（使用Object.keys()仅仅适用key类型全为String的情况，Object.keys获取到的结果不会包含Symbol类型的key。）
• Map是可以直接迭代的。 而Object需要先获取到key以后再迭代。
• Object有prototype，会导致key命名冲突。 所以在命名key时，极有可能与原型链上的key命名冲突。ES5可以通过Object.create(null)来去掉原型链的影响，但这个方法不够好。
• 在频繁删除和添加key-value对的情况下，Map可能表现的更好。

[FrankKai]

Map实战

替代原始的对象key，value映射

1. 创建一个二维数组

export default [
  ['业务员', 'salesman'],
  ['团队', 'team'],
  ['业务类型', 'businessType'],
];

2. new Map(二维数组)创建

const dataMap = new Map(data);

3. map.get()获取对应value

dataMap.get('业务员'')