Set

基本用法

• 定义: ES6新增数据结构,其本身是一个构造函数，可以用来生成Set数据结构
• Demo

var s = new Set();
[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));
for (let i of s) {
  console.log(i);
}

• 备注

  • Set类似于数组，但是成员的值都是唯一的，没有重复的值。
  • Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。
  • 去除重复数组

  // 例一
  var set = new Set([1, 2, 3, 4, 4]);
  [...set]  // 用...(展开操作符)操作符将Set转换为Array
  
  // [1, 2, 3, 4]
  
  // 例二
  var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
  items.size // 5
  
  // 例三
  function divs () {
    return [...document.querySelectorAll('div')];
  }
  
  var set = new Set(divs());
  set.size // 56
  
  // 类似于
  divs().forEach(div => set.add(div));
  set.size // 56

  • 去除数组的重复成员

  // 去除数组的重复成员array
  [...new Set(array)]

  • 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]

  • 向Set加入值的时候,不会发生类型转换,Set内部使用"Same-value equality"的算法判断两个值是否不同，类似于(===)，其区别是NaN等于自身。

  let set = new Set();
  let a = NaN;
  let b = NaN;
  set.add(a);
  set.add(b);
  set // Set {NaN}

  • set添加对象时,两个对象总是不相等的

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

  • Set可继承

  var obj = {};
  class S extends Set {}
  var set = new S();
  set.add(123);
  set.add(123);
  console.log(set instanceof S && set.has(123));

  Set实例的属性和方法

  实例属性

• Set.prototype.constructor: 构造函数，默认就是Set函数.

• Set.prototype.size: 返回Set实例的成员总数.

  实例方法

• 操作方法(用于操作数据)

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

let set = new Set();
set.add('pl');
set.add('pl');
console.log(set.size);
console.log(set.has('pl'));
set.add('xg');
console.log(set.size);
set.delete('xg');
console.log(set.size);
set.add('xg');
console.log(set.size);
set.clear();
console.log(set.size);

• 遍历方法(用于遍历成员)

  • 方法
    • keys(): 返回键名的遍历器。
    • values(): 返回键值的遍历器。
    • entries(): 返回键值对的遍历器。
    • forEach(): 使用回调函数遍历每个成员。

  let set = new Set(['red', 'green', 'blue']);
  console.log(set.values());
  console.log(set.keys());
  console.log(set.entries());
  // 键值、键名、集合本身
  function fun(value1, value2, set){
   console.log("s[" + value1 + "] = " + value2);
   console.log(set);
  }
  set.forEach(fun);

  • 备注

    • key方法、value方法、entries方法返回的都是遍历器对象。
    • Set结构没有键名，只有键值.因此key方法和value方法的行为完全一致。
    • entries方法返回的遍历器,同时包括键名和键值,而Set结构键值和键名相同，因此该方法返回的数组两个成员完全相等。
    • Set结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法。Set.prototype[Symbol.iterator] === Set.prototype.values
    • 可以省略values方法直接使用for...of循环遍历Set

    let set = new Set(['red', 'green', 'blue']);
    for (let x of set) {
      console.log(x);
    }

  • 遍历的应用

    • 扩展运算符（...）内部使用for...of循环，因此也可用于Set结构

    let set = new Set(['red', 'green', 'blue']);
    let arr = [...set];
    console.log(arr);

    • filter和map方法也可以用于Set

    let set = new Set([1, 2, 3]);
    set = new Set([...set].map(x => x * 2));
    console.log(set);  // {2, 4, 6}
    
    let set = new Set([1, 2, 3, 4, 5]);
    set = new Set([...set].filter(x => (x % 2) == 0));  // {2, 4}

    • Set容易实现并集(Union)、交集(Intersect)、差集(Difference)

    let a = new Set([1, 2, 3]);
    let b = new Set([4, 3, 2]);
    // 并集
    let union = new Set([...a, ...b]);
    console.log(union);  // Set {1, 2, 3, 4}
    // 交集
    let intersect = new Set([...a].filter(x => b.has(x)));
    console.log(intersect);   // Set {2, 3}
    // 差集
    let difference = new Set([...a].filter(x => !b.has(x)));  
    console.log(difference);  // [1]

    • 通过变通方法实现遍历操作中改变原来的Set结构

      • 利用原Set结构映射出一个新的结构，然后赋值给原来的Set结构

      let set = new Set([1, 2, 3]);
      set = new Set([...set].map(val => val * 2));
      console.log(set);  // Set {2, 4, 6}

      • 利用Array.from

      let set = new Set([1, 2, 3]);
      set = new Set(Array.from(set, val => val * 2));
      console.log(set);  // Set {2, 4, 6}

Map

Map结构产生背景

• JavaScript的对象（Object），本质上是键值对的集合（Hash结构），但是只能用字符串当作键.

var data = {};
var element = document.getElementsByTagName("div")[0];
data[element] = 'hello world';
console.log(data["[object HTMLDivElement]"]);  //hello world

• ES6的Map数据结构是键值对的集合，其"键"可以是各种类型的值(包括对象).
• Object结构提供"字符串--值"的对应，Map结构提供"值--值"的对应.

Map的基本用法

• 作为构造函数，Map可以接受数组(元素是表示键值对数组)作为参数.

var map = new Map([['name', '张三'], ['title', 'Author']]);
console.log(map);  //Map {"name" => "张三", "title" => "Author"

• 对同一个键多次赋值，则后面的值将覆盖前面的值.

let map = new Map();
map.set(1, 'aaa').set(1, 'bbb');
console.log(map.get(1)); // "bbb"

• 读取未知键，则返回undefined

