liang14658fox

Appearance

字典功能类 ​

上一个公司项目是一个热力系统，应用的ruoyi框架，里面结合了vue的字典系统，很多下拉框、表格需要应用到字典。 字典有多种，这里介绍两种：

  1. 这种字典由对象组成的数组构成，每个对象代表着一个人、公司、单位或者一个管线、阀门、热源，里面有很多属性，比如纳税人识别号、管线UUID、行政区划、所属街道、纳税人编号等。

  2. 还有一种字典由键值对构成的对象构成，这种字典更像是一种映射关系，接下来总结一下对象字典可能会遇到的需求：

  • 给对象添加键值对
  • 使用键名查找对象中对应的值，找不到则返回 undefined，找到则返回该值
  • 使用键名查找对象中对应的值，并且删除该键值对
  • 提取所有键名，组成新数组（Object.keys（）方法）
  • 提取所有键名，组成新数组，并且排序
  • 将对象中的所有键值对转换为字符串，以 ' , ' 分隔
  • 将对象中的所有键值对，先排序，再转换为字符串，以 ' , ' 分隔
js
class Dictionary {
	constructor() {
		this.dataStore = {}
	}
    //整体赋值
	addEntire(arr) {
		this.dataStore = arr
	}
	// add(key, value) 向字典中添加 键值对
	add(key, value) {
		this.dataStore[key] = value
	}
	// find(key) 从字典中查找 key 键对应的值，找不到则返回 undefined
	find(key) {
		return this.dataStore[key]
	}
	// remove(key) 从字典中删除 key 键
	remove(key) {
		delete this.dataStore[key]
	}
	// getKeys() 获取字典中的所有 key
	getKeys() {
		return Object.keys(this.dataStore)
	}
	// getKeysSort() 获取字典中的所有 key，并使用 sort 排序
	getKeysSort() {
		return this.getKeys().sort()
	}
	// count() 返回字典中 键值对 的个数
	count() {
		return this.getKeys().length
	}
	// showAll() 将字典中的所有 键值对 转换为字符串，以 , 分隔
	showAll() {
		let res = ''
		this.getKeys().forEach(key => {
			res += `,{key:'${key}',value:'${this.dataStore[key]}'}`
		})
		return res.slice(1)
	}
	// showAllSort() 将字典中的所有键按照 sort 排序，
    // 之后将所有 键值对 转换为字符串，以 , 分隔
	showAllSort() {
		let res = ''
		this.getKeys().sort().forEach(key => {
			res += `,{key:'${key}',value:'${this.dataStore[key]}'}`
		})
		return res.slice(1)
	}
}
class Dictionary {
	constructor() {
		this.dataStore = {}
	}
    //整体赋值
	addEntire(arr) {
		this.dataStore = arr
	}
	// add(key, value) 向字典中添加 键值对
	add(key, value) {
		this.dataStore[key] = value
	}
	// find(key) 从字典中查找 key 键对应的值，找不到则返回 undefined
	find(key) {
		return this.dataStore[key]
	}
	// remove(key) 从字典中删除 key 键
	remove(key) {
		delete this.dataStore[key]
	}
	// getKeys() 获取字典中的所有 key
	getKeys() {
		return Object.keys(this.dataStore)
	}
	// getKeysSort() 获取字典中的所有 key，并使用 sort 排序
	getKeysSort() {
		return this.getKeys().sort()
	}
	// count() 返回字典中 键值对 的个数
	count() {
		return this.getKeys().length
	}
	// showAll() 将字典中的所有 键值对 转换为字符串，以 , 分隔
	showAll() {
		let res = ''
		this.getKeys().forEach(key => {
			res += `,{key:'${key}',value:'${this.dataStore[key]}'}`
		})
		return res.slice(1)
	}
	// showAllSort() 将字典中的所有键按照 sort 排序，
    // 之后将所有 键值对 转换为字符串，以 , 分隔
	showAllSort() {
		let res = ''
		this.getKeys().sort().forEach(key => {
			res += `,{key:'${key}',value:'${this.dataStore[key]}'}`
		})
		return res.slice(1)
	}
}

初始化功能类

