当前位置:首页 > JavaScript

js实现字典表

2026-02-02 17:41:16JavaScript

使用对象字面量创建字典

JavaScript 中可以通过对象字面量直接实现字典功能,键值对形式存储数据:

const dictionary = {
  "key1": "value1",
  "key2": "value2"
};
// 访问
console.log(dictionary["key1"]); // 输出 "value1"

使用 Map 对象实现字典

ES6 引入的 Map 类型更适合字典场景,支持任意类型的键且保留插入顺序:

const map = new Map();
map.set("name", "Alice");
map.set(1, "Number Key");
// 访问
console.log(map.get("name")); // 输出 "Alice"

字典的常见操作

添加/更新元素

js实现字典表

dictionary["newKey"] = "newValue"; // 对象字面量
map.set("newKey", "newValue");     // Map

删除元素

delete dictionary["key1"];        // 对象字面量
map.delete("key1");               // Map

检查键是否存在

js实现字典表

"key1" in dictionary;            // 对象字面量
map.has("key1");                 // Map

遍历字典

对象字面量遍历

for (const key in dictionary) {
  console.log(key, dictionary[key]);
}
// 或使用 Object.keys()
Object.keys(dictionary).forEach(key => {
  console.log(key, dictionary[key]);
});

Map 遍历

map.forEach((value, key) => {
  console.log(key, value);
});
// 或使用迭代器
for (const [key, value] of map) {
  console.log(key, value);
}

性能与特性对比

  • 对象字面量:键自动转换为字符串,无法直接使用对象作为键。
  • Map:支持任意类型键,提供 size 属性直接获取元素数量,迭代效率更高。

根据需求选择实现方式,简单键值存储可用对象字面量,复杂场景推荐使用 Map

标签: 字典js
分享给朋友:

相关文章

js实现轮播图

js实现轮播图

轮播图实现方法 基础HTML结构 <div class="slider"> <div class="slides"> <img src="image1.jpg…

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document…

js实现图片轮播

js实现图片轮播

实现基础图片轮播 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS设置样式和动画效果,JavaScript处理轮播逻辑。 <div c…

js实现图片上传

js实现图片上传

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。HTML部分需要创建一个文件选择输入框和一个用于…

js 实现倒计时

js 实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是两种常见实现方式。 使用 setInterval 实…

js实现全屏

js实现全屏

实现全屏的基本方法 使用JavaScript实现全屏功能主要依赖Element.requestFullscreen()方法。现代浏览器均支持此API,但不同浏览器可能需要添加前缀。 // 触发全屏…