日常学习笔记 - ES6中的Map类型

一、理解

ES6中新添加的数据类型，本质和Object一样，都是哈希结构的键值对集合。Map数据类型是对Object的补充，传统Object键名只能是字符串，而Map的键名不限于字符串。

二、创建Map实例

使用内置对象Map（构造函数），通过new字符进行实例化。Map函数可以接受一个数组为参数，该数组的每个元素为表示键值对的数组。

let map1 = new Map();						// {size:0}
let map2 = new Map([['name','jack']]);		// {'name' => 'jack'}
let map3 = new Map([['name','jack'],[{age:18},'bella']]);		// {'name' => 'jack', {age:18} => 'bella'}

三、Map数据类型提供的属性和方法

1.size 返回该实例存储的键值对数，类似数组的length

map1.size;								// 0
map2.size;								// 1
map3.size;								// 2

2.操作方法

1）set(key,value) 设置键名key及对应键值value，返回实例本身

若设置的键名已经存在于该实例，将覆盖原本的键值。

let map = new Map();						// {size:0}

map.set('name','jack');						// {'name' => 'jack'}
map.set('age',18);							// {'name' => 'jack', 'age' => 18}
map.set('name','张三');						// {'name' => '张三', 'age' => 18}

2）get(key) 通过键名key查询对应键值，返回键值，若键名不存在则返回undefined

let map = new Map();						// {size:0}

map.set('name','jack').set('age',18);		// {'name' => 'jack', 'age' => 18}
map.get('name');							// '张三'
map.get('age');								// 18
map.get('sex');								// undefined

3）has(key) 判断实例中是否存在键名为key的元素，存在则返回true，否则返回false

let map = new Map();						// {size:0}

map.set('name','jack').set('age',18);		// {'name' => 'jack', 'age' => 18}
map.has('name');							// true
map.has('age');								// true
map.has('sex');								// false

4）delete(key) 删除实例中键名为key的元素，成功返回true，否则返回false

let map = new Map();						// {size:0}

map.set('name','jack').set('age',18);		// {'name' => 'jack', 'age' => 18}
map.delete('name');							// true
map.delete('sex');							// false
map;										// {'age' => 18}

5）clear() 清空所有元素，无返回值

let map = new Map();						// {size:0}

map.set('name','jack').set('age',18);		// {'name' => 'jack', 'age' => 18}
map.clear();								// undefined
map;										// {size:0}

3.遍历方法

1.keys() 返回键名

let map = new Map([['name','jack'],['age',18]]);		// {'name' => 'jack', 'age' => 18}

[...map.keys()];										// ['name','age']

2.values() 返回键值

let map = new Map([['name','jack'],['age',18]]);		// {'name' => 'jack', 'age' => 18}

[...map.values()];										// ['jack',18]

3.entries() 返回键值对

let map = new Map([['name','jack'],['age',18]]);		// {'name' => 'jack', 'age' => 18}

[...map.entries()];										// [['name','jack'],['age',18]]

4.forEach() 遍历Map实例，用法和arr.forEach相同

let map = new Map([['name','jack'],['age',18]]);		// {'name' => 'jack', 'age' => 18}

map.forEach((value,key) => {
	console.log(value,key)								// 'jack' 'name'    18 'age'
})

1.Map类型具备有序性，遍历的顺序即元素的插入顺序。
2.Map类型同样可以使用for of、for in进行遍历。

四、数组、对象和Map实例的互相转换

1.数组转为Map

let arr = [['name','张三'],['info',{height:175, sex:'男' }]];

let map = new Map(arr);					// {'name' => '张三','info' => {height:175, sex:'男'}}

2.对象转为Map

let obj = {name:'张三', sex:'男'};

let map = new Map();
for(let key in obj) {
	map.set(key,obj[key]);
} 

3.Map转为数组

1.直接使用扩展运算符
2.使用Array.from函数

let map = new Map([['name','张三'],['info',{height:175, sex:'男' }]]);

let arr1 = [...map];						// [['name','张三'],['info',{height:175, sex:'男' }]
let arr2 = Array.form(map);					// [['name','张三'],['info',{height:175, sex:'男' }]
// 两种方式的值相同

4.Map转为对象

如果Map的键名都为字符串，则可以直接通过循环给对象添加键值对；若键名存在非字符串类型，则需要先将键名转化为字符串。

let map = new Map([['name','张三'],[{name:'jack'},{height:175, sex:'男' }]]);

let obj = {};
map.forEach((item, key) => {
    if(typeof key != 'string'){
        key = JSON.stringify(key);
    }
    obj[key] = item;
});
obj;								// {'name': '张三', "{'name':'jack'}": {'height':175, 'sex':'男'}}