JavaScript之Map

简介: 引入通过之前的了解我们知道JS中的对象很像其他语言中的“字典”数据类型——一个键对应一个值,是一串键值对构成的数据类型。但是我们也发现,JavaScript的对象又不完全等同于字典。因为JavaScript的对象只能是字符串来构成键实际生活中,用数值或者其他数据类型来构成键其实也是很需要的,比如我们班每个同学的序号和其对应分数。这样就没必要用字符串来对应分数,都用数字类型存储就完全ok了。

引入


通过之前的了解我们知道JS中的对象很像其他语言中的“字典”数据类型——一个键对应一个值,是一串键值对构成的数据类型。

但是我们也发现,JavaScript的对象又不完全等同于字典。因为JavaScript的对象只能是字符串来构成键

实际生活中,用数值或者其他数据类型来构成键其实也是很需要的,比如我们班每个同学的序号和其对应分数。这样就没必要用字符串来对应分数,都用数字类型存储就完全ok了。

所以在ES6规范中引入了新的数据类型map,来适配上面的这种需要。且具有极高的查找速度——


1.构建map


如果我们想构建一个map,就需要创建一个键值对的对照表。查找的时候会直接依据名字查找数据,无论表有多大,查找速度都不会变慢:


var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95


如上代码。我们用new map来创建一个map,并赋值给m。new map里面是一个用中括号括起来的各个键值对组成的array。

创建好之后用get就可以把你想取出的键对应的值取出来了


2.map的相关方法


我们知道怎么创建一个map了,但是非常尴尬的是如果这么创建的map的话显然非常麻烦。 我们接下来就来了解一下如何简单且符合程序逻辑地创建一个map:


var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value


如此,其实我们可以在需要map的时候定义一个,然后用set来添加新的记录。

除此之外,map还具有以下可操作的方法:


m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined


需要注意的是,一个key只能对应一个value,重复对一个key写入value会把前一个value替代掉。可以理解成每次都是在创建新的key和value键值对,创建了新的,旧的就没有了


相关文章
|
5月前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
91 3
|
2月前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
39 1
|
4月前
|
存储 JavaScript 前端开发
JavaScript进阶-Map与Set集合
【6月更文挑战第20天】JavaScript的ES6引入了`Map`和`Set`,它们是高效处理集合数据的工具。`Map`允许任何类型的键,提供唯一键值对;`Set`存储唯一值。使用`Map`时,注意键可以非字符串,用`has`检查键存在。`Set`常用于数组去重,如`[...new Set(array)]`。了解它们的高级应用,如结构转换和高效查询,能提升代码质量。别忘了`WeakMap`用于弱引用键,防止内存泄漏。实践使用以加深理解。
68 3
|
14天前
|
存储 JavaScript 前端开发
js的map和set |21
js的map和set |21
|
14天前
|
JavaScript 前端开发
js map和reduce
js map和reduce
|
23天前
|
JavaScript 前端开发
JavaScript Array map() 方法
JavaScript Array map() 方法
|
14天前
|
JavaScript 前端开发
JavaScript 中 五种迭代数组的方法 every some map filter forEach
本文介绍了JavaScript中五种常用数组迭代方法:every、some、filter、map和forEach,并通过示例代码展示了它们的基本用法和区别。
|
2月前
|
JavaScript 前端开发 索引
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
这段代码和说明介绍了JavaScript中数组的一些常用方法。函数接收三个参数:`item`(数组项的值)、`index`(项的位置,可选)和`array`(数组本身,可选)。示例展示了如何使用`filter()`过滤非空项、`forEach()`遍历数组、`map()`处理并返回新数组、`every()`检查所有元素是否满足条件、`some()`检查是否存在满足条件的元素、`find()`获取首个符合条件的元素值以及`findIndex()`获取其索引位置。这些方法都不会修改原数组。
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
|
2月前
|
JavaScript 前端开发 索引
JS - includes 方法和 map 方法使用方式
这篇文章介绍了JavaScript中数组的`includes`方法和`map`方法的用法,包括它们的语法、参数说明和具体的示例代码。`includes`方法用于判断数组是否包含特定元素,而`map`方法用于对数组中的每个元素执行操作并返回新数组。
36 1
|
3月前
|
JavaScript API
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
60 1