console.log(new Map().get('asfddfsasadf'));

• 只有对同一个对象的引用，Map结构才将其视为同一个键

var map = new Map();
map.set(['a'], 555);
console.log(map.get(['a'])) // undefined

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

var obj = {name: 'pl'};
map.set(obj, 'lulu')
console.log(map.get(obj)); //lulu

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

let map = new Map();
map.set(NaN, 123);
console.log(map.get(NaN)); // 123
map.set(-0, 123);
console.log(map.get(+0)); // 123

• Map可被继承

var key = {};
class M extends Map {}
var map = new M();
map.set(key, 123);
console.log(map instanceof M && map.has(key) && map.get(key) === 123);  // true

实例的属性和操作方法

实例的属性

• size: 返回Map结构的成员数。

let map = new Map();
map.set('foo', true);
map.set('bar', false);
console.log(map.size); // 2

操作方法

• set(key, value): 设置key所对应的键值，返回整个Map结构。

var m = new Map();
m.set("edition", 6);       // 键是字符串
m.set(262, "standard");     // 键是数值
cosnole.log(m.set(undefined, "nah"));   // 键是undefined

- set方法返回的是Map本身，因此可以采用链式写法。
let map1 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');
  console.log(map1);

• get(key):读取key对应的键值，如果找不到key，则返回undefined.

var m = new Map();
var hello = function() {console.log("hello");}
m.set(hello, "Hello ES6!") // 键是函数
console.log(m.get(hello)); // Hello ES6!
console.log(m.get('name'));   // undefined

• has(key): 返回一个布尔值，表示某个键是否在Map数据结构中.

var m = new Map();
m.set("edition", 6);
m.set(262, "standard");
m.set(undefined, "nah");
console.log(m.has("edition"));  // true
console.log(m.has("years"));  // false
console.log(m.has(262));   // true
console.log(m.has(undefined));  // true

• delete(key): 删除某个键值，返回true，如果删除失败，返回false.

var m = new Map();
m.set(undefined, "nah");
console.log(m.has(undefined));     // true
console.log(m.delete(undefined));  // true
console.log(m.has(undefined));       // false
console.log(m.delete(undefined));  // false

• clear(): 清除所有成员，没有返回值

let map = new Map();
map.set('foo', true);
map.set('bar', false);
console.log(map.size); // 2
map.clear()
console.log(map.size);  // 0

遍历方法(Map的遍历顺序就是插入顺序)

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

let map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
console.log(map.keys());   // MapIterator {"F", "T"}
for (let key of map.keys()) {
  console.log(key);
}

console.log(map.values());  //MapIterator {"no", "yes"}
for (let value of map.values()) {
  console.log(value);
}

// console.log(map.entries());  // MapIterator {["F", "no"], ["T", "yes"]}
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}

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

• Map结构的默认遍历器接口（Symbol.iterator属性），就是entries方法 Map.prototype[Symbol.iterator] === Map.prototype.entries

补充

• Map结构转为数组结构，比较快速的方法是结合使用扩展运算符（...）

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
console.log([...map.keys()]);   // [1, 2, 3]
console.log([...map.values()]);   // ['one', 'two', 'three']
console.log([...map.entries()]);  // [[1,'one'], [2, 'two'], [3, 'three']]
console.log([...map]);  // [[1,'one'], [2, 'two'], [3, 'three']]

• 结合数组的map和filter方法实现Map的遍历和过滤(Map本身没有filter和map方法)

let map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

let map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
console.log(map1);  // Map {1 => "a", 2 => "b"}
let map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, '_' + v])
);
console.log(map2);  // Map {2 => "_a", 4 => "_b", 6 => "_c"}

与其它数据结构的互相转换

• Map转为数组: 使用扩展运算符(...)

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

• 数组转为Map: 使用Map构造函数

console.log(new Map([[true, 7], [{foo: 3}, ['abc']]]));  //Map {true => 7, Object {foo: 3} => Object {0: "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);
console.log(strMapToObj(myMap)) ;  // Object {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;
}
console.log(objToStrMap({yes: true, no: false}));  // Map {"yes" => true, "no" => false}

• Map转为JSON

  • Map的键名都是字符串，转为对象JSON

  function strMapToObj(strMap) {
    let obj = Object.create(null);
    for (let [k,v] of strMap) {
      obj[k] = v;
    }
    return obj;
  }
  
  function strMapToJson(strMap) {
    return JSON.stringify(strMapToObj(strMap));
  }
  let myMap = new Map().set('yes', true).set('no', false);
  console.log(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']);
  console.log(mapToArrayJson(myMap));  // [[true,7],[{"foo":3},["abc"]]]

• JSON转为Map

  • 正常情况下,所有键名都是字符串

  function objToStrMap(obj) {
    let strMap = new Map();
    for (let k of Object.keys(obj)) {
      strMap.set(k, obj[k]);
    }
    return strMap;
  }
  function jsonToStrMap(jsonStr) {
    return objToStrMap(JSON.parse(jsonStr));
  }
  console.log(jsonToStrMap('{"yes":true,"no":false}'));  // Map {"yes" => true, "no" => false}

  • 整个JSON是一个数组,且每个数组元素又是一个包含两个元素的数组(eg:[[true,7],[{"foo":3},["abc"]]])

  function jsonToMap(jsonStr) {
    return new Map(JSON.parse(jsonStr));
  }
  console.log(jsonToMap('[[true,7],[{"foo":3},["abc"]]]')); //Map {true => 7, Object {foo: 3} => ["abc"]}

参考文章

1. set-map
2. 解构
3. 不定参数
4. 扩展运算符