JSMap对象的使用
前言
Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。
JS中的Object类型实际上是一种键值对映射(key-value pairs),但是JS中这种键值对映射有点问题:key只能为string类型。为了和其他编程语言有相似的数据结构(如Map, Dict等),ES6中新增了Map类型。
属性与方法
size
:是可访问属性,用于返回 一个Map 对象的成员数量。
Map()
:构造方法。
clear()
:移除Map对象中的所有元素。
delete(key)
:移除 Map 对象中指定的元素;如果 Map 对象中存在该元素,则移除它并返回 true;否则如果该元素不存在则返回 false。
entries()
:返回一个新的包含 [key, value] 对的 Iterator 对象,返回的迭代器的迭代顺序与 Map 对象的插入顺序相同。
keys()
:返回一个引用的 Iterator 对象。它包含按照顺序插入 Map 对象中每个元素的key值。
values()
:返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的value值。
forEach()
:按照插入顺序依次对 Map 中每个键/值对执行一次给定的函数。
get()
:返回某个 Map 对象中的一个指定元素。
set(key, value)
:为 Map 对象添加或更新
一个指定了键(key)和值(value)的(新)键值对。
has()
:返回一个bool值,用来表明map 中是否存在指定元素.
Map 对象遍历
let map = new Map()
// forEach
map.forEach((value, key, map) => {
console.log(map.get(key) === value)
})
// for..of
for (const key of map.keys()) {
console.log(key);
}
for (const value of map.values()) {
console.log(value);
}
for (const [key, value] of map.entries()) {
console.log(key, value);
}
Map 与数组的关系
const kvArray = [["key1", "value1"], ["key2", "value2"]];
// 将二维键值对数组转换成一个Map对象
let map = new Map(kvArray)
console.log(Array.from(map)) // 输出 [[key, value], ...] 数组
console.log([...map]); // 输出 [[key, value], ...] 数组
console.log(Array.from(map.keys())); // 输出 ["key1", "key2", ...] key 数组
console.log([...map.keys()]); // 输出 ["key1", "key2", ...] key 数组
console.log(Array.from(map.values())); // 输出 ["value1", "value2", ...] key 数组
console.log([...map.values()]); // 输出 ["value1", "value2", ...] key 数组
Map 和 Object 的区别
Map | Object | |
---|---|---|
默认值 | 默认不包含任何值,只包含显式插入的键 | 一个 Object 有一个原型,原型上的键名有可能和自己对象上设置的键名冲突 |
类型 | 任意 | String 或 Symbol |
长度 | 键值对个数通过 size 属性获取 | 键值对个数只能手动计算 |
性能 | 频繁增删键值对的场景下表现更好 | 频繁添加和删除键值对的场景下未作出优化 |
问题记录
如果Map
的值是对象或者数组,可以直接修改生效,不需要再调用 map.set()
,如:
// array or object
const map = new Map()
map.set('cc', [1])
const value = map.get('cc')
value.push(2)
console.log(map.get('cc')) // [1, 2]
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhchigaa
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13