JavaScript数据结构之列表类List

一、前提概要

　　在平时的JavaScript程序开发中，经常会使用到列表数据的展示。例如：热度榜单、头条列表、成绩榜单、待办事项等等，以上数据都有一些共同的特点，数据结构简单、数据量不大。那么，基于以上特点，自定义一个列表类，只需要封装一些查询、定位等方法就可以帮助我们去处理这些数据了。当然，一旦，数据结构非常复杂、数据量比较大的时候，列表类的作用就没有那么大了。

二、数据抽象

　　1.属性定义：

　　2.方法定义：

　　以上的数据结构是根据实际需求来定义，不同的使用环境可以进行相应的修改。

三、代码实现

  1 //列表类
  2 var List = function () {
  3     //数据源
  4     this.dataSource = [];
  5     //数据长度
  6     this.size = 0;
  7     //当前位置
  8     this.position = 0;
  9 };
 10
 11 List.prototype.constructor = List;
 12
 13 List.prototype = {
 14     //添加元素
 15     append: function (element) {
 16         this.dataSource[this.size++] = element;
 17     },
 18     //插入元素
 19     insert: function (position, element) {
 20         if (position > -1) {
 21             this.dataSource.splice(position + 1, 0, element);
 22             this.size++;
 23             return true;
 24         }
 25         return false;
 26     },
 27     //移除元素
 28     remove: function (position) {
 29         this.dataSource.splice(position, 1);
 30     },
 31     //清除数据源
 32     clear: function () {
 33         delete this.dataSource;
 34         this.dataSource.length = 0;
 35         this.size = 0;
 36         this.position = 0;
 37     },
 38     //查询数据
 39     find: function (element) {
 40         for (var i = 0; i < this.dataSource.length; i++) {
 41             if (this.dataSource[i] == element) {
 42                 return i;
 43             }
 44         }
 45         return -1;
 46     },
 47     //获取数据
 48     get: function () {
 49         return this.dataSource[this.position];
 50     },
 51     //获取第一条数据
 52     first: function () {
 53         return this.dataSource[0];
 54     },
 55     //获取最后一条数据
 56     last: function () {
 57         return this.dataSource[this.size - 1];
 58     },
 59     //移至前一个位置
 60     prev: function () {
 61         this.position--;
 62     },
 63     //移至后一个位置
 64     next: function () {
 65         this.position++;
 66     },
 67     //移至开始位置
 68     front: function () {
 69         this.position = 0;
 70     },
 71     //移至结束位置
 72     end: function () {
 73         this.position = this.size - 1;
 74     },
 75     //是否有前一个元素
 76     hasPrev: function () {
 77         return this.position > 0;
 78     },
 79     //是否有后一个元素
 80     hasNext: function () {
 81         return this.position < this.size - 1;
 82     },
 83     //移至指定位置
 84     moveTo: function (position) {
 85         this.position = position;
 86     },
 87     //数据源长度
 88     length: function () {
 89         return this.size;
 90     },
 91     //是否包含指定元素
 92     contains: function (element) {
 93         for (var i = 0; i < this.dataSource.length; i++) {
 94             if (this.dataSource[i] == element) {
 95                 return true;
 96             }
 97         }
 98         return false;
 99     },
100     toString: function () {
101         return this.dataSource;
102     }
103 };

四、实例演示

 1 var list = new List();
 2 list.append("张三");
 3 list.append("李四");
 4 list.append("王五");
 5 list.append("赵六");
 6 console.log("list dataSource、size、position:", list.dataSource, list.size, list.position);
 7 //打印：list dataSource、size、position: ["张三", "李四", "王五", "赵六"] 4 0
 8
 9 console.log("list get():", list.get());
10 //打印：list get(): 张三
11
12 list.next();
13 console.log("list prev():", list.get());
14 //打印：list prev(): 李四
15
16 list.moveTo(3);
17 console.log("list moveTo():", list.get());
18 //打印：list moveTo(): 赵六
19
20 var position = list.find("王五");
21 console.log("list find():", position);
22 //打印：list find(): 2
23
24 var result = list.contains("曹七");
25 console.log("list contains():", result);
26 //打印：list contains(): false