ES6: set和map数据结构以及使用场景

• Set 和 Map 是 ES6 中引入的两种新的数据结构，用于存储和管理数据。它们可以处理唯一性需求、键值对需求、去重需求等，适用于许多实际场景，如数据过滤、数据映射、缓存管理
• Set 和 Map 是JavaScript的对象，本质上是对键值对的集合（Hash结构）。

一、Set 数据结构：

Set 是一种有序且唯一的集合，它的值可以是任何类型。
Set 中的值是不重复的，重复的值将被自动去重。

常见的 Set 的属性如下：

• size: 返回 Set 中的元素个数。

常见的 Set 的方法如下：

• add(value): 向 Set 中添加一个值。
• delete(value): 删除 Set 中指定的值。
• has(value): 检查Set 中是否包含指定的值。
• clear(): 清空 Set 中的所有元素

let demoSet=new Set();
demoSet.add("张三")
demoSet.add(18)
demoSet.add(81)
demoSet.add("张三")// 重复不会添加

console.log(demoSet.size);// 2
console.log(demoSet);// Set(3) {'张三', 18, 81}
console.log(demoSet.has("张三"));// true
console.log(demoSet.delete(81));// true
demoSet.clear();
console.log(demoSet);//Set(0) {size: 0}

常见的 Set 的遍历方法如下：

• keys()：返回一个包含集合中所有键的数组；
• values()：返回一个包含集合中所有值的数组；
• entries：返回一个包含集合中所有键值对的数组(感觉没什么用就不实现了) ；
• forEach()：用于对集合成员执行某种操作，没有返回值

let demoSet = new Set(["张三",18,81]);
console.log("keys",demoSet.keys());// SetIterator {'张三', 18, 81}
console.log("values",demoSet.values());// SetIterator {'张三', 18, 81}

二、使用场景：使用Set 进行去重

let tempArr=[1,4,5,5,4,5,7,8,3,2,6,7];
// 封装一个方法
function unique(arr) {
  var newArr = []
  var myset = new Set(arr) //利用了Set结构不能接收重复数据的特点
  for (let val of myset) {
    newArr.push(val)
  }
  return newArr
}
console.log(unique(tempArr));//[1, 4, 5, 7, 8, 3, 2, 6]

// 简单写法
console.log([...new Set(tempArr)]);// [1, 4, 5, 7, 8, 3, 2, 6]

// 方法三
let arr = ["a","b","c","c","d"];
let set = new Set(arr);
let newArr = Array.from(set);
console.log(newArr);// ['a', 'b', 'c', 'd']

三、Map 数据结构

Map 是一种用于存储键值对的有序列表，其中的键唯一且值可以是任意类型。

常见的 Map操作方法如下：
set(key, value): 向 Map 中添加一个键值对。
get(key): 获取指定键的值。
delete(key): 删除指定键的键值对。
has(key): 检查 Map 中是否包含指定的键。
size: 返回 Map 中键值对的数量。
clear(): 清空 Map 中所有的键值对。

let demoMap=new Map();
demoMap.set("name","张三")
demoMap.set("age",18)
demoMap.set("age2",81)

console.log(demoMap.get("name"));// 张三
console.log(demoMap.has("age"));// true
console.log(demoMap.delete("age2"));// true
console.log(demoMap.size);// 2
console.log(demoMap);// Map(2) {'name' => '张三', 'age' => 18}
demoMap.clear();
console.log();// Map(0) {size: 0}	

四、使用场景：使用Map进行树型数据懒加载刷新

在增删改后需要重新刷新节点数据。

  <el-tree 
  	style="max-width: 600px" 
  	:props="props" 
  	:load="loadNode" lazy>

load:加载子树数据的方法，仅当 lazy 属性为true 时生效 function(node, resolve, reject)

const props = {
  label: 'name',
  children: 'children',
  isLeaf: 'leaf',
}
let pid="";
let treeNode=new Map();
const tempArr=[
      {
        pid:"-1",
        name: 'leaf',
        leaf:true
      },
      {
         pid:"-1",
        name: 'zone',
      },
    ];
const loadNode = (node, resolve) => {
  pid="-1"
  treeNode=treeNode.set(pid,{node,resolve});
  if (node.level === 0) {
    return resolve([{ name: 'region' ,id:"-1"}])
  }
  if (node.level > 0) {
    return resolve(tempArr)
  }
     
}
const refresh=()=>{
  const {node,resolve}=treeNode.get(pid)
  loadNode(node,resolve)
}
const onAdd=()=>{
   setTimeout(() => {
     refresh();
  }, 500)
}

五、Set和Map的区别

Map是一种键值对的集合，其中键和值可以是任意类型的。它的使用场景包括需要存储键值对并需要快速查找的场景，比如存储对象之间的关联关系、缓存数据等。

Set是一组唯一值的集合，适用于需要存储唯一值并需要快速查找的场景，比如数据去重、存储一组唯一的用户标识等。

六、Map、Set的实际使用场景

一些常见的开源库充分利用了 Map 和 Set 提供的高效数据结构来提升性能和功能实现：

· React : React 内部使用 Map 来存储组件的属性，这有助于快速查找和更新组件的属性。
· Vue . js : Vue . js 在其响应式系统中使用了 Map 来跟踪依赖关系，以便在数据变化时能够快速更新相关的视图。
· Redux : Redux 是一个流行的状态管理库，它在内部使用了 Map 来存储状态树，以便快速查找和更新状态。
· Lodash : Lodash 是一个 JavaScript 实用工具库，它在许多地方使用了 Map 和 Set 来提供高效的数据处理和操作。
.D3.js:D3.js是一个数据可视化库，它使用 Set 来管理数据的唯一性，以及使用 Map 来存储数据映射关系，例如数据和图形元素之间的对应关系。

//在 React 中，内部使用 Map 来存储组件的属性
const componentProps = new Map ();
function setComponentProps ( component , props ){
   componentProps.set(component , props );
}
function getComponentProps ( component ){ 
	return componentProps.get( component );
}

//在D3.js中，使用 Set 来管理数据的唯一性
const uniqueData = new Set ();
function addDataToSet ( data ){
     uniqueData.add ( data );
}
function isDataUnique ( data ){
	return uniqueData . has ( data );
}