js
const phoneDictionary = new Dictionary()
const phoneDictionary1 = new Dictionary()
phoneDictionary.add('yi', 13010102020)
phoneDictionary.add('er', 13030304040)
phoneDictionary1.add('yi', 13010102020)
phoneDictionary1.add('er', 13030304040)
phoneDictionary.add('zhangsan', 13000001111)
phoneDictionary.add('lisi', 13022223333)
phoneDictionary.add('wangwu', 13044445555)
phoneDictionary.add('luliu', 13066667777)
phoneDictionary.add('zhaoqi', 13088889999)
const phoneDictionary = new Dictionary()
const phoneDictionary1 = new Dictionary()
phoneDictionary.add('yi', 13010102020)
phoneDictionary.add('er', 13030304040)
phoneDictionary1.add('yi', 13010102020)
phoneDictionary1.add('er', 13030304040)
phoneDictionary.add('zhangsan', 13000001111)
phoneDictionary.add('lisi', 13022223333)
phoneDictionary.add('wangwu', 13044445555)
phoneDictionary.add('luliu', 13066667777)
phoneDictionary.add('zhaoqi', 13088889999)

测试

js
// 打印一下字典内容：
console.log(phoneDictionary)
// 通过找 zhangsan键 返回 对应的值
console.log(`phoneDictionary.find('zhangsan')`, phoneDictionary.find('zhangsan'))
// 找不到返回undefined
console.log(`phoneDictionary.find('zhangsan1')`, phoneDictionary.find('zhangsan1'))
// 通过键删除
phoneDictionary.remove('yi')
console.log(phoneDictionary)
// getKeys() 获取字典中的所有 key
console.log(`phoneDictionary.getKeys()`, phoneDictionary.getKeys())
console.log(`phoneDictionary.getKeysSort()`, phoneDictionary.getKeysSort())
// count() 返回字典中 键值对 的个数
console.log(`phoneDictionary.count()`, phoneDictionary.count())
// showAll() 将字典中的所有 键值对 转换为字符串，以 , 分隔
console.log(`phoneDictionary.showAll()`, phoneDictionary.showAll())
console.log(`phoneDictionary.showAllSort()`, phoneDictionary.showAllSort())
console.log(phoneDictionary1)
// 打印一下字典内容：
console.log(phoneDictionary)
// 通过找 zhangsan键 返回 对应的值
console.log(`phoneDictionary.find('zhangsan')`, phoneDictionary.find('zhangsan'))
// 找不到返回undefined
console.log(`phoneDictionary.find('zhangsan1')`, phoneDictionary.find('zhangsan1'))
// 通过键删除
phoneDictionary.remove('yi')
console.log(phoneDictionary)
// getKeys() 获取字典中的所有 key
console.log(`phoneDictionary.getKeys()`, phoneDictionary.getKeys())
console.log(`phoneDictionary.getKeysSort()`, phoneDictionary.getKeysSort())
// count() 返回字典中 键值对 的个数
console.log(`phoneDictionary.count()`, phoneDictionary.count())
// showAll() 将字典中的所有 键值对 转换为字符串，以 , 分隔
console.log(`phoneDictionary.showAll()`, phoneDictionary.showAll())
console.log(`phoneDictionary.showAllSort()`, phoneDictionary.showAllSort())
console.log(phoneDictionary1)

根据键名查找键值对

js
const classarray = {
	"12345": '我是12345',
	"001": '我是001',
	"002": '我是002',
	"003": '我是003'
}
const phoneDictionary3 = new Dictionary()
// 向字典的数据赋值，而且是以对象（属性-值）的形式
phoneDictionary3.addEntire(classarray)
console.log(phoneDictionary3)
console.log(phoneDictionary3.find('12345'))
const classarray = {
	"12345": '我是12345',
	"001": '我是001',
	"002": '我是002',
	"003": '我是003'
}
const phoneDictionary3 = new Dictionary()
// 向字典的数据赋值，而且是以对象（属性-值）的形式
phoneDictionary3.addEntire(classarray)
console.log(phoneDictionary3)
console.log(phoneDictionary3.find('12345'))