本文實(shí)例講述了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之字典(Dictionary)。分享給大家供大家參考，具體如下：

字典(Dictionary)

字典(Dictionary)是一種以 鍵-值對(duì) 形式存儲(chǔ)數(shù)據(jù)的數(shù)據(jù)結(jié)構(gòu) ，就如同我們平時(shí)查看通訊錄一樣，要找一個(gè)電話，首先先找到該號(hào)碼的機(jī)主名字，名字找到了，緊接著電話號(hào)碼也就有了。這里的鍵就是你用來(lái)查找的東西，本例中指代的就是名字，值就是查找得到的結(jié)果，也就是對(duì)應(yīng)的電話號(hào)碼。

其實(shí)，JavaScript 中的 Object 類就是以字典的形式設(shè)計(jì)的，下面我們將會(huì)借助 Object 類的特性，自主實(shí)現(xiàn)一個(gè) Dictionary 類，讓這種字典類型的對(duì)象使用起來(lái)更加方便。

字典的實(shí)現(xiàn)

字典（Dictionary）類的基礎(chǔ)是 Array 類。

同之前的我們所看到的數(shù)據(jù)結(jié)構(gòu)一樣，字典類也應(yīng)該有添加、刪除、清空等操作，于是我們可以先定義一個(gè)字典類的基礎(chǔ)數(shù)據(jù)類型，如下圖。

 
數(shù)據(jù)類型定義

有了上述的數(shù)據(jù)類型定義，我們 Dictionary 類構(gòu)造函數(shù)定義也就迎刃而解了

//字典類

function Dictionary () {
  this.dataStore = [];
  this.add = add;     // 添加元素
  this.find = find;    // 查找元素
  this.remove = remove;  // 刪除元素
  this.count = count;   // 字典中元素個(gè)數(shù)
  this.showAll = showAll; // 顯示字典元素
  this.clear = clear;   // 清空字典
}

add：向字典添加一個(gè)元素

上面我們也提到，字典是以 鍵值對(duì) 的方式存儲(chǔ)數(shù)據(jù)的，因此，add 方法就需要接受兩個(gè)參數(shù)，分別是 鍵和值 ，其中鍵表示其在字典中的索引，實(shí)現(xiàn)如下

//向字典添加元素

function add( key , value ){
  this.dataStore[key] = value;
}

沒(méi)錯(cuò)，就是這么簡(jiǎn)單！接著我們來(lái)看看 find 方法

find：查找字典中的元素

我們是以鍵值對(duì)方式存儲(chǔ)的，因此我們只需要傳入需要查找的鍵，就可以順理成章的取到對(duì)應(yīng)的值，這對(duì)應(yīng)于JS中的數(shù)組也是十分簡(jiǎn)單的；

//查找字典中的元素

function find( key ){
  return this.dataStore[key];
}

有了添加和查找，接下來(lái)就是刪除了！

remove：刪除字典中的一個(gè)元素

要想刪除字典中的一個(gè)元素，即刪除一個(gè) 鍵值對(duì) ， 我們需要借助 JS 提供的一個(gè)內(nèi)置的函數(shù) ： delete ，這個(gè)函數(shù)我們并不陌生，它可以同時(shí)刪除鍵和與其對(duì)應(yīng)的值，那么 remove 方法定義就很簡(jiǎn)單了

//刪除一個(gè)元素

function remove( key ){
  if( this.dataStore[key] ) delete this.dataStore[key];
  else return 'Not Found';
}

除此之外，我們還想顯示字典中的所有鍵值對(duì)，showAll 方法來(lái)完成。

showAll：顯示字典中所以鍵值對(duì)

//顯示字典元素

function showAll () {
  for( var key in this.dataStore ){
    console.log( key + '->' + this.dataStore[key] );
  }
}

我們已經(jīng)完成了字典的基本操作，現(xiàn)在我們做個(gè)小測(cè)試，

//實(shí)例化字典類

var directory = new Dictionary();

//添加元素

directory.add( 'Jack' , '138****5505' );
directory.add( 'Alice' , '156****6606');
directory.add( 'Tom' , '180****8808');

//顯示字典

directory.showAll();     // Jack->138****5505
               // Alice->156****6606
               // Tom->180****8808
            
directory.remove( 'Tom' );
directory.showAll();     // Jack->138****5505
               // Alice->156****6606

我們定義的時(shí)候看到了還有兩個(gè)方法沒(méi)有實(shí)現(xiàn)呢，一個(gè)是 count ， 另一個(gè)是 clear ，下面我們一起來(lái)實(shí)現(xiàn)。

count：查看字典中元素的個(gè)數(shù)

該方法有時(shí)候會(huì)很有用，不過(guò)實(shí)現(xiàn)起來(lái)可能會(huì)跟你想的不太一樣，我們先看看如何實(shí)現(xiàn)的

//查看字典中元素的個(gè)數(shù)

function count(){
  var n = 0 ;
  for ( var key in this.dataStore ){
    ++n;
  }
  return n;
}

怎么樣，是不是跟想的不太一樣，為什么不用 length 屬性，不是很簡(jiǎn)單么？其實(shí)不然，我們的鍵為字符串的時(shí)候，數(shù)組的 length 屬性就不起作用了，請(qǐng)看下面的例子：

var nums = [ 0 , 1 , 2 ] ;

console.log(nums.length)    // 3

var directory = [];
directory['Jack'] = '138****5505';
directory['Alice'] = '156****6606';
directory['Tom'] = '180****8808';

console.log(directory.length)  // 0

現(xiàn)在是不是又了解了一個(gè)坑！哈哈，我們把最后一個(gè)clear方法實(shí)現(xiàn)一下。

clear：清空字典

//清空字典

function clear(){
  for( var key in this.dataStore ){
    delete this.dataStore[key];
  }
}

至此，字典的功能已基本完成了，我們利用上述的代碼繼續(xù)走下去，測(cè)試測(cè)試

console.log(directory.count());   // 2
directory.clear();
console.log(directory.count());   // 0

字典中我們通常都是用鍵來(lái)取值，所以我們無(wú)須關(guān)心s數(shù)據(jù)在字典中的實(shí)際存儲(chǔ)順序，但我們希望能看到顯示字典內(nèi)容的時(shí)候是有序的，這也很簡(jiǎn)單，我們只需稍微改造一下我們的 showAll 方法即可。

//改造后的showAll

function showAll(){
  var sortKeys = Object.keys(this.dataStore).sort();
  for( var key in sortKeys ){
    console.log( sortKeys[key] + '->' + this.dataStore[sortKeys[key]] );
  }
}

和我們之前的方法唯一的區(qū)別就是，我們拿到了鍵之后，對(duì)其進(jìn)行了一次 sort 排序，下面我們看看新方法的輸出。

// 重新打印上述字典

directory.showAll();    // Alice->156****6606
              // Jack->138****5505
              // Tom->180****8808

要注意的是，上述 showAll 方法中，進(jìn)行 Object.keys().sort()排序后，返回的是新的一個(gè)數(shù)組，類似下面的形式，

//sortKeys

["Alice", "Jack", "Tom"]

此時(shí)，數(shù)組的 key 是 0、1、2，這樣是不是就清晰很多了呢？

至此，我們已基本了解了字典的一些內(nèi)容，并且我們可以用JS自己去實(shí)現(xiàn)一個(gè)字典了，有木有很棒！接下來(lái)，大家加油~

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論