掌握 JavaScript 中的 Map 和 Set

JavaScript 中的 Map 和 Set 简介

Map 和 Set 是 ES6 中引入的新数据结构,用于补充现有的对象和数组,在特定情况下提供更强大的功能和灵活性。

##Map:更强大的键值存储

Map 是一种存储键值对的数据结构,与传统对象相比,它具有更强大的功能和灵活性。

###地图的主要特点

  • 没有键限制:与对象不同,对象的键仅限于字符串和符号,而 Map 允许使用任何类型作为键。
  • 保留插入顺序:Map 记住元素插入的顺序,使其成为可迭代对象。
  • 轻松检查大小 :Map 具有一个size属性,可以轻松检查元素的数量。
  • 性能优化:Map相比对象提供了更高效的键值对的添加、删除、查找。

使用 Map

c 复制代码
const map = new Map();

// Add elements
map.set('key1', 'value1');
map.set(42, 'value2'); // Using a number as a key
map.set({ a: 1 }, 'value3'); // Using an object as a key

console.log(map.get('key1')); // 'value1'
console.log(map.get(42)); // 'value2'

// Check size
console.log(map.size); // 3

// Delete an element
map.delete(42);

// Check if a key exists
console.log(map.has(42)); // false

// Iterate over all elements
map.forEach((value, key) => {
  console.log(key, value);
});

##集合:唯一值的集合

集合是一种存储唯一值集合的数据结构,类似于数组,但没有重复项。

###Set 的主要特点

  • 无重复:设置自动删除重复项,确保所有值都是唯一的。
  • 存储唯一值:Set 可以存储数字、字符串、对象和其他值,每个值都是唯一的。
  • 保留插入顺序:Set 记住元素插入的顺序。

###使用 Set

arduino 复制代码
const set = new Set();

// Add elements
set.add(1);
set.add(2);
set.add(2); // Duplicate value is ignored
set.add('Hello');

console.log(set); // Set { 1, 2, 'Hello' }

// Check size
console.log(set.size); // 3

// Delete an element
set.delete(1);

// Check if a value exists
console.log(set.has(1)); // false

// Iterate over all elements
set.forEach(value => {
  console.log(value);
});

###实际用例:从数组中删除重复项

ini 复制代码
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

结论

总而言之,Map 和 Set 是 JavaScript 中强大的数据结构,与传统的对象和数组相比,它们提供了更多的灵活性和特性。通过了解如何使用 Map 和 Set,你可以编写更高效的代码,并利用它们独特的特性来解决复杂的问题。查看更多www.mxwd.cc

相关推荐
yyt36304584111 分钟前
一次鼠标交互触发两次 Vue flushJobs:把高频交互从 VDOM 里拆出来
前端·vue.js·计算机外设
YUJIANYUE18 分钟前
查立得万用查分安卓版(web环境+查询系统免安装单文件一键运行包)
android·前端
知兀33 分钟前
框架脚手架搭建,推送github一键使用
javascript·vue.js·ecmascript
慧都小项1 小时前
从 Figma 到 Qt:Qtitan 能减少哪些界面还原工作?
前端·qt·嵌入式·figma·图形界面·工业界面·qtitan
YWL1 小时前
OpenLayers导出功能:地图截图+GeoJSON导出完整方案,从Canvas合并到PDF生成
前端·vue·openlayers
苦瓜小生1 小时前
【前端】【力扣与手撕】十天带你刷完前端算法与手撕,全是最简单好记的最优解法!day4
前端·数据结构·算法·leetcode·面试
mayaairi1 小时前
Vue2 实战进阶:表单数据收集、指令系统与自定义指令全解析
前端·javascript·vue.js
计算机魔术师1 小时前
实测GPT-6 Astra后,我发现过去十年的专业门槛正在失效
前端
虎头金猫1 小时前
Pic Smaller 本地部署:压缩图片、转换格式,再搭建自己的 Web 工具
运维·前端·开源·aigc·ai编程·ai写作
hunterandroid1 小时前
Android ANR 排查实战:从线上告警到主线程卡点定位
android·前端