JavaScript中Map的使用方法
创建Map
(1)使用Map构造函数创建映射对象(可传入一个可迭代对象,需要包含键/值对数组)
const m = new Map() const m1 = new Map([ ['key1', 'val1'], ['key2', 'val2'], ['key3', 'val3'] ]) const m2 = new Map({ [Symbol.iterator]: function* () { yield ['key1', 'val1'] yield ['key2', 'val2'] yield ['key3', 'val3'] } })
映射期待的键/值对,无论是否提供
const m3 = new Map([[]]) console.log(m3.has(undefined)) // true console.log(m3.get(undefined)) // undefined
查询方法
(1)利用 has(key) 方法可查询是否存在某个键
const m = new Map([ ['firstName', 'Matt'] ]) console.log(m.has('firstName')) // true console.log(m.has('lastName')) // false
(2)利用 get(key) 方法可获取键对应的值
const m = new Map([ ['firstName', 'Matt'] ]) console.log(m.get('firstName')) // Matt console.log(m.get('lastName')) // undefined
操作方法
(1)使用 set(key, value) 方法插入键/值对,返回映射实例,因此可进行链式操作
const m = new Map().set('key1', 'val1') .set('key2', 'val2') .set('key3', 'val3') console.log(m.size) // 3
Map可以使用任何JavaScript数据类型作为键
Map中映射的值与Object类似,没有限制
Map内部使用SameValueZero比较操作(ECMAScript规范内部定义,语言中不能使用),基本上相当于使用严格对象相等的标准来检查键的匹配性
const m = new Map() const functionKey = function () {} const symbolKey = Symbol() const objectKey = new Object() m.set(functionKey, 'functionValue') m.set(symbolKey, 'symbolValue') m.set(objectKey, 'objectValue') console.log(m.get(functionKey)) // functionValue console.log(m.get(symbolKey)) // symbolValue console.log(m.get(objectKey)) // objectValue console.log(m.get(function () {})) // undefined
用作键和值的对象及其他“集合”类型,在自己的内容或属性被修改时仍然保持不变
const m = new Map() const objKey = {}, objVal = {}, arrKey = [], arrVal = [] m.set(objKey, objVal) m.set(arrKey, arrVal) objKey.foo = 'foo' objVal.bar = 'bar' arrKey.push('foo') arrVal.push('bar') console.log(m.get(objKey)) // {bar: 'bar'} console.log(m.get(arrKey)) // ['bar]
SameValueZero比较也可能导致意想不到的冲突
const m = new Map() const a = 0 / ' ', b = 0 / ' ', pz = +0, nz = -0 console.log(a === b) // false console.log(pz === nz) // true m.set(a, 'foo') m.set(pz, 'bar') console.log(m.get(a)) // foo console.log(m.get(nz)) // bar
(2)使用size属性获取映射中的键/值对数量
const m = new Map([ ['key1', 'val1'], ['key2', 'val2'], ['key3', 'val3'] ]) console.log(m.size) // 3
(3)使用 delete() 方法和 clear() 方法删除值
const m = new Map([ ['key1', 'val1'], ['key2', 'val2'], ['key3', 'val3'] ]) console.log(m.size) // 3 console.log(m.has('key1')) // true m.delete('key1') console.log(m.has('key1')) // false // 清除这个映射实例中所有键/值对 m.clear() console.log(m.size) // 0
顺序与迭代
Map会维护键值对的插入顺序
(1)映射实例提供一个迭代器(Iterator),能以插入顺序生成[key, value]形式的数组
可以通过 entries() 方法(或者Symbol.iterator属性,它引用 entries() )取得这个迭代器
const m = new Map([ ['key1', 'val1'], ['key2', 'val2'], ['key3', 'val3'] ]) console.log(m.entries === m[Symbol.iterator]) // true for (let pair of m.entries()) { console.log(pair) } // ['key1', 'val1'] // ['key2', 'val2'] // ['key3', 'val3'] for (let pair of m[Symbol.iterator]()) { console.log(pair) } // ['key1', 'val1'] // ['key2', 'val2'] // ['key3', 'val3']
entries() 是默认迭代器,可以直接对映射实例使用扩展操作,把映射转换为数组
const m = new Map([ ['key1', 'val1'], ['key2', 'val2'], ['key3', 'val3'] ]) console.log([...m]) // [['key1', 'val1'], ['key2', 'val2'], ['key3', 'val3']]
(2)调用映射的 forEach(callback, opt_thisArg) 方法并传入回调,依次迭代每个键/值对
第一个参数:回调函数(值, 键)
第二个参数:回调函数内部this的值
const m = new Map([ ['key1', 'val1'], ['key2', 'val2'], ['key3', 'val3'] ]) m.forEach((val, key) => console.log(`${key} -> ${val}`)) // key1 -> val1 // key2 -> val2 // key3 -> val3
keys() 和 values() 分别返回以插入顺序生成键和值的迭代器
const m = new Map([ ['key1', 'val1'], ['key2', 'val2'], ['key3', 'val3'] ]) for (let key of m.keys()) { console.log(key) } // key1 // key2 // key3 for (let val of m.values()) { console.log(val) } // val1 // val2 // val3
键和值在迭代器遍历时是可以修改的,但映射内部的引用则无法修改
const m = new Map([ ['key1', 'val1'] ]) for (let key of m.keys()) { key = 'newKey' console.log(key) // newKey console.log(m.get('key1')) // val1 } const keyObj = {id: 1} const m1 = new Map([ [keyObj, 'val1'] ]) // 修改了作为键的对象的属性,但对象在映射内部仍然引用相同的值 for (let key of m1.keys()) { key.id = 'newKey' console.log(key) // {id: 'newKey'} console.log(m1.get(keyObj)) // val1 } console.log(keyObj) // {id: 'newKey'}
选择Object还是Map
(1)内存占用
Object和Map的工程级实现在不同浏览器间存在明显差异,但存储单个键/值对所占用的内存数量都会随键的数量线性增加。批量添加或删除键/值对则取决于各浏览器对该类型内存分配的工程实现。不同浏览器的情况不同,但给定固定大小的内存,Map大约可以比Object多存储50%的键/值对
(2)插入性能
向Object和Map中插入新键/值对的消耗大致相当,不过插入Map在所有浏览器中一般会稍微快一点儿。对这两个类型来说,插入速度并不会随着键/值对数量而线性增加。如果代码涉及大量插入操作,那么显然Map的性能更佳
(3)查找速度
与插入不同,从大型Object和Map中查找键/值对的差异极小,但如果只包含少量键/值对,则Object有时候速度更快。在把Object当成数组使用的情况下(比如使用连续整数作为属性),浏览器引擎可以进行优化,在内存中使用更高效的布局。这对Map来说是不可能的。对这两个类型而言,查找速度不会随着键/值对数量增加而线性增加。如果代码涉及大量查找操作,那么某些情况下可能选择Object更好一些
(4)删除性能
使用delete删除Object属性的性能一直以来饱受诟病,目前在很多浏览器中仍然如此。为此,出现了一些伪删除对象属性的操作,包括把属性设置为undefined或null。但很多时候,这都是一种讨厌的或不适宜的折中。而对大多数浏览器引擎来说,Map的delete()操作都比插入和查找更快。如果代码涉及大量删除操作,那么毫无疑问应该选择Map