接纳自己的不完美、肯定和认可自己,是我们这一生重要的课题。
今日学习内容
1、JS红皮书P162-167 第六章:集合引用类型
今日笔记
1、Map: 在 JavaScript 中实现“键/值”式存储可以使用 Object 来方便高效地完成,也就是使用对象属性作为键,再使用属性来引用值。Map 是一种新的集合类型,为这门语言带来了真正的键/值存储机制。Map 的大多数特性都可以通过 Object 类型实现,但二者之间还是存在一些细微的差异。具体实践中使用哪一个,还是值得细细甄别。
基本API:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| const m = new Map();
const m1 = new Map([ ["key1", "val1"], ["key2", "val2"], ["key3", "val3"] ]); alert(m1.size);
const m2 = new Map({ [Symbol.iterator]: function*() { yield ["key1", "val1"]; yield ["key2", "val2"]; yield ["key3", "val3"]; } }); alert(m2.size);
const m3 = new Map([[]]); alert(m3.has(undefined)); alert(m3.get(undefined));
|
初始化之后,可以使用 set()方法再添加键/值对。另外,可以使用 get()和 has()进行查询,可以通过 size 属性获取映射中的键/值对的数量,还可以使用 delete()和 clear()删除值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| const m = new Map(); alert(m.has("firstName")); alert(m.get("firstName")); alert(m.size); m.set("firstName", "Matt") .set("lastName", "Frisbie"); alert(m.has("firstName")); alert(m.get("firstName")); alert(m.size); m.delete("firstName"); alert(m.has("firstName")); alert(m.has("lastName")); alert(m.size); m.clear(); alert(m.has("firstName")); alert(m.has("lastName")); alert(m.size); const m = new Map().set("key1", "val1"); m.set("key2", "val2") .set("key3", "val3"); alert(m.size);
|
与 Object 只能使用数值、字符串或符号作为键不同,Map 可以使用任何 JavaScript 数据类型作为键。Map 内部使用 SameValueZero 比较操作(ECMAScript 规范内部定义,语言中不能使用),基本上相当于使用严格对象相等的标准来检查键的匹配性。与 Object 类似,映射的值是没有限制的。
1 2 3 4 5 6 7 8 9 10 11 12
| 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"); alert(m.get(functionKey)); alert(m.get(symbolKey)); alert(m.get(objectKey));
alert(m.get(function() {}));
|
与严格相等一样,在映射中用作键和值的对象及其他“集合”类型,在自己的内容或属性被修改时仍然保持不变:
1 2 3 4 5 6 7 8 9 10 11 12 13
| 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)); console.log(m.get(arrKey));
|
SameValueZero 比较也可能导致意想不到的冲突:
1 2 3 4 5 6 7 8 9 10 11
| const m = new Map(); const a = 0/"", b = 0/"", pz = +0, nz = -0; alert(a === b); alert(pz === nz); m.set(a, "foo"); m.set(pz, "bar"); alert(m.get(b)); alert(m.get(nz));
|
2、与 Object 类型的一个主要差异是,Map 实例会维护键值对的插入顺序,因此可以根据插入顺序执行迭代操作。
映射实例可以提供一个迭代器(Iterator),能以插入顺序生成[key, value]形式的数组。可以通过 entries()方法(或者 Symbol.iterator 属性,它引用 entries())取得这个迭代器:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| const m = new Map([ ["key1", "val1"], ["key2", "val2"], ["key3", "val3"] ]); alert(m.entries === m[Symbol.iterator]); for (let pair of m.entries()) { alert(pair); }
for (let pair of m[Symbol.iterator]()) { alert(pair); }
|
因为 entries()是默认迭代器,所以可以直接对映射实例使用扩展操作,把映射转换为数组:
1 2 3 4 5 6
| const m = new Map([ ["key1", "val1"], ["key2", "val2"], ["key3", "val3"] ]); console.log([...m]);
|
如果不使用迭代器,而是使用回调方式,则可以调用映射的 forEach(callback, opt_thisArg)方法并传入回调,依次迭代每个键/值对。传入的回调接收可选的第二个参数,这个参数用于重写回调内部 this 的值:
1 2 3 4 5 6 7 8 9
| const m = new Map([ ["key1", "val1"], ["key2", "val2"], ["key3", "val3"] ]); m.forEach((val, key) => alert(`${key} -> ${val}`));
|
keys()和 values()分别返回以插入顺序生成键和值的迭代器:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| const m = new Map([ ["key1", "val1"], ["key2", "val2"], ["key3", "val3"] ]); for (let key of m.keys()) { alert(key); }
for (let key of m.values()) { alert(key); }
|
键和值在迭代器遍历时是可以修改的,但映射内部的引用则无法修改。当然,这并不妨碍修改作为键或值的对象内部的属性,因为这样并不影响它们在映射实例中的身份:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| const m1 = new Map([ ["key1", "val1"] ]);
for (let key of m1.keys()) { key = "newKey"; alert(key); alert(m1.get("key1")); } const keyObj = {id: 1}; const m = new Map([ [keyObj, "val1"] ]);
for (let key of m.keys()) { key.id = "newKey"; alert(key); alert(m.get(keyObj)); } alert(keyObj);
|