ES6 set 和 map

一、SET

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

1.开始

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

注意:向 Set 加入值的时候,不会发生类型转换,所以 5  和 "5"  是两个不同的值(但NaN却等于自身)。

        另外,两个对象总是不相等的。

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本身所以可以进行链式操作:

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 结构转为数组。
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 )

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、开始

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

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

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 将其视为同一个键)

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 的所有成员。
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转数组:

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 方法

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 方法类似,也可以实现遍历。

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

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

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 转为数组
  • let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
    [...myMap]
    // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
  • 数组转为 Map

    new Map([[true, 7], [{foo: 3}, ['abc']]])
    // Map {true => 7, Object {foo: 3} => ['abc']}
  •  Map 转为对象:如果所有 Map 的键都是字符串,它可以转为对象。

    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

    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  

    // 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
    function jsonToStrMap(jsonStr) {
    return objToStrMap(JSON.parse(jsonStr));
    }
    jsonToStrMap('{"yes":true,"no":false}')
    // Map {'yes' => true, 'no' => false}
原文地址:https://www.cnblogs.com/lastnigtic/p/6759857.html