JavaScript一种新的数据结构类型Map

Posted 2022-09-17 朦胧淡月

什么是map

它类似于对象，是键值对的集合，但键的范围不局限在于字符串。各种类型的值（包含对象）都可以作为键。
如果同一个键被多次赋值，后面的值将会覆盖其那面的值。如果读取一个未知的键，返回的是undefined.
具有极快的查找速度,它的查找的方式比遍历的方式更加的块。

创建map的时候需要：1.初始化Map需要一个二维数组 2.或者直接初始化一个空Map。
通过map可以快速获取某个键的值【场景使用】
它的常见方法 set()添加  get()获取值 delete()删除值 has()判断是否有某个值 clear()方法清除所有成员，没有返回值。

场景描述 [项目中可以使用]

如果我们我们想要获取某个人的成绩, 必须要通过遍历的方式去获取成绩。
并且Array越长，耗时越长。
但是如果使用map就不需要了。只需要一个“名字”-“成绩”的对照表，
let arr = [
    name: 张三,
    grade: 100
, 
    name: 李四,
    grade: 100
, 
    name: 王五,
    grade: 100
]

//这个是map
var m = new Map([
    [张三, 100],
    [李四, 97],
    [王五, 85]
]);

let chengjizs = m.get(张三);
console.log(成绩是, chengjizs)

如何快速获取后端返回来的某值

//假设后端返回来了很多数据，我们需要获取某一个值。
//可以先将数据转为map类型的数据结构 [[key:value]] 一个二维数组
//然后通过 数据源.get(key) 的方式获取值
let backArr = [
    name: 张三,
    grade: 100
, 
    name: 李四,
    grade: 100
, 
    name: 王五,
    grade: 100
]
let newArr = []
backArr.forEach(item => 
    newArr.push([item.name, item.grade])
)
// Map的参数格式是[[key:value],[key:value]]这样才可以通过get方法来获取对应的value
let arrMap = new Map(newArr)
console.log(arrMap.get(张三))

创建Map以及Map的常见方法

// 初始化Map需要一个二维数组， 或者直接初始化一个空Map。
var m = new Map(); // 这个是一个空Map
console.log(m.set(Aa, 67)); // 添加新的key-value
console.log(m.has(Aa)); // 是否存在key Aa输出的值是：true
console.log(m.get(Aa)); // 获取Aa的67
console.log(m.delete(Aa)); // 删除key Aa
console.log(m.get(Adam)); // 读取未知的值 undefined
console.log(m.clear()); //清除所有值

set()添加  get()获取值 delete()删除值 has()判断是否有某个值

获取map对象中所有的key值，并且把它转为为一个数组

var m = new Map([
    [张三, 100],
    [李四, 97],
    [王五, 85]
]);
let keysName = m.keys(); //返回的所有key值，但却不是一个数组
console.log(Array.from(keysName)) //转为为一个数组

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

Map.prototype.keys()：返回map的所有键名。
Map.prototype.values()：返回map的所有键值。
Map.prototype.entries()：返回map的所有成员。
Map.prototype.forEach()：遍历Map的所有成员。

Map 结构转为数组结构，比较快速的方法是使用扩展运算符（...）

 const map = new Map([
    [1, one],
    [2, two],
    [3, three],
]);

let keyArr = [...map.keys()]
console.log(keyArr) //[1, 2, 3]

let contArr = [...map.values()]
console.log(contArr) //[one, two, three]

let arr1 = [...map.entries()]
console.log(arr1)
// [[1,one], [2, two], [3, three]]

let arr2 = [...map]
console.log(arr2)
// [[1,one], [2, two], [3, three]]

Map 转为对象

如果所有 Map 的键都是字符串，它可以无损地转为对象。
function strMapToObj(strMap) 
    let obj = Object.create(null);
    for (let [k, v] of strMap) 
        obj[k] = v;
    
    return obj;

const myMap = new Map([
    [grade1, 100],
    [grade2, 97],
    [grade3, 85]
])
console.log(strMapToObj(myMap)) 

对象转为 Map 可以通过Object.entries()

let obj = 
    "age": 12,
    "name": 张三
;
let map = new Map(Object.entries(obj));
console.log(map, map)

或者 我们自己写一个方法
function objToStrMap(obj) 
    let strMap = new Map();
    for (let k of Object.keys(obj)) 
        strMap.set(k, obj[k]);
    
    return strMap;

let newMap=objToStrMap(
    yes: true,
    no: false
)
console.log(newMap)

通过forEach循环map中的每一个值，以及key值

var m = new Map([
    [张三, 100],
    [李四, 97],
    [王五, 85]
]);
m.forEach(function(value,index) 　　
    console.log("value", value,index); //100 张三 这种
)

map.values() 遍历map的values

let map = new Map([
    [1, 张三],
    [2, "李四"],
    [3, "王五"]
])
let values = map.values();
for (i = 0; i < map.size; i++) 
    value = values.next().value;
    console.log(value); //  张三 李四 王五

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。

作者：​​晚来南风晚相识​​​

本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接

如果文中有什么错误，欢迎指出。以免更多的人被误导。