语雀入口
https://www.yuque.com/along-n3gko/ezt5z9
前言
在字典中,存储的时[键,值]对,其中键名是用来查询元素的,字典也称之为映射。
创建字典
与Set类相似,ECMAScript 6同样包含了一个Map类的实现,即我们所说的字典。你会发现它和Set类很相似(但不同于存储[值,值]对的形式,我们将要存储的是[键,值]对)。
1 function Dictionary() { 2 var items = {}; 3 }
方法
1 set(key,value):向字典中添加新元素。 2 delete(key):通过使用键值来从字典中移除键值对应的数据值。 3 has(key):如果某个键值存在于这个字典中,则返回true,反之则返回false。 get(key):通过键值查找特定的数值并返回。 4 clear():将这个字典中的所有元素全部删除。 5 size():返回字典所包含元素的数量。与数组的length属性类似。 6 keys():将字典所包含的所有键名以数组形式返回。 7 values():将字典所包含的所有数值以数组形式返回。
has方法
首先实现has(key)方法,后面会被set和remove等方法调用。
1 this.has = function(key) { 2 return key in items; 3 };
set方法
该方法接受一个key和value作为参数
1 this.set = function(key, value) { 2 items[key] = value; 3 };
delete方法
该方法接受一个key值,使用has方法查询是否存在,存在则删除
1 this.delete = function (key) { 2 if (this.has(key)) { 3 delete items[key]; 4 return true; 5 } 6 return false; 7 };
get方法
1 this.get = function (key) { 2 return this.has(key) ? items[key] : undefined; 3 };
values方法
1 this.values = function () { 2 var values = []; 3 for (var k in items) { 4 if (this.has(k)) { 5 values.push(items[k]); 6 } 7 } 8 return values; 9 };
clear方法
1 this.clear = function(){ 2 items = {}; 3 };
size方法
1 this.size = function(){ 2 return Object.keys(items).length; 3 };
keys方法
1 this.keys = function() { 2 return Object.keys(items); 3 };
getItems方法
1 this.keys = function() { 2 return Object.keys(items); 3 };
使用场景
对象本身作为字典
在写业务代码的时候,我很多时候看到小伙伴写代码的时候写了过多的具有高度频率重复的一些键值对的对应,或者说if,else的判断。在这种情况下,如果其枚举属性和值比较固定,建议其作为一个枚举字典固定存储和全局使用或者按需使用,这样代码会精简很多。比如:
// old codes let text = ''; if(status === 1){ text = '没有开课'; } else if(status === 2) { text = '上课中' } else { text = '没有这个课程'; } // better codes in status.js or enum.js const statusDict = { 1:'没有开课', 2:'上课中', } const getStatusText = (status) => { const defaultText = '没有这个课程'; if(!status) return defaultText; return statusDict[status] || defaultText; } // 在vue.js 中有过滤器这样的方法, //如果你的应用中高频使用一种过滤器,且针对业务较固定,可以考虑定义为全局过滤器,字典结构维护和使用