ES6新数据结构Map之初探

ES6已经出来很久了，这么长时间以来Map都没有用过，只知道是什么，不知道有什么用，近期发现了一个好的用法分享一下，首先说一下Map是什么

Map和Object的区别

Object对象，本质上是键值对的集合，但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

举个例子：

//object 
let data = {};
let element = document.getElementById('myDiv');
data[element] = 'metadata';//因为对象的key只能是字符串所以这里element被转成了字符串 [object HTMLDivElement]
data['[object HTMLDivElement]'] // "metadata"
//Map
let m = new Map();
m[element] = 'metadata'
data['[object HTMLDivElement]'] //"metadata"

上述表现是一样的，因为无论是Map还是Object的key值都不能为HTML元素，但是 Map 的键可以是一个简单类型的值（数字、字符串、布尔值），undefined和null也是两个不同的键。虽然NaN不严格相等于自身，但 Map 将其视为同一个键，还有数组和对象也可以作为键。例如：

let m = new Map();
let arr = []
let obj = {p: 'Hello World'};
arr[0] = obj;//对象
arr[1] = ['Hello','World'];//数组
arr[2] = 123;//数字	
arr[3] = 'str';//字符串
arr[4] = undefined;//undefined
arr[5] = null;//null
arr[6] = NaN;//NaN
for(let index in arr) {
	m.set(arr[index],index)
}
console.log(m)//Map(7) {{…} => "0", Array(2) => "1", 123 => "2", "str" => "3", undefined => "4", …}
/*Map(7) {{…} => "0", Array(2) => "1", 123 => "2", "str" => "3", undefined => "4", …}展开之后
size: 7
__proto__: Map
[[Entries]]: Array(7)
0: {Object => "0"}
	key:
	p: "Hello World"
	__proto__: Object
	value: "0"
1: {Array(2) => "1"}
2: {123 => "2"}
3: {"str" => "3"}
4: {undefined => "4"}
5: {null => "5"}
6: {NaN => "6"}
length: 7
*/

看一下上述我们可以获取到的一些信息，第一个size，这是跟对象的区别之一，Map是可以拿到他的数量的，而Object是拿不到的，[[Entries]]展开之后是存进去的7个值。

一个对象的键只能是字符串或者Symbols，但一个Map的键可以是任意值。
你可以通过size属性很容易地得到一个Map的键值对个数，而对象的键值对个数只能手动确认。

Map可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

let map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);
map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

Map的方法

set(key, value) 返回当前Map

const m = new Map();
m.set('edition', 6) //返回值当前Map
 .set('edition', 'asd')
 .set('edition', true)

get(key)返回key对应的value，无则undefind

m.get('edition') //true

has(key)返回布尔值

m.has('edition') //true

delete(key)删除某个键，成功返回true。如果删除失败，返回false

m.delete('edition') //true
m.has('edition') //false
m.delete('edition') //false

clear()方法清除所有成员，没有返回值

m.clear()
m.size //0

接下来重点来了，我们可以用它做点什么呢。我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，讲一下如何优化
举个例子：

function con1 (type) {
	console.log(type++)
}
function con2 (type) {
	console.log(++type)
}
function click (type){
	if (type == 1) {
		con1 (type)
	}else if (type == 2) {
		con2 (type)
	}else if (type == 3) {
		con2 (type)
	}else if (type == 4) {
		con1 (type)
	}else if (type == 5) {
		con2 (type)
	}else {
		con1 (type)
	}
}

通过代码可以看到这个逻辑：根据不同状态执行不同的方法，大家可以很轻易的提出这段代码的改写方案，switch出场：

function click2 (type){
	switch (type) {
		case 1:
			con1 (type)
			break;
		case 2:
		case 3:
			con2 (type)
			break;
		case 4:
			con1 (type)
			break;
		case 5:
			con2 (type)
			break;
		default:
			con1 (type)
			break;
	}
}

或者用对象去写

function click3 (type){
	let obj = {
		'1' : con1 ,
		'2' : con2 ,
		'3' : con2 ,
		'4' : con1 ,
		'5' : con2 ,
		'default' : con1 ,
	}
	let fn = obj[type]?obj[type]:obj['default'],
	fn(type)
}

还可以去用Map写

function click3 (type){
	let map = new Map([
		['1' , con1 ] ,
		['2' , con2 ],
		['3' , con2 ],
		['4' , con1 ],
		['5' , con2 ],
		['default' , con1 ]
	])
	let fn = map.get(type)?map.get(type):map.get('default')
	fn(type)
}

提升一下难度

function click (type){
				if(isLogin) {
					if (type == 1) {
						con1 (type)
					}else if (type == 2) {
						con2 (type)
					}else if (type == 3) {
						con2 (type)
					}else if (type == 4) {
						con1 (type)
					}else if (type == 5) {
						con2 (type)
					}else {
						con1 (type)
					}
				}else {
					//...
				}
			}

再多了一个判断登录状态的情况下代码会变得更长，这时候

function click2 (type){
	let map = new Map([
		['true_1' , con1 ] ,
		['true_2' , con2 ],
		['true_3' , con2 ],
		['true_4' , con1 ],
		['true_5' , con2 ],
		['false_1' , con1 ] ,
		['false_2' , con2 ],
		['false_3' , con2 ],
		['false_4' , con1 ],
		['false_5' , con2 ],
		['default' , con1 ]
	])
	let fn = map.get(`${isLogin}_${type}`) || map.get(`default`)
	fn(type)
}

上述代码核心逻辑是：把两个条件拼接成字符串，并通过以条件拼接字符串作为键，以处理函数作为值的Map对象进行查找并执行，这种写法在多元条件判断时候尤其好用，对象的写法一样就不写了，再来一个Map高级一点的写法

function click3 (type){
	let map = new Map([
		[{isLogin:'true',type:'1'}, con1 ] ,
		[{isLogin:'true',type:'2'}, con2 ],
		[{isLogin:'true',type:'3'}, con2 ],
		[{isLogin:'true',type:'4'}, con1 ],
		[{isLogin:'true',type:'5'}, con2 ],
		[{isLogin:'false',type:'1'}, con1 ] ,
		[{isLogin:'false',type:'2'}, con2 ],
		[{isLogin:'false',type:'3'}, con2 ],
		[{isLogin:'false',type:'4'}, con1 ],
		[{isLogin:'false',type:'5'}, con2 ],
	])
	let fn = [...map].filter(([key,value])=>(key.type==type && key.isLogin==`${isLogin}`))
	fn.forEach(([key,value])=>value(type))
}

或者其中有好几个的逻辑一样还能简化

function click4 (type){
	let map = new Map([
		[/^true_[1-4]$/, con1 ] ,
		[/^true_5$/, con2 ] ,
		[/^false_[1-4]$/, con2 ] ,
		[/^false_5$/, con1 ] ,
	])
	let fn = [...map].filter(([key,value])=>key.test(`${isLogin}_${type}`))
	fn.forEach(([key,value])=>value(type))
}

正则带来了无数的可能性，有兴趣的可以下去考虑一下/^true_.*$/这种情况