日常学习笔记 - 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':'男'}}