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}

你可能感兴趣的:(es6,面试,es6,前端,javascript)