ES6 - Map & Set

Map 和 Set 的 API 及应用场景

Map

概念

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。

和对象相比较

Map 和 Object 的区别主要有两个：

1. Map 中的键和值可以使任意类型的，而 Object 中键名只能是字符串或者Symbol。
2. Map 的键值是有序的且有内置的迭代方法，而 Object 是无序的需要通过for...in或者Object.keys()来实现迭代。
3. Map 能够通过 size 属性获取到键的个数，而 Object 只能手动去计算。

应用场景

1. 需要大量增删操作：

   Map 增删修改的效率更高，Object 没有内置的删除方法，需要使用delete obj.id的方法来删除键，效率不高。

2. 需要进行迭代操作：

   Map 因为自带迭代方法forEach()，且支持for...of方法遍历，操作起来更方便。

3. 数据的键名为未知类型：

   因为 Map 的键名可以为任意类型，而 Object 的键名只能是字符串或者 Symbol。

属性

.size：返回键值对的数量。

方法

.clear()：清除所有键值对。

.delete(key)：清除单个元素，并返回一个布尔值来表示是否移除成功。

.entries()：返回一个Iterator对象，它按插入顺序包含了 Map 对象中每一个元素[key,value]数组。

.keys()：返回一个Iterator对象，它按插入顺序包含了 Map 对象中每一个元素的 key。

.values()：返回一个Iterator对象，它按插入顺序包含了 Map 对象中每一个元素的 value。

.get(key)：获取键对应的值，不存在则返回 undefined。

.set(key,value)：设置键的值，返回该 Map 对象。

.has(key)：判断是否存在该键。

.forEach()：迭代方法。

例子

const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
map1.set('c', 3);

console.log(map1.get('a'));  // 1

map1.set('a', 97);

console.log(map1.get('a'));  // 97

console.log(map1.size);  // 3

map1.delete('b');

console.log(map1.size);  // 2

Set

概念

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

属性

.size：返回 Set 对象中值的个数。

方法

.clear()：清除 Set 对象内的所有值。

.delete( value )：清除单个值，并返回一个布尔值来表示是否移除成功。

.add( value )：在 Set 对象尾部添加一个值。返回该 Set 对象。

.entries()：返回一个Iterator对象，它按插入顺序包含了 Set 对象中每一个值[value,value]数组。

.keys()：返回一个Iterator对象，它按插入顺序包含了 Set 对象中每一个值。

.values()：与 keys 方法保持一致。

.has( value )：判断是否存在该值。

.forEach()：迭代方法。

例子

let mySet = new Set();

mySet.add(1); // Set [ 1 ]
mySet.add(5); // Set [ 1, 5 ]
mySet.add(5); // Set [ 1, 5 ]
mySet.add("some text"); // Set [ 1, 5, "some text" ]
let o = {a: 1, b: 2};
mySet.add(o);

mySet.entries(); // {1 => 1, 5 => 5, 'some text' => 'some text', {…} => {…}}

mySet.add({a: 1, b: 2}); // o 指向的是不同的对象，所以没问题

mySet.has(1); // true
mySet.has(3); // false
mySet.has(5);              // true
mySet.has(Math.sqrt(25));  // true
mySet.has("Some Text".toLowerCase()); // true
mySet.has(o); // true

mySet.size; // 5

mySet.delete(5);  // true，从 set 中移除 5
mySet.has(5);     // false, 5 已经被移除

mySet.size; // 4，刚刚移除一个值

console.log(mySet);  // logs Set(4) { 1, "some text", {…}, {…} }