首页 > web前端 > js教程 > 在 JavaScript 中使用地图和集合:综合指南

在 JavaScript 中使用地图和集合:综合指南

Patricia Arquette
发布: 2024-12-22 14:21:15
原创
677 人浏览过

Working with Maps and Sets in JavaScript: A Comprehensive Guide

在 JavaScript 中使用地图和集合

MapsSetsES6 (ECMAScript 2015) 中引入的两个重要数据结构,它们提供了比传统对象和数组更强的功能。 地图 都允许您存储唯一值并以更有条理、更高效的方式处理数据。

1. JavaScript 中的地图

Map 是键值对的集合,其中键和值都可以是任何数据类型。与只能使用字符串或符号作为键的对象不同,Map 允许使用任何值(对象、数组、函数等)作为键。

创建地图

要创建 Map,可以使用 Map 构造函数:

const map = new Map();
登录后复制
登录后复制

或者,您可以使用键值对数组初始化 Map:

const map = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['city', 'New York']
]);

console.log(map);
登录后复制
登录后复制

向地图添加条目

您可以使用 set() 方法添加条目:

const map = new Map();

map.set('name', 'John');
map.set('age', 30);
map.set('city', 'Los Angeles');

console.log(map);
登录后复制
登录后复制

访问地图中的值

您可以使用 get() 方法访问与键关联的值:

const map = new Map([
  ['name', 'Alice'],
  ['age', 25]
]);

console.log(map.get('name'));  // Output: Alice
console.log(map.get('age'));   // Output: 25
登录后复制

检查地图中的密钥

要检查某个键是否存在,请使用 has() 方法:

const map = new Map([
  ['name', 'John'],
  ['age', 30]
]);

console.log(map.has('name'));  // Output: true
console.log(map.has('city'));  // Output: false
登录后复制

从地图中删除条目

您可以使用delete()方法删除键值对:

map.delete('age');
console.log(map.has('age'));  // Output: false
登录后复制

要清除地图上的所有条目:

map.clear();
console.log(map.size);  // Output: 0
登录后复制

迭代地图

您可以使用 forEach() 或 for...of 循环迭代 Map 中的键值对:

const map = new Map([
  ['name', 'Alice'],
  ['age', 25]
]);

// Using forEach
map.forEach((value, key) => {
  console.log(key, value);
});

// Using for...of
for (const [key, value] of map) {
  console.log(key, value);
}
登录后复制

2. JavaScript 中的集合

Set 是唯一值的集合,这意味着它会自动删除任何重复值。与可以存储多个相同元素的数组不同,集合确保集合中的每个值都是唯一的。

创建集合

您可以使用 Set 构造函数创建一个 Set:

const set = new Set();
登录后复制

或者,您可以使用值数组初始化 Set:

const set = new Set([1, 2, 3, 4, 5]);
console.log(set);
登录后复制

向集合添加值

您可以使用 add() 方法将值添加到 Set 中:

const set = new Set();

set.add(1);
set.add(2);
set.add(3);
set.add(2);  // Duplicate value, won't be added

console.log(set);  // Output: Set { 1, 2, 3 }
登录后复制

检查集合中的值

要检查 Set 中是否存在某个值,请使用 has() 方法:

console.log(set.has(2));  // Output: true
console.log(set.has(4));  // Output: false
登录后复制

从集合中删除值

您可以使用delete()方法从Set中删除值:

const map = new Map();
登录后复制
登录后复制

要清除集合中的所有值:

const map = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['city', 'New York']
]);

console.log(map);
登录后复制
登录后复制

迭代集合

您可以使用 forEach() 或 for...of 循环迭代 Set 中的值:

const map = new Map();

map.set('name', 'John');
map.set('age', 30);
map.set('city', 'Los Angeles');

console.log(map);
登录后复制
登录后复制

3. 地图与集合的比较

功能 地图 设置 标题>
Feature Map Set
Storage Stores key-value pairs Stores unique values only
Key Types Any type (objects, arrays, primitive types) Only values (no keys)
Uniqueness Keys must be unique, values can repeat Values must be unique
Order of Elements Iterates in insertion order Iterates in insertion order
Size map.size set.size
Methods set(), get(), has(), delete(), clear() add(), has(), delete(), clear()
存储 存储键值对 仅存储唯一值

键类型

任何类型(对象、数组、原始类型) 只有值(没有键) 独特性 键必须唯一,值可以重复 值必须是唯一的
    元素顺序
按插入顺序迭代 按插入顺序迭代

尺寸

地图大小 设置大小 方法 设置(),获取(),有(),删除(),清除() 添加(),有(),删除(),清除() 表>
  • 4.
  • 地图和集合的用例
  • 当您需要将唯一键与特定值关联时,
映射
  • 非常有用。示例包括:

    存储用户偏好

      存储配置选项
    • 根据键缓存数据
    • 当您需要存储唯一值的集合时,
  • 集是理想的选择。示例包括:

      跟踪网站上的唯一访问者
    • 从数组中删除重复值
    • 跟踪已处理或查看的项目
    结论


    地图提供高效的键值对存储,支持任何数据类型作为键,并且它们维护插入顺序。

    集合

    存储唯一值,当您想确保集合中没有重复项时特别有用。
    Maps 和 Sets 都提供强大的功能,可以帮助您以更加结构化和高效的方式管理数据。 嗨,我是 Abhay Singh Kathayat! 我是一名全栈开发人员,拥有前端和后端技术方面的专业知识。我使用各种编程语言和框架来构建高效、可扩展且用户友好的应用程序。 请随时通过我的商务电子邮件与我联系:kaashshorts28@gmail.com。

    以上是在 JavaScript 中使用地图和集合:综合指南的详细内容。更多信息请关注PHP中文网其他相关文章!

    来源:dev.to
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    作者最新文章
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板