ES 6 系列 - 8. Set 和 Map

[hzzzzzzzq]

Set 和 Map

Set

介绍

Set 是 ES 6 提供的新的数据结构。类似于数组，但是都是唯一值，没有重复值。 Set 就是一个构造函数，用来生成 Set 数据结构。 add() 就是为 Set 添加成员，我们来试试。

const set = new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(2);
set.add(1);
for (let s of set) {
  console.log(s);
}
// 1 2 3

代码中可以看出 Set 的数据结构，是不会添加重复的值。

Set 构造函数可以接受一个数组或者具有 iterable 接口的其他数据结构作为参数，用来初始化 Set。

const arr = [1, 2, 2, 2, 3];
const set = new Set(arr);

console.log(set);
// [1, 2, 3]

从这里，我们也可以看出，用于数组去重是一个很好的选择

const arr = [1, 2, 2, 2, 3, 4];
const arr1 = [...new Set(arr)];
console.log(arr1);
// [1, 2, 3, 4]

Set 实例属性和方法

实例属性

• Set.prototype.constructor: 构造函数，默认就是 Set()。
• Set.prototype.size: 返回 Set 成员总数。

实例方法

• Set.prototype.add(value): 添加元素到 Set，返回 Set 本身。
• Set.prototype.delete(value): 删除某个值，返回一个布尔值。
• Set.prototype.has(value): 返回一个布尔值，表示该值是否为 Set 的值。
• Set.prototype.clear(): 清除所有值。

const set = new Set([1, 2, 3, 4]);

set.add(1);
set.add(5);
set.add(3);

console.log(set.size); // 5
console.log(set.has(5)); // true
console.log(set.has(2)); // true

set.delete(5);
set.delete(4);

console.log(set.has(5)); // false
console.log(set.has(4)); // false

遍历操作

四个遍历方法。

• Set.prototype.keys(): 返回 key 的遍历器
• Set.prototype.values(): 返回 value 的遍历器
• Set.prototype.entries(): 返回 key: values 的遍历器
• Set.prototype.forEach(): 回调函数遍历，类似数组的 forEach

const set = new Set(['key1', 'key2', 'key3']);
for (let key of set.keys()) {
  console.log(key);
}
// key1
// key2
// key3
for (let val of set.values()) {
  console.log(val);
}
// key1
// key2
// key3
for (let [k, v] of set.entries()) {
  console.log(k, v);
}
// key1 key1
// key2 key2
// key3 key3

set.forEach((val, key) => console.log(key, val));
// key1 key1
// key2 key2
// key3 key3

由遍历，我们可以看出，key 与 value 的值是相同的。

Map

介绍

ES 6 提供了 Map 数据结构。类似于对象，也是键值对的集合，但是 key 不限制于字符串，其他类型的值均可以作为 key。 简单来说 Map 结构提供了 val - val，而对象必须是 字符串 - val。

map 的简单用法。也看看将对象作为 key 的时候。

const map = new Map();
const obj = {};
map.set(obj, 'object');
console.log(map.get(obj)); // 'object'
map.set('string', 'hello hzzzzzzzq');
console.log(map.get('string')); // 'hello hzzzzzzzq'

console.log(map.has(obj)); // true
console.log(map.has('string')); // true
console.log(map.delete('string')); // true
console.log(map.has('string')); // false

上面我们就可以看出，我们将对象 obj 作为一个Map 的键传入，使用 get 获取值，delete 删除，has 作为判断是否有这个值。

我们在来看看，Map 作为构造函数，怎么添加成员。 其实在[对象的扩展]()中，我们已经提到过了。

• 接受数组作为参数，而数组的成员是一个个表示键值对的数组。

const map = new Map([
  ['x', 1],
  ['y', 2],
]);
console.log(map.size); // 2
console.log(map.has('x')); // true
console.log(map.get('x')); // 1

console.log(map.has('y')); // true
console.log(map.get('y')); // 2

• 任何具有 Iterator 接口，且每个成员都是一个双元素的数组的结构都可以当作 Map 的参数。Set 和 Map 自身也可以作为参数。

const set = new Set([['x', 1]]);

const map1 = new Map(set);
console.log(map1.get('x')); // 1

const map2 = new Map();
map2.set('y', 2);

const map3 = new Map(map2);
console.log(map3.get('y')); // 2

• Map 与 Set 类似，如果有重复 key 时，后面的 val 会覆盖前面的 val，也就是说，map 也是唯一的。
• Map 中若是没有找到这个 key，则返回 undefined。

const map = new Map();
map.set('x', 1);
map.set('x', 2);
console.log(map.get('x')); // 2
console.log(map.get('y')); // undefined

Map 属性和操作

• size size 返回 Map 的成员数量。

const map = new Map();
map.set('x', 1);
console.log(map.size); // 1
map.set('y', 2);
console.log(map.size); // 2

• Map.prototype.set(key, val) set(key, val) 方法就是为 Map 添加新的值了。

const map = new Map();

map.set('x', 1); // 键是字符串
map.set(1, 2); // 键是数值
map.set(undefined, 3); // 键是 undefined
map.set(null, 4); // 键时 null

console.log(map.get('x')); // 1
console.log(map.get(1)); // 2
console.log(map.get(undefined)); // 3
console.log(map.get(null)); // 4

• Map.prototype.get(key) get(key) 方法获取 key 对应的 val，找不到则返回 undefined。

const map = new Map();

map.set('x', 1);
console.log(map.get('x')); // 1
console.log(map.get('y')); // undefined

• Map.prototype.has(key); has(key) 方法判断键名 key 是否在 Map 对象中。

const map = new Map();
map.set('x', 1);
console.log(map.has('x')); // true
console.log(map.has('y')); // false

• Map.prototype.delete(key) delete(key) 方法删除某个键，返回一个布尔值，成功为 true。

const map = new Map();
map.set('x', 1);

console.log(map.delete('x')); // true
console.log(map.delete('y')); // false

• Map.prototype.clear(); clear() 就是清除 Map 对象的所有成员。

const map = new Map();
map.set('x', 1);
map.set('y', 2);
map.clear();

console.log(map.get('x')); // undefined
console.log(map.get('y')); // undefined

遍历

与 Set 类似。

• Map.prototype.keys()： 返回 Map 对象的所有 key。
• Map.prototype.values()：返回 Map 对象的所有 val。
• Map.prototype.entries()：返回 Map 对象的所有成员的遍历器。
• Map.prototype.forEach()：遍历 Map 的所有成员。

const map = new Map();
map.set('x', 1);
map.set('y', 2);
map.set('z', 3);

for (let key of map.keys()) {
  console.log(key);
}
// 'x'
// 'y'
// 'z'

for (let val of map.values()) {
  console.log(val);
}
// 1
// 2
// 3

for (let [k, v] of map.entries()) {
  console.log(k, v);
}
// 'x' 1
// 'y' 2
// 'z' 3

map.forEach((val, key) => {
  console.log(key, val);
});
// 'x' 1
// 'y' 2
// 'z' 3