UDN-企业互联网技术人气社区

板块导航

浏览  : 917
回复  : 7

[原生js] JavaScript中的字典

[复制链接]
芭芭拉的头像 楼主
发表于 2017-2-8 15:02:51 | 显示全部楼层 |阅读模式
  1.概念

  字典是一种以键值对的形式存储的数据结构,就系那个电话本中的名字和电话号码一样。要找到一个电话首先要找到名字,再根据名字找到电话号码。这里的键就是指用来查找的东西,值就是查找得到的结果。

  JavaScript中的object类就是已字典的形式设计的。这里使用object类本身的特性,实现一个dictionary类,让字典类型的对戏那个使用起来更加简单。

  dictionary类的基础是array类,不是object类。稍后将会提到,我们想对字典中的键排序,而JavaScript中是不能对对象的属性经行排序。JavaScript中一切皆是对象,数组也是对象。

  先使用下面的方法来定义dictionary类:
  1. function Dictionary(){
  2.     this.datastore = new Object();
  3. }
复制代码

  先来定义一个add方法,该方法接受两个参数,键和值。键是值在字典下的索引,如下:
  1. function add(key, value){
  2.     this.datastore[key] = value;
  3. }
复制代码

  接下来定义find方法,该方法以键作为参数,返回和其关联的值,代码如下:
  1. function find(key){
  2.     return this.datastore[key];
  3. }
复制代码

  从字典中删除键值对需要使用JavaScript中的一个内置函数,delete,这个函数是object类的一部分,使用对键的引用作为参数,该函数同时删掉和其关联的值。代码如下:
  1. function remove(key){
  2.     delete this.datastore[key];
  3. }
复制代码

  最后我们希望可以显示字典中所有的键值对,下面是一个完成该任务的方法:
  1. function showAll(){
  2.     for (var key in this.datastore) {
  3.         document.write(key + '->' + this.datastore[key]);
  4.         document.write('<br>');
  5.     }
  6. }
复制代码

  我们还可以定义一些在特定情况下有用的辅助方法。比如,要是知道字典中元素的个数就好了,那么可以顶一个count方法,如下:
  1. function count(){
  2.     var n = 0;
  3.     for (var key in this.datastore) {
  4.         ++n;
  5.     }
  6.     return n;
  7. }
复制代码

  很多看官和我一样会想,能不能用length属性,这是不行的,因为当键的类型为字符串的时候,length属性就不管用了,可以使用下面的代码来测试:
  1. var nums = new Array();
  2. nums[0] = 1;
  3. nums[1] = 2;
  4. console.info(nums.length); // 显示2
  5. var pbook = new Array();
  6. pbook["David"] = 1;
  7. pbook["Jennifer"] = 2;
  8. console.info(pbook.length); // 显示0
  9. clear是另外一种辅助方法,定义如下:

  10. function clear(){
  11.     for (var key in this.datastore) {
  12.         delete this.datastore[key];
  13.     }
  14. }
复制代码

  字典的主要用途是通过键取值,我们无需关系数据在字典中的实际存储顺序。然后很多人希望看到一个有序的字典。我的做法是先把键值对的所有键值取出来,放在一个数组中,然后对这个数组排序,最后按照排序后的顺序输出值,如下:
  1. function sort(){
  2.     var keys = Array();
  3.     for (var key in this.datastore) {
  4.         keys.push( key );
  5.     }
  6.     keys.sort();
  7.     for (var i=0; i<keys.length; i++) {
  8.         document.write(keys[i] + '->' + this.datastore[keys[i]]);
  9.         document.write('<br>');
  10.     }
  11. }
复制代码

  2.代码实现

  下面看看上面所有的问题代码:
  1. function Dictionary(){
  2.     this.add = add;
  3.     this.datastore = new Object();
  4.     this.find = find;
  5.     this.remove = remove;
  6.     this.showAll = showAll;
  7.     this.length = length;
  8.     this.count = count;
  9.     this.clear = clear;
  10.     this.sort = sort;
  11. }

  12. function add(key, value){
  13.     this.datastore[key] = value;
  14. }

  15. function find(key){
  16.     return this.datastore[key];
  17. }

  18. function remove(key){
  19.     delete this.datastore[key];
  20. }

  21. function count(){
  22.     var n = 0;
  23.     for (var key in this.datastore) {
  24.         ++n;
  25.     }
  26.     return n;
  27. }

  28. function showAll(){
  29.     for (var key in this.datastore) {
  30.         document.write(key + '->' + this.datastore[key]);
  31.         document.write('<br>');
  32.     }
  33. }

  34. function sort(){
  35.     var keys = Array();
  36.     for (var key in this.datastore) {
  37.         keys.push( key );
  38.     }
  39.     keys.sort();
  40.     for (var i=0; i<keys.length; i++) {
  41.         document.write(keys[i] + '->' + this.datastore[keys[i]]);
  42.         document.write('<br>');
  43.     }
  44. }

  45. function clear(){
  46.     for (var key in this.datastore) {
  47.         delete this.datastore[key];
  48.     }
  49. }

  50. var pbook = new Dictionary();
  51. pbook.add("Raymond","123");
  52. pbook.add("David", "345");
  53. pbook.add("Cynthia", "456");

  54. pbook.showAll();
  55. document.write('after sort:' + '<br>')
  56. pbook.sort();

  57. document.write("Number of entries: " + pbook.count() + '<br>');
  58. document.write("David's extension: " + pbook.find("David") + '<br>');
  59. pbook.showAll();
  60. pbook.clear();
  61. document.write("Number of entries: " + pbook.count() + '<br>');
复制代码

  上面代码在浏览器下的输出结果如下:
1.png

相关帖子

发表于 2017-2-8 15:03:24 | 显示全部楼层
不错的帖子,支持下
使用道具 举报

回复

发表于 2017-2-11 05:11:43 | 显示全部楼层
路过 帮顶 嘿嘿
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部