在日常生活中，人们经常使用列表：待办事项列表，购物清单，十佳榜单，最后十名榜单等。计算机也在使用列表，尤其是列表中元素保存的是太多时。当不需要一个很长的序列中查找元素，或对其进行排序时，列表显得尤为有用。反之，如果数据结构非常复杂，列表的作用就没有那么大了。
本章展示了如果创建一个简单的列表类，我们首先给列表给出抽象的数据类型定义，然后描述如何实现抽象数据类型（ADT），最后，分析几个列表适合解决的实际问题。
一，列表的抽象数据类型定义
为了设计列表的抽象数据类型，需要给出列表的定义，包括列表应该有哪些属性，应该在列表上执行哪些操作。
列表是一组有序的数据，每个列表中的数据项称为元素。在javascript中，列表中的元素可以是任意数据类型。列表中可以保存多少元素并没有限定（在实际使用时会受到程序内存的限制）。
不包含任何元素的列表称为空列表。列表中包含元素的个数称为列表的length。在内部的实现上，用一个变量的listSize保存列表中元素的个数。可以在列表的末尾append一个元素，也可以给列表起始位置insert一个元素。使用remove方法从列表中删除元素，使用clear方法清空列表中的所有的元素。
还可以使用toString()方法显示列表中所有的元素，使用getElement()方法显示当前元素。 列表中拥有描述元素位置的属性。列表有前有后（front和end）,使用next()方法可以从当前元素移动到下一个元素，使用prev()方法可以移动当前元素到上一个元素。还可以使用moveTo(n)方法直接移动到指定的位置。currPos属性表示列表中当前的位置。
列表的抽象数据类型并未指明列表的存储结构，在本章的实现中，我们使用一个dataStore来存储元素。
列表的抽象数据定义。
| listSize(属性) | 列表中元素的个数 |
| pos（属性） | 列表的当前位置 |
| length（属性） | 返回列表中元素的个数 |
| clear（方法） | 清空列表中所有的元素 |
| toString(方法) | 返回列表中的字符串形式 |
| getElement（方法） | 返回当前位置的元素 |
| insert（方法 ） | 在现有元素后插入新元素 |
| append(方法) | 在列表末尾增加新元素 |
| remove（方法） | 从列表中删除元素 |
| front(方法) | 将列表中的当前元素设置到第一个元素 |
| end（方法） | 将列表中的当前元素位置移动到最后一个 |
| prev（方法） | 将当前位置后移一位 |
| next（方法） | 将当前位置前移一位 |
| currPos（方法） | 返回列表的当前位置 |
| moveTo（方法） | 将当前位置移动到指定位置 |
二，实现列表类
根据上面定义的列表抽象数据类型，可以直接实现一个List类，让我们从定义构造函数开始，虽然它本身并不是列表抽象数据类型的一部分。
function List() { this.listSize = 0; this.pos = 0; this.dataStore = [];//创建一个空数组保存列表的元素 this.clear = clear; this.find = find; this.toString = toString; this.insert = insert; this.append = append; this.remove = remove; this.front = front; this.end = end; this.prev = prev; this.next = next; this.length = length; this.currPos = currPos; this.moveTo = moveTo; this.getElement = getElement; this.contains = contains; }
1.append: 给列表添加元素
我们实现的第一个方法是append()，该方法给列表的下一个位置添加一个新的元素，这个位置刚好等于变量listSize的值。
function append(element) { this.dataStore[this.listSize++] = element; }
当新元素就位后，变量的listSize就增加1
2.remove：从列表中删除元素
接下来我们看一下如何从列表中删除一个元素。remove()方法是List类中较难实现的一个方法。首先，要在列表中找到该元素，然后删除它。并且调整底层数组对象以填补删除元素后留下的空白。好消息是可以使用splice()方法来简化这一过程，我们先从一个辅助方法find()开始，该方法用于查找要删除的元素。
3.find在列表中查找某一元素
find()方法通过数组对象dataStore进行迭代，查找给定的元素。如果找到，就返回该元素的位置。如果找不到，返回-1.这是在数组中找不到元素时返回的标准值。我们可以在remove()方法中利用此值做错误校验。
remove方法使用find()方法返回的位置对数组dataStore进行截取。数组改变后，将变量listSize的值减1。以反映列表的最新长度。如果元素删除成功，则返回true,否则返回false.
function remove(element) { var foundAt = this.find(element); if (foundAt > -1) { this.dataStore.splice(foundAt,1); --this.listSize; return true; } return false; }
4.length列表中有多少个元素
length()返回列表中元素的个数。
function length() { return this.listSize; }
5.toStirng：显示列表中的元素
现在可以创建一个方法，用来显示列表中元素。下面是一段简短的代码，实现了toString()方法。
function toString() { return this.dataStore; }
严格的来说，此方法返回的是一个数组，而不是一个字符串，但它的目的是为了显示当前的一个状态，因此返回一个数组就足够了。
我们暂时测试下目前实现的代码，检验我们之前创建的方法。
var names = new List(); names.append('锤锤'); names.append('牛牛'); names.append('豆豆'); console.log(names.dataStore);//["锤锤", "牛牛", "豆豆"] names.remove('牛牛'); console.log(names.dataStore);//["锤锤", "豆豆"]
6.insert: 向列表中插入一个元素
接下来我们要讨论的方法是insert()。如果在前面的列表中删除“牛牛”，现在又想将它放回原来的位置，该怎么办？insert()方法需要知道元素插入到什么位置（因此，现在的实现方法是假设插入到列表中某个元素之后，知道足额写后，就可以定义insert()方法啦）。
function insert(element, after) { var insertPos = this.find(after); if (insertPos > -1) { this.dataStore.splice(insertPos + 1, 0 ,element); ++this.listSize; return true } return false; }
实现的过程中，insert()方法使用到find()方法，find()方法会找到传入的after参数在列表中的位置，找到该位置后，使用splice()得到将元素插入该位置后，然后将变量listSize加1并返回true.表明插入成功。
7.clear：清空列表中的所有元素。
接下来，我们需要一个方法清空列表中所有元素，为插入新元素腾出空间。
function clear() { delete this.dataStore; this.dataStore = []; this.listSize = this.pos = 0; }
clear()方法使用delete操作符删除数组dataStore,接着创建新的空数组。最后一行将listSize和pos值设为0，表明是一个空的新列表。
8.判定给定值是否在列表中
当需要判断一个给定值是否在列表中时，contains()方法就变得很有用。下面是该方法定义：
function contains(element) { for (var i = 0; i < this.dataStore.length; ++i) { if (this.dataStore[i] == element) { return true; } } return false; }
9.遍历列表
最后的一组方法允许用户在列表上自由移动，最后一个方法getElement()返回列表当前的元素
function front() { this.pos = 0; } function end() { this.pos = this.listSize - 1; } function prev() { if (this.pos > 0) { --this.pos; } } function next() { if (this.pos < this.listSize - 1) { ++this.pos; } } function currPos() { return this.pos; } function moveTo(position) { this.pos = position; } function getElement() { return this.dataStore[this.pos] }
现在我们创建一个由姓名组成的列表，来展示怎么使用它。
var names = new List(); names.append('锤锤'); names.append('牛牛'); names.append('豆豆'); names.append('羊羊'); names.append('兔兔'); names.append('花花');
现在移动到列表中的第一个元素，并且显示它。
names.front(); console.log(names.getElement());//显示 “锤锤”
接下来向前移动一个单位并显示它：
names.next(); console.log(names.getElement()); //显示 “牛牛”
上面的代码展示这些行为实际上是迭代器的概念，这也是接下来要讨论的内容。
3.使用迭代器访问列表
使用迭代器，可以不必关系数据的内部存储方式。以实现对列表的遍历。前面提到的方法fornt()，end(),prev(),next()和currPos就实现了List类的一个迭代器。以下是和使用数组索引的方式相比，使用迭代器的一些优点。
- 访问列表元素时不必关心底层的数据存储结构
- 当为列表添加一个元素时，索引的值就不对了，此时只用更新列表，而不用更新迭代器。
- 可以用不同类型的数据存储方式实现List类，迭代器为访问列表里的元素提供了统一的方式。
了解了这些优点后，我使用一个迭代器遍历列表的例子：
for(names.front(); names.currPos() < names.length(); names.next()) { console.log(names.getElement()) }
在for循环的一开始，将列表中的当前位置设置为第一个元素。只要currPos的值小于列表的长度，就一直循环，每一次循环都调用next()方法将当前的位置向前移动一位。
同理，还可以从后向前遍历列表，代码如下：
for (names.front(); names.currPos() >= 0; names.prev()) { console.log(names.getElement()) }
循环从列表的最后一个元素开始，当 当前位置大于或等于0时，调用prev()方法后移一位。
迭代器只是用来在列表上随意移动，而不应该和人和为列表增加或删除元素的方法一起使用。
四，一个基于列表的应用。
1.读取文本
为了展示如何使用列表，我们实现一个类似Redbox的租赁自助查询系统。
var _movies = "(1)RogueTrader(《魔鬼营业员》)NNN(2)TradingPlaces(《颠倒乾坤》)NNN(3)WallStreet(《华尔街》)NNN(4)WallStreet2:MoneyNeverSleeps(《华尔街2：金钱永不眠》)NNN(5)BoilerRoom(《开水房》)NNN(6)GlengarryGlen Ross(《拜金一族》)NNN(7)Enron:TheSmartestGuysInTheRoom(《安然风暴:屋内聪明人》)NNN(8)Trader(《交易员》)NNN(9)AmericanPsycho(《美国精神病人》)NNN(10)BonfireoftheVanities(《虚荣的篝火》)"; var movies = _movies.split("NNN");
上面的split()程序将字符串分割为数组，多一个空格，虽然多一个空格无伤大雅，但是在比较字符串时是个灾难，因此，我们需要在循环里使用trim()方法删除每个数组元素末尾的空格。要是有一个函数能将这些操作封装起来就再好不过了。
function createArr(file){ var arr = file.split("NNN"); for (var i = 0; i < arr.length; ++i) { arr[i] = arr[i].trim(); } return arr; }
2.使用列表管理影碟租赁
下面要将数组保存到一个列表，代码如下：
var movieList = new List(); for (var i = 0; i < movies.length; ++i) { movieList.append(movies[i]) }
现在可以写一个函数来显示影碟清单了：
function displayList(list) { for (list.front(); list.currPos() < list.length(); list.next()) { console.log(list.getElement()) } }
displayList()函数对于原生的数据类型没有什么问题，比如由字符串组成的列表。但是它用不了自定义类型。比如我们将下面定义的Customer对象。让我对它稍微做修改，让它可以发现列表是由Customer对象组成的。这样就可以对应的进行显示了。下面是重新定义的displayList()函数：
function displayList(list) { for (list.front(); list.currPos() < list.length(); list.next()) { if (list.getElement() instanceof Customer) { console.log(list.getElement()['name'] + ", " + list.getElement()["movie"] ); } else { console.log(list.getElement()) } } }
对于列表中的每一个元素，都使用instanceof操作符判断元素是否是Customer对象。如果是，就使用name和movie做索引。得到客户检出的值。如果不是，就返回该元素即可。
现在已经有了movies,还需要创建一个新的列表，Customers,用来保存在系统中检出电影的客户：
var customers = new List();
该列表包含Customer对象，该对象由用户的姓名和用户检出电影组成。下面是Costomer对象的构造函数。
function Customer(name, movie) { this.name = name; this.movie = movie; }
接下来，需要创建一个允许用户检出的电影函数。该函数有两个参数：客户端姓名和客户想要检出的电影。如果改电影目前可以租赁，该方法会从清单里删除该元素，同时加入客户列表customers.这个操作会用到列表的contains()方法。
下面是用于检出电影的函数：
function checkout(name, movie, filmList, customerList) { if (movieList.contains(movie)) { var c = new Customer(name, movie); customerList.append(c); filmList.remove(movie) } else { console.log(movie + "is not available") } }
下面使用简单的代码测试checkout函数
var movies = createArr(_movies); var movieList = new List(); var customers = new List(); for (var i = 0; i < movies.length; ++i) { movieList.append(movies[i]) } //显示xx displayList(movieList) checkout("RogueTrader","交易员",movieList,customers); //xx displayList(customers)
对于列表的方法，就更新至此，可以根据自己的需要，增加更健壮的方法去实现。
符:测试代码
function List() { this.listSize = 0; this.pos = 0; this.dataStore = [];//创建一个空数组保存列表的元素 this.clear = clear; this.find = find; this.toString = toString; this.insert = insert; this.append = append; this.remove = remove; this.front = front; this.end = end; this.prev = prev; this.next = next; this.length = length; this.currPos = currPos; this.moveTo = moveTo; this.getElement = getElement; this.contains = contains; } //给列表添加元素 function append(element) { this.dataStore[this.listSize++] = element; } //find查找方法 function find(element) { for (var i = 0;i < this.dataStore.length; ++i) { if (this.dataStore[i] == element) { return i; } } return -1; } //remove方法 function remove(element) { var foundAt = this.find(element); if (foundAt > -1) { this.dataStore.splice(foundAt,1); --this.listSize; return true; } return false; } //length function length() { return this.listSize; } //toString function toString() { return this.dataStore; } //insert function insert(element, after) { var insertPos = this.find(after); if (insertPos > -1) { this.dataStore.splice(insertPos + 1, 0 ,element); ++this.listSize; return true } return false; } //clear function clear() { delete this.dataStore; this.dataStore = []; this.listSize = this.pos = 0; } //contains判断给定值是否在列表中 function contains(element) { for (var i = 0; i < this.dataStore.length; ++i) { if (this.dataStore[i] == element) { return true; } } return false; } function front() { this.pos = 0; } function end() { this.pos = this.listSize - 1; } function prev() { if (this.pos > 0) { --this.pos; } } function next() { if (this.pos < this.listSize - 1) { ++this.pos; } } function currPos() { return this.pos; } function moveTo(position) { this.pos = position; } function getElement() { return this.dataStore[this.pos] } //var names = new List(); //names.append('锤锤'); //names.append('牛牛'); //names.append('豆豆'); //names.append('羊羊'); //names.append('兔兔'); //names.append('花花'); //console.log(names.dataStore); //names.front(); //console.log(names.getElement());//显示 “锤锤” //names.next(); //console.log(names.getElement()); //显示 “豆豆” // for(names.front(); names.currPos() < names.length(); names.next()) { // console.log(names.getElement()) // } var _movies = "(1)RogueTrader(《魔鬼营业员》) NNN(2)TradingPlaces(《颠倒乾坤》)NNN(3)WallStreet(《华尔街》)NNN(4)WallStreet2:MoneyNeverSleeps(《华尔街2：金钱永不眠》)NNN(5)BoilerRoom(《开水房》)NNN(6)GlengarryGlen Ross(《拜金一族》)NNN(7)Enron:TheSmartestGuysInTheRoom(《安然风暴:屋内聪明人》)NNN(8)Trader(《交易员》)NNN(9)AmericanPsycho(《美国精神病人》)NNN(10)BonfireoftheVanities(《虚荣的篝火》) "; function createArr(file){ var arr = file.split("NNN"); for (var i = 0; i < arr.length; ++i) { arr[i] = arr[i].trim(); } return arr; } var movies = createArr(_movies) //将数组保存到一个列表 var movieList = new List(); for (var i = 0; i < movies.length; ++i) { movieList.append(movies[i]) } //console.log(movieList) var customers = new List(); //显示影碟清单 function displayList(list) { for (list.front(); list.currPos() < list.length(); list.next()) { if (list.getElement() instanceof Customer) { console.log(list.getElement()['name'] + ", " + list.getElement()["movie"] ); } else { console.log(list.getElement()) } } } //displayList(movieList.dataStore) function Customer(name, movie) { this.name = name; this.movie = movie; } //检出电影的函数 function checkout(name, movie, filmList, customerList) { if (movieList.contains(movie)) { var c = new Customer(name, movie); customerList.append(c); filmList.remove(movie) } else { console.log(movie + "is not available") } } displayList(movieList)
（本章完结）
上一章：第二章：javascript： 数组 下一章：第四章：javascript： 栈
| 一：javascript基础系列(已完结) | 二：javascript基础系列之DOM（已完结） | 三：jQuery系列文章（已完结） |
| 四：AJAX | 五：JavaScript权威指南（核心篇，已完结） | 六：JavaScript框架设计（已完结） |
| 七：数据结构与算法javascript描述 |
