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键值对,创建了新的,旧的就没有了


相关文章
|
2月前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
39 3
|
2月前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
27 7
|
2月前
|
JavaScript 前端开发
解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
29 1
|
2月前
|
JavaScript 前端开发 定位技术
JavaScript 中如何代理 Set(集合) 和 Map(映射)
JavaScript 中如何代理 Set(集合) 和 Map(映射)
72 0
|
10天前
|
存储 JavaScript 前端开发
JavaScript进阶-Map与Set集合
【6月更文挑战第20天】JavaScript的ES6引入了`Map`和`Set`,它们是高效处理集合数据的工具。`Map`允许任何类型的键,提供唯一键值对;`Set`存储唯一值。使用`Map`时,注意键可以非字符串,用`has`检查键存在。`Set`常用于数组去重,如`[...new Set(array)]`。了解它们的高级应用,如结构转换和高效查询,能提升代码质量。别忘了`WeakMap`用于弱引用键,防止内存泄漏。实践使用以加深理解。
|
13天前
|
JavaScript 前端开发
JavaScript 数组的函数 map/forEach/reduce/filter
JavaScript 数组的函数 map/forEach/reduce/filter
|
2月前
|
JavaScript 前端开发
JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式
【5月更文挑战第11天】JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式。map() 用于创建新数组,其中元素是原数组元素经过指定函数转换后的结果;filter() 则筛选出通过特定条件的元素生成新数组;reduce() 将数组元素累计为单一值。这三个方法使代码更简洁易读,例如:map() 可用于数组元素乘以 2,filter() 用于选取偶数,reduce() 计算数组元素之和。
20 2
|
2月前
|
前端开发 JavaScript 程序员
Javascript:forEach、map、filter、reduce、reduceRight
Javascript:forEach、map、filter、reduce、reduceRight
|
2月前
|
存储 缓存 JavaScript
JavaScript中的Set和Map:理解与使用
JavaScript中的Set和Map:理解与使用
|
2月前
|
JavaScript 前端开发
JavaScript中的map和foreach:理解与使用
JavaScript中的map和foreach:理解与使用