什么是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); // 张三 李四 王五 }