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

本文详细介绍了ES6中的Set和Map数据结构,包括Set的去重功能、Map的键值对存储和树型数据懒加载刷新的应用。同时对比了两者区别,并列举了它们在实际项目中的应用场景,如React、Vue.js、Redux和D3.js等库的使用。
摘要由CSDN通过智能技术生成

  • 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 );
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值