es6的 Set 和 Map 数据结构

1、new Map（）

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

const map = new Map([
  ['name', '张三'],
  ['age',  18],
]);
console.log(map,...map,[...map])
// Map(2) {'name' => '张三', 'age' => 18}
// ['name', '张三']  ['age', 18] 
// [ ['name', '张三'], ['age', 18] ]

Map与Set的区别

• Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构

集合-----是由一堆无序的、相关联的，且不重复的内存结构【数学中称为元素】组成的组合
字典-----是一些元素的集合。每个元素有一个称作key 的域，不同元素的key 各不相同

• Set集合是以[值，值]的形式存储元素
• Map字典是以[键，值]的形式存储

map 基本属性和方法

• size属性 返回 Map 结构的成员总数
• set() 设置键名key对应的键值为value；

key重复值会被覆盖
返回整个 Map 结构，可采用链式写法

• get() 读取key对应的键值，如果找不到key，返回undefined
• has() 检测某个键是否存在
• delete() 删除某个键，返回true。如果删除失败，返回false
• clear() 清除所有成员，清除后size为0

const map = new Map();
map.set('foo', true);   // 键是字符串
map.set(fn, 'standard')   // 键是函数
map.set(1, 'a').set(2, 'b').set(3, 'c') // 链式操作
map.size // 键值对个数 5
map.get(1)  // a 读取键值
map.has('foo')  // true 键是否存在
map.delete('foo')  // 删除键值对
map.clear() // 清空map

map循环遍历方法

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

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
console.log(map.keys()) // {'F', 'T'}
console.log(map.values()) // {'no', 'yes'}
console.log(map.entries()) // {'F' => 'no', 'T' => 'yes'}
map.forEach(function(value, key, map) {
  console.log(key, value);   // F no   // T yes   
});

map在复杂 if … else 判断的应用

• 使用 if … else

/**
 * 按钮点击事件
 * @param {number} status 活动状态：1开团进行中 2开团失败 3 开团成功 4 商品售罄 5 有库存未开团
 * @param {string} identity 身份标识：guest客态 master主态
 */
const onButtonClick = (status,identity)=>{
  if(identity == 'guest'){
    if(status == 1){
      //do sth
    }else if(status == 2){
      //do sth
    }else if(status == 3){
      //do sth
    }else if(status == 4){
      //do sth
    }else if(status == 5){
      //do sth
    }else {
      //do sth
    }
  }else if(identity == 'master') {
    if(status == 1){
      //do sth
    }else if(status == 2){
      //do sth
    }else if(status == 3){
      //do sth
    }else if(status == 4){
      //do sth
    }else if(status == 5){
      //do sth
    }else {
      //do sth
    }
  }
}

• 使用Map

// 使用Map方法
const actions = new Map([
  ['guest_1', ()=>{/*do sth*/}],
  ['guest_2', ()=>{/*do sth*/}],
  ['guest_3', ()=>{/*do sth*/}],
  ['guest_4', ()=>{/*do sth*/}],
  ['guest_5', ()=>{/*do sth*/}],
  ['master_1', ()=>{/*do sth*/}],
  ['master_2', ()=>{/*do sth*/}],
  ['master_3', ()=>{/*do sth*/}],
  ['master_4', ()=>{/*do sth*/}],
  ['master_5', ()=>{/*do sth*/}],
  ['default', ()=>{/*do sth*/}],
])

/**
 * 按钮点击事件
 * @param {string} identity 身份标识：guest客态 master主态
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 开团成功 4 商品售罄 5 有库存未开团
 */
const onButtonClick = (identity,status)=>{
  // Map的get方法根据传入的参数获取当前key值对应的value值，即当前情况的处理函数
  let action = actions.get(`${identity}_${status}`) || actions.get('default') 
  action.call(this) // call方法执行action函数
}

• Map 进一步优化写法

// 某些情况执行一样的回调，可使用正则
// 回调函数也可以提取出来
const actions = ()=>{
  const functionA = ()=>{/*do sth*/}
  const functionB = ()=>{/*do sth*/}
  const functionC = ()=>{/*send log*/}
  return new Map([
    [/^guest_[1-4]$/,functionA], // guest  1、2、3、4
    [/^guest_5$/,functionB],     // guest  5
    [/^guest_.*$/,functionC],	// guest 所有情况
    //...
  ])
}

const onButtonClick = (identity,status)=>{
  let action = [...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`)))
  action.forEach(([key,value])=>value.call(this))
}

2、new Set()

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

let list = new Set(['a','b','c','a'])
console.log(list,[...list]) 
// Set(3) {'a', 'b', 'c'}
// ['a', 'b', 'c']

set 基本属性和方法

• size属性 返回 set 结构的成员总数
• add添加某个值，返回 Set 结构本身

重复值不会添加
返回整个 set 结构，可采用链式写法

• has() 检测某个值是否存在
• delete() 删除某个值，返回true。如果删除失败，返回false
• clear() 清除所有成员

const set= new Set();
set.add(1);   // 添加元素
set.add(2).add(3).add(3)  // 链式操作
set.size // 3
set.delete(1)  // 删除值
set.has(2)  // true  是否存在
set.clear() // 清空 

set循环遍历方法

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

let list = new Set(['a','b','c'])
console.log(list.keys()) // {'a', 'b', 'c'}
console.log(list.values()) // {'a', 'b', 'c'}
console.log(list.entries()) // {'a' => 'a', 'b' => 'b', 'c' => 'c'}
map.forEach(function(value, key ) {
  console.log(key, value);    
});

set使用场景

• 用于数组去重

let arr = [3, 5, 2, 2, 5, 5];
let setArr = new Set(arr)     // 返回set数据结构  Set(3) {3, 5, 2}
// es6的...解构
let unique1 =  [...setArr ];      //去重转数组后  [3,5,2] 
// Array.from()解析类数组为数组
let unique2 = Array.from(setArr )   //去重转数组后  [3,5,2] 

• 字符串去重

let str = "352255";
let unique = [...new Set(str)].join("");     // 352 

• 数组并集、交集、和差集

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// （a 相对于 b 的）差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}