ES6 set 和 map

一、SET

ES6 提供了新的数据结构 Set 。它类似于数组，但是成员的值都是唯一的，没有重复的值。(注意这里，可用于去重)
Set 本身是一个构造函数，用来生成 Set 数据结构。

1.开始

1
2
3
4
var set = new Set([1, 2, 3, 4, 4]);
// [1, 2, 3, 4]
// 有一个size属性，相当于array的length
set.size; //4

注意：向 Set 加入值的时候，不会发生类型转换，所以 5 和 “5” 是两个不同的值（但 NaN 却等于自身）。另外，两个对象总是不相等的。

1
2
3
4
5
let set = new Set();
set.add({});
set.size // 1
set.add({});
set.size // 2

2.set 的实例属性和方法

Set 结构的实例有以下属性。

-Set.prototype.constructor ：构造函数，默认就是 Set 函数。
-Set.prototype.size ：返回 Set 实例的成员总数。

Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。

-add(value) ：添加某个值，返回 Set 结构本身。
-delete(value) ：删除某个值，返回一个布尔值，表示删除是否成功。
-has(value) ：返回一个布尔值，表示该值是否为 Set 的成员。
-clear() ：清除所有成员，没有返回值。

由于 add 返回 set 本身所以可以进行链式操作：

1
2
3
4
5
6
7
8
s.add(1).add(2).add(2);
//  注意 2 被加入了两次
s.size // 2
s.has(1) // true
s.has(2) // true
s.has(3) // false
s.delete(2);
s.has(2) // false

-Array.from 方法可以将 Set 结构转为数组。

1
2
3
4
5
6
7
8
9
10
11
12
var items = new Set([1, 2, 3, 4, 5]);
var array = Array.from(items);

// 数组去重
  function dedupe(array) {
    return Array.from(new Set(array));
  }
  dedupe([1, 1, 2, 3]) // [1, 2, 3]
// 另一种方法
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]

3、遍历

Set 结构的实例有四个遍历方法，可以用于遍历成员。

-keys() ：返回一个键名的遍历器
-values() ：返回一个键值的遍历器
-entries() ：返回一个键值对的遍历器
-forEach() ：使用回调函数遍历每个成员

实现求并集（ Union ）、交集（ Intersect ）和差集（ Difference ）

1
2
3
4
5
6
7
8
9
10
11
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
//  并集
let union = new Set([...a, ...b]);
// [1, 2, 3, 4]
//  交集
let intersect = new Set([...a].filter(x => b.has(x)));
// [2, 3]
//  差集
let difference = new Set([...a].filter(x => !b.has(x)));
// [1]

二、Map

Map 数据结构。它类似于对象，也是键值对的集合，但是 “ 键 ” 的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
Map 结构提供了 “ 值 — 值 ” 的对应，是一种更完善的 Hash 结构实现。

1、开始

1
2
var map = new Map([["name", " 张三 "], ["title", "Author"]]);
map.size // 2

注意：只有对同一个对象的引用， Map 结构才将其视为同一个键。（Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键）

1
2
3
4
5
6
7
8
9
var map = new Map();
map.set(['a'], 555);
map.get(['a']) // undefined

var k1 = ['a'];
var k2 = ['a'];
map.set(k1, 111).set(k2, 222);
map.get(k1) // 111
map.get(k2) // 222

另外，如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等， Map 将其视为一个键，包括 0 和 -0 。（虽然 NaN 不严格相等于自身，但 Map 将其视为同一个键）

1
2
3
4
5
let map = new Map();
map.set(NaN, 123);
map.get(NaN) // 123
map.set(-0, 123);
map.get(+0) // 123

2、实例的属性和操作方法

Map 结构的实例有以下属性和操作方法。
-size 属性：size 属性返回 Map 结构的成员总数。
-set(key, value)：set 方法设置 key 所对应的键值，然后返回整个 Map 结构。如果 key 已经有值，则键值会被更新，否则就新生成该键。
-get(key)：get 方法读取 key 对应的键值，如果找不到 key ，返回 undefined 。
-has(key)：has 方法返回一个布尔值，表示某个键是否在 Map 数据结构中。
-delete(key)：delete 方法删除某个键，返回 true 。如果删除失败，返回 false 。
-clear()：clear 方法清除所有成员，没有返回值。

3、遍历方法

-keys() ：返回键名的遍历器。
-values() ：返回键值的遍历器。
-entries() ：返回所有成员的遍历器。
-forEach() ：遍历 Map 的所有成员。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let map = new Map([
    ['F', 'no'],
    ['T', 'yes'],
]);
for (let item of map.entries()) {
    console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
//  或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
//  等同于使用 map.entries()
for (let [key, value] of map) {
    console.log(key, value);
}

-map 转数组：

1
2
3
4
5
6
7
8
9
10
11
12
13
let map = new Map([
    [1, 'one'],
    [2, 'two'],
    [3, 'three'],
]);
[...map.keys()]
// [1, 2, 3]
[...map.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

-Map 本身没有 map 和 filter 方法

1
2
3
4
5
6
7
8
9
10
11
12
let map0 = new Map()
                    .set(1, 'a')
                    .set(2, 'b')
                    .set(3, 'c');
let map1 = new Map(
    [...map0].filter(([k, v]) => k < 3)
);
//  产生 Map 结构 {1 => 'a', 2 => 'b'}
let map2 = new Map(
    [...map0].map(([k, v]) => [k * 2, '_' + v])
);
//  产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}

-Map 还有一个 forEach 方法，与数组的 forEach 方法类似，也可以实现遍历。

1
2
3
map.forEach(function(value, key, map)) {
   console.log("Key: %s, Value: %s", key, value);
};

-forEach 方法还可以接受第二个参数，用来绑定 this 。

1
2
3
4
5
6
7
8
9
10
var reporter = {
report: function(key, value) {
console.log("Key: %s, Value: %s", key, value);
}
};
map.forEach(function(value, key) {
this.report(key, value);
}, reporter);

// this 指向 repoter

3、与其他数据结构的互相转换

-Map 转为数组

1
2
3
let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

-数组转为 Map

1
2
new Map([[true, 7], [{foo: 3}, ['abc']]])
// Map {true => 7, Object {foo: 3} => ['abc']}

-Map 转为对象：如果所有 Map 的键都是字符串，它可以转为对象。

1
2
3
4
5
6
7
8
9
10
function strMapToObj(strMap) {
    let obj = Object.create(null);
    for (let [k,v] of strMap) {
        obj[k] = v;
    }
    return obj;
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }

-对象转为 Map

1
2
3
4
5
6
7
8
9
function objToStrMap(obj) {
    let strMap = new Map();
    for (let k of Object.keys(obj)) {
        strMap.set(k, obj[k]);
    }
    return strMap;
}
objToStrMap({yes: true, no: false})
// [ [ 'yes', true ], [ 'no', false ] ]

-Map 转为 JSON

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Map 的键名都是字符串，这时可以选择转为对象 JSON 。
function strMapToJson(strMap) {
return JSON.stringify(strMapToObj(strMap));
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

//Map 的键名有非字符串，这时可以选择转为数组 JSON 。
function mapToArrayJson(map) {
return JSON.stringify([...map]);
}
let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'

-JSON 转为 Map

1
2
3
4
5
function jsonToStrMap(jsonStr) {
    return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes":true,"no":false}')
// Map {'yes' => true, 'no' => false}