JS中Map对象的使用

前言

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]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,367评论 6 512
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,959评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,750评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,226评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,252评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,975评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,592评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,497评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,027评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,147评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,274评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,953评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,623评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,143评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,260评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,607评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,271评论 2 358

推荐阅读更多精彩内容