Map 和 Set

Map

基本 API

使用 new 关键字和 Map 构造函数可以创建一个空映射：

const m = new Map();

如果想在创建的同时初始化实例，可以给 Map 构造函数传入一个可迭代的对象，需要包含键-值对 数组。可迭代对象中的每个键键-值对都会按照迭代顺序插入到新映射实例中。

// 使用嵌套数组初始化映射
const m1 = new Map([
  ["key1", "val1"],
  ["key2", "val2"],
  ["key3", "val3"],
]);

// Map(3) {'key1' => 'val1', 'key2' => 'val2', 'key3' => 'val3'}

// 使用自定义迭代器初始化映射
const m2 = new Map({
  [Symbol.iterator]: function* () {
    yield ["key1", "val1"];
    yield ["key2", "val2"];
    yield ["key3", "val3"];
  },
});
// Map(3) {'key1' => 'val1', 'key2' => 'val2', 'key3' => 'val3'}

// 映射期待值为键值对，无论提不提供
const m3 = new Map([[]]);
// Map(1) {undefined => undefined}
console.log(m3.has(undefined)); // true
console.log(m3.get(undefined)); // undefined

初始化之后，可以用 set() 方法再添加键值对，另外，可以使用 get() 和 has() 进行查询，可以通过 size 属性来获取映射中的键值对数量。还可以使用 delete() 和 clear() 删除值。

const m = new Map();

m.has("firstName"); // false
m.get("firstName"); // undefined
m.size(); // 0

m.set("firstName", "matt").set("lastName", "Frisbie");

m.has("firstName"); // true
m.get("firstName"); // matt
m.size(); // 2

m.delete("firstName"); // 删除键值对

m.has("firstName"); // false
m.has("lastName"); // true
m.size(); // 1

m.clear(); // 删除所有键值对

m.has("firstName"); // false
m.has("lastName"); // false
m.size(); // 0

set() 方法返回映射实例，因此可以把多个操作连缀起来，包括初始化声明。

const m = new Map().set("key1", "val1");

m.set("key2", "val2").set("key3", "val3");

m.size; // 3

与 Object 只能使用数值、字符串或符号作为键不同，Map 可以使用任何 JavaScript 数据类型作为键。与 Object 类似，映射的值是没有限制的。

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");

m.get(functionKey); // functionValue
m.get(symbolKey); // symbolValue
m.get(objectKey); // objectValue

顺序与迭代

与 Object 类型的一个主要差异是：Map 实例会维护键值对的插入顺序，因此可以根据插入顺序执行迭代操作。

映射实例可以提供一个迭代器，这个迭代器能以插入顺序生成 [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"],
  ];
*/

• 如果不使用迭代器，而是使用回调方式，则可以调用映射的 forEach(callback, opt_thisArg) 方法并传入回调，依次迭代每个键值对。传入的回调接收可选的第二个参数，这个参数用来重写回调函数内部 this 的值：

const m = new Map([
  ["key1", "val1"],
  ["key2", "val2"],
  ["key3", "val3"],
]);

