当前位置:首页 > JavaScript

js实现字典

2026-02-01 17:45:47JavaScript

字典的实现方式

在 JavaScript 中,字典(键值对集合)可以通过多种方式实现,以下是常见的几种方法:

使用普通对象

普通对象是 JavaScript 中最简单的字典实现方式:

const dictionary = {
  key1: 'value1',
  key2: 'value2'
};

// 添加元素
dictionary.key3 = 'value3';

// 访问元素
console.log(dictionary.key1); // 输出: value1

// 删除元素
delete dictionary.key2;

使用 Map 对象

ES6 引入的 Map 对象提供了更完善的字典功能:

const dictionary = new Map();

// 添加元素
dictionary.set('key1', 'value1');
dictionary.set('key2', 'value2');

// 访问元素
console.log(dictionary.get('key1')); // 输出: value1

// 检查键是否存在
console.log(dictionary.has('key1')); // 输出: true

// 删除元素
dictionary.delete('key2');

// 获取大小
console.log(dictionary.size); // 输出: 1

使用 WeakMap

WeakMap 是 Map 的变体,键必须是对象且不可枚举:

js实现字典

const dictionary = new WeakMap();
const keyObj = {};

dictionary.set(keyObj, 'value1');
console.log(dictionary.get(keyObj)); // 输出: value1

字典操作常用方法

遍历字典

对于对象:

const obj = {a: 1, b: 2};

// 遍历键
for (const key in obj) {
  console.log(key, obj[key]);
}

// ES6 方式
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});

对于 Map:

js实现字典

const map = new Map([['a', 1], ['b', 2]]);

// 遍历键值对
map.forEach((value, key) => {
  console.log(key, value);
});

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

合并字典

对象合并:

const obj1 = {a: 1};
const obj2 = {b: 2};
const merged = {...obj1, ...obj2}; // {a: 1, b: 2}

Map 合并:

const map1 = new Map([['a', 1]]);
const map2 = new Map([['b', 2]]);
const merged = new Map([...map1, ...map2]);

性能考虑

  • 对象适合简单的键值存储,键只能是字符串或 Symbol
  • Map 支持任意类型的键,提供更多操作方法,维护插入顺序
  • WeakMap 不会阻止键对象被垃圾回收,适合特殊场景

实际应用示例

实现一个简单的字典类:

class Dictionary {
  constructor() {
    this.items = {};
  }

  set(key, value) {
    this.items[key] = value;
  }

  get(key) {
    return this.items[key];
  }

  delete(key) {
    if (this.has(key)) {
      delete this.items[key];
      return true;
    }
    return false;
  }

  has(key) {
    return key in this.items;
  }

  size() {
    return Object.keys(this.items).length;
  }

  clear() {
    this.items = {};
  }
}

这些方法涵盖了 JavaScript 中实现字典的主要方式,根据具体需求选择合适的实现方案。

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

相关文章

js实现类

js实现类

JavaScript 实现类的几种方式 JavaScript 是一种基于原型的语言,但在 ES6 之后引入了 class 语法糖,使得实现类更加直观。以下是几种常见的实现方式: 使用构造函数 传统的…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js实现论坛

js实现论坛

实现论坛的基本功能 使用JavaScript实现一个论坛需要结合前端和后端技术。前端可以使用React、Vue或Angular等框架,后端可以选择Node.js配合Express或Koa框架。数据库可…

js实现视口

js实现视口

js实现视口检测的方法 使用JavaScript检测元素是否进入视口(viewport)可以通过Intersection Observer API或手动计算元素位置实现。以下是两种常见方法: Int…

js实现同步

js实现同步

同步与异步的概念 在JavaScript中,同步代码会按照顺序执行,每一行代码必须等待上一行代码执行完成后才能运行。异步代码则允许在等待某些操作(如网络请求)完成的同时继续执行其他代码。 实现同步的…

js实现点击隐藏

js实现点击隐藏

使用CSS类切换实现点击隐藏 通过添加或移除CSS类来控制元素的显示与隐藏。定义一个隐藏样式类如.hidden { display: none; },通过事件监听切换该类。 document.que…