Map
JavaScript 中的对象(Object),本质上是键值对的集合,但是只能用字符串来做键名。这给它的使用带来了很大的限制。
为了解决这个问题,ES6 提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
也就是说,Object 结构提供了“字符串 - 值”的对应,Map 结构提供了“值 - 值”的对应,是一种更完善的 JSON 数据结构的实现。
如果你需要更“宽松”的“键值对”数据结构,Map 比 Object 更合适。
特性:键值对=>任意类型=>更好的处理有映射需求的问题。
创建 Map
Map 本身是一个构造函数,使用构造函数进行数据初始化。
let m = new Map();
Map 函数可以接受一个数组作为参数,用来进行初始化。但是跟 Set 不同的是,Map 中该数组中的成员是一对对表示键值对的数组(或有点类似数组的对象)。
let m1 = new Map([["name", "zhangsan"], ["age", 20]]);
let m2 = new Map([{0:"name",1:"zhangsan"},{"0":"age","1":20}]);
注:类数组对象还应该包含 length 属性:{0:"name",1:"zhangsan",length:2}
Map的属性
常用的属性就一个:size ,返回 Map 实例的成员总数。
let m = new Map([["name", "zhangsan"], ["age", 20]]);
console.log( m.size );//2
Map的方法
Map 实例的方法分为了两大类:操作用法(用于数据操作)和遍历方法(用于遍历数据)。
操作方法:
set(key, value) 添加或修改数据。设置 key 所对应的键值,并返回 Map 结构本身
get(key) 获取数据。读取 key 对应的键值,如果找不到 key,返回 undefined
has(key) 查看是否存在某个数据,返回一个布尔值。
delete(key) 删除数据。删除成功返回 true
clear() 清除所有数据,没有返回值
let map = new Map([["name", "zhangsan"], ["age", 20]]);
// 设置 name 的值为 lisa
map.set("name", "lisa");
console.log( map ); // Map(2) {"name" => "lisa", "age" => 20}
// 获取 name 对应的值
let getMap = map.get("name");
console.log( getMap ); // lisa
// 查看是否存在 age
let hasMap = map.has("age");
console.log( hasMap ); // true
// 删除 age 键值对
let delMap = map.delete("age");
console.log( delMap ); // true
// 清空所有数据
map.clear();
console.log(map); // Map(0) {}
遍历方法:
Map 提供了三个遍历器生成函数和一个遍历方法:
keys() 返回一个键名的遍历器
values() 返回一个键值的遍历器
entries() 返回一个键值对的遍历器
forEach() 使用回调函数遍历每个成员
let num = new Map([["one", 1], ["two", 2], ["three", 3]]);
for(let key of num.keys()){
console.log(key);
}
// one
// two
// three
for(let value of num.values()){
console.log(value);
}
// 1
// 2
// 3
for(let item of num.entries()){
console.log(item[0], item[1]);
}
// one 1
// two 2
// three 3
// 将上面代码通过解构优化
for(let [key, value] of num.entries()){
console.log(key, value);
}
// one 1
// two 2
// three 3
num.forEach((value, key) => {
console.log(value, key)
})
// 1 one
// 2 two
// 3 three
与其他数据结构互换
Map 转为数组
Map 转为数组最方便的方法,就是使用扩展运算符 ... 。
let myMap = new Map();
myMap
.set(true, "真")
.set(false, "假");//因为每次会返回新Map,可以连着写
console.log(myMap); // {true => "真", false => "假"}
let newMap = [...myMap];
console.log(newMap); // [[true, "真"], [false, "假"]]
数组转为 Map
将数组传入 Map 构造函数中,就可以转为 Map。
let arr = [[true, "真"], [false, "假"]];
let map = new Map(arr);
console.log(map); // {true => "真", false => "假"}
Map 转为对象
如果 Map 所有的键都是字符串,它就可以转为对象。
function strMapToObj(strMap){
let obj = {};
for(let [k, v] of strMap){
obj[k] = v;
}
return obj;
}
let myMap = new Map().set("green","绿").set("red","红");
console.log(myMap); // {"green" => "绿", "red" => "红"}
console.log( strMapToObj(myMap) ); // { green: "绿", red: "红" }
对象转为 Map
function objToStrMap(obj){
let strMap = new Map();
for(let item in obj){
strMap.set( item, obj[item] )
}
return strMap;
}
let obj = { name: "zhangsan", age: 20 };
console.log( objToStrMap(obj) );
// {"name" => "zhangsan", "age" => 20}