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

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

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

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

相关文章
|
25天前
|
存储 JavaScript Java
(Python基础)新时代语言!一起学习Python吧!(四):dict字典和set类型;切片类型、列表生成式;map和reduce迭代器;filter过滤函数、sorted排序函数;lambda函数
dict字典 Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度。 我们可以通过声明JS对象一样的方式声明dict
89 1
|
24天前
|
存储 Java Go
【Golang】(3)条件判断与循环?切片和数组的关系?映射表与Map?三组关系傻傻分不清?本文带你了解基本的复杂类型与执行判断语句
在Go中,条件控制语句总共有三种if、switch、select。循环只有for,不过for可以充当while使用。如果想要了解这些知识点,初学者进入文章中来感受吧!
78 1
|
6月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1030 58
|
12月前
|
JavaScript 前端开发 开发者
如何在 JavaScript 中处理不同类型的错误?
【10月更文挑战第29天】通过对不同类型错误的准确识别和恰当处理,可以提高JavaScript程序的可靠性和稳定性,减少错误对程序运行的影响。
|
12月前
|
JavaScript 前端开发 Java
除了 JavaScript,还有哪些编程语言支持 Set 类型
【10月更文挑战第30天】这些编程语言中的 `Set` 类型虽然在语法和具体实现细节上有所不同,但都提供了类似的集合操作功能,方便开发者在不同的编程场景中处理集合相关的数据和逻辑。
363 113
|
8月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
存储 安全 Go
Go语言中的map数据结构是如何实现的?
Go 语言中的 `map` 是基于哈希表实现的键值对数据结构,支持快速查找、插入和删除操作。其原理涉及哈希函数、桶(Bucket)、动态扩容和哈希冲突处理等关键机制,平均时间复杂度为 O(1)。为了确保线程安全,Go 提供了 `sync.Map` 类型,通过分段锁实现并发访问的安全性。示例代码展示了如何使用自定义结构体和切片模拟 `map` 功能,以及如何使用 `sync.Map` 进行线程安全的操作。
261 9
|
12月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
263 2

热门文章

最新文章