m.forEach((val, key) => alert(`${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 m1 = new Map([["key1", "val1"]]);

// 作为键的字符串原始值是不能修改的
for (let key of m1.keys()) {
  key = "newKey";
  console.log(key); // newKey
  console.log(m1.get("key1")); // val1
}

const keyObj = { id: 1 };

const m = new Map([[keyObj, "val1"]]);
// 修改了作为键的对象的属性，但对象在映射内部仍然引用相同的值
for (let key of m.keys()) {
  key.id = "newKey"; // {id: 'newKey'}
  console.log(m.get(keyObj)); // val1
}

Set

基本 API

使用 new 关键字和 Set 构造函数可以创建一个空的集合：

const m = new Set();

如果想在创建的同时初始化实例，则可以给 Set 构造函数传入一个可迭代对象，其中需要包含插入到新集合实例中的元素。

// 使用数组初始化集合
const s1 = new Set(["val1", "val2", "val3"]);
console.log(s1.size); // 3

// 使用自定义迭代器初始化集合
const s2 = new Set({
  [Symbol.iterator]: function* () {
    yield "val1";
    yield "val2";
    yield "val3";
  },
});
console.log(s2.size); // 3

初始化之后，可以使用 add() 增加值，使用 has() 查询，通过 size 取得元素数量，以及使用 delete() 和 clear() 删除元素。

const s = new Set();

a.has("Matt"); // false
a.size; // 0

s.add("Matt").add("Frisbie");

s.has("Matt"); // true
s.size; // 2

s.delete("Matt");

s.has("Matt"); // false
s.has("Frisbie"); // true
s.size; // 1

s.clear();

s.has("Matt"); // false
s.has("Frisbie"); // false
s.size; // 0

与 Map 类似，Set 可以包含任何 JavaScript 数组类型的值。

const s = new Set();
const functionKey = function () {};
const symbolKey = Symbol();
const objectKey = new Object();

s.add(functionKey);
s.add(symbolKey);
s.add(objectKey);

s.has(functionKey); // true
s.has(symbolKey); // true
s.has(objectKey); // true

与严格相等一样，用作值的对象和其他 “集合” 类型在自己的内容或属性被修改时也不会改变。

const s = new Set();

const objVal = {},
  arrVal = [];

s.add(objVal);
s.add(arrVal);

objVal.bar = "bar";
arrVal.push("bar");

console.log(s.has(objVal)); // true
console.log(d.has(arrVal)); // true

/*
  delete() 返回一个布尔值，表示集合中是否存在要删除的值
*/
const s = new Set();
s.add("foo");
s.size(); // 1
s.add("foo");
s.size(); // 1

console.log(s.delete("foo")); // true
console.log(s.delete("foo")); // false

顺序与迭代

Set 会维护值插入时的顺序，因此支持按顺序迭代。

集合实例可以提供一个迭代器，这个迭代器能以插入顺序生成集合内容，可以通过 values() 方法及其别名方法 keys() （或者 Symbol.iterator 属性 它引用 values()）取得这个迭代器。

const s = new Set(["val1", "val2", "val3"]);
console.log(s.values === s[Symbol.iterator]); // true
console.log(s.keys === s[Symbol.iterator]); // true

for (let value of s.values()) {
  // val1
  // val2
  // val3
}

for (let value of s[Symbol.iterator]) {
  // val1
  // val2
  // val3
}

因为 values() 是默认迭代器，所以可以直接对集合实例使用扩展操作，把集合转换为数组。

const s = new Set(["val1", "val2", "val3"]);
console.log([...s]); // ['val1', 'val2', 'val3']

集合的 entries() 方法返回一个迭代器，可以按照插入顺序产生包含两个元素的数组，这两个元素是集合每个值的重复出现：

s.entries();
// SetIterator {'val1' => 'val1', 'val2' => 'val2', 'val3' => 'val3'}

如果不使用迭代器，而是使用回调方式，则可以调用集合的 forEach() 方法并传入回调，依次迭代每个键值对。传入的回调接收可选的第二个参数，这个参数用于重写回调内部 this 的值：

const s = new Set(["val1", "val2", "val3"]);
s.forEach((val, dupVal) => alert(`${val} -> ${dupVal}`));
// val1 -> val1
// val2 -> val2
// val3 -> val3

修改集合中值的属性不会影响其作为集合值的身份：

const s1 = new Set(["val1"]);
// 字符串原始值的属性不会影响其作为集合值的身份
for (let value of s1.values()) {
  value = "newVal";
  console.log(value); // newVal
  console.log(s1.has("val1")); // true
}
// 修改值对象的属性，但对象仍然存在于集合中
const valObj = { id: 1 };
const s2 = new Set([valObj]);
for (let value of s2.values()) {
  value.id = "newVal";
  console.log(value); // { id: 'newVal' }
  console.log(s2.has(valObj)); // true
}