罗定市城乡建设局网站,遵义信息港,街机网页游戏大全,摄影网站设计论文ES6:set和map数据结构 一、Set 数据结构#xff1a;二、使用场景#xff1a;使用Set 进行去重三、Map 数据结构四、使用场景#xff1a;使用Map进行树型数据懒加载刷新五、Set和Map的区别六、Map、Set的实际使用场景 Set 和 Map 是 ES6 中引入的两种新的数据结构#xff0c… ES6:set和map数据结构 一、Set 数据结构二、使用场景使用Set 进行去重三、Map 数据结构四、使用场景使用Map进行树型数据懒加载刷新五、Set和Map的区别六、Map、Set的实际使用场景 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 demoSetnew 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 demoMapnew 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 stylemax-width: 600px :propsprops :loadloadNode lazyload:加载子树数据的方法仅当 lazy 属性为true 时生效 function(node, resolve, reject)
const props {label: name,children: children,isLeaf: leaf,
}
let pid;
let treeNodenew Map();
const tempArr[{pid:-1,name: leaf,leaf:true},{pid:-1,name: zone,},];
const loadNode (node, resolve) {pid-1treeNodetreeNode.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 );
}
