Javascript数据结构与算法之列表详解


Posted in Javascript onMarch 12, 2015

前言:在日常生活中,人们经常要使用列表,比如我们有时候要去购物时,为了购物时东西要买全,我们可以在去之前,列下要买的东西,这就要用的列表了,或者我们小时候上学那段时间,每次考完试后,学校都会列出这次考试成绩前十名的同学的排名及成绩单,等等这些都是列表的列子。我们计算机内也在使用列表,那么列表适合使用在什么地方呢?不适合使用在什么地方呢?

适合使用在:当列表的元素不是很多的情况下,可以使用列表,因为对列表中的元素查找或者排序时,效率还算非常高,反之:如果列表元素非常多的情况下,就不适合使用列表了。

一:列表的抽象数据类型定义

为了设计列表的抽象数据类型,我们需要给出列表的定义,包括列表应该拥有哪些属性,应该在列表上执行哪些操作等。

列表是一组有序的数据。每个列表中的数据项称为元素。在javascript中,列表中的元素可以是任意数据类型。列表中可以保存多少元素并没有事先约定。但是实际使用时元素数量受到程序内存的限制。

现在我们想设计一个列表,那么我们可以想想实现一个列表,他们应该包含哪些属性和方法,当然我下面的设计都是根据 "javascript数据结构与算法" 书上的demo来设计的,为止我们可以学习下,如果以后我们编写程序时,该如何来设计我们自己的抽象类来作为一个参考,我们现在学习书上的demo最主要的是学习他们中的设计思想及编写代码的方式。他们有如下属性;

 1. listSize(属性):使用一个listSize变量来保存列表中元素的个数。
 2. pos(属性):  列表的当前位置,元素的索引。
 3. dataStore(属性): 初始化一个空数组来保存元素的个数。如果我们想取得具体的列表中的元素 可以使用上面的pos属性;如 dataStore[pos];

所有的方法;如下列表解释,不一一介绍了。

Javascript数据结构与算法之列表详解

二:如何实现列表类

根据上面定义的列表抽象数据类型,我们可以实现如下一个List类,如下通过构造函数+原型模式。

function List() {

    // 列表的元素个数

    this.listSize = 0;
    // 列表的当前位置 是第几个

    this.pos = 0;
    // 初始化一个空数组来保存列表元素

    this.dataStore = [];
}
List.prototype = {

    

    // 给列表末尾添加元素

    append: function(element) {

        var self = this;

        self.dataStore[this.listSize++] = element;

    },
    // 从列表中删除元素

    remove: function(element) {

        var self = this;

        var curIndex = self.find(element);

        if(curIndex > -1) {

            self.dataStore.splice(curIndex,1);

            --self.listSize;

            return true;

        }

        return false;

    },
    // 查找列表中的元素 返回索引

    find: function(element) {

        var self = this;

        for(var i = 0,dataLen = self.dataStore.length; i < dataLen; i++) {

            if(self.dataStore[i] == element) {

                return i;

            }

        }

        return -1;

    },

    

    // 返回列表中元素的个数

    length: function() {

        return this.listSize;

    },
    // 显示列表中的元素

    toString: function(){

        return this.dataStore;

    },
    /*

     * 在指定元素后面插入一个元素

     * @param element 当前的元素

     * @param elementAfter 把当前的元素插入到此元素后面

     */

    insert: function(element,elementAfter){

        var self = this;

        var insertPos = self.find(elementAfter);

        if(insertPos > -1) {

            self.dataStore.splice(insertPos+1,0,element);

            ++self.listSize;

            return true;

        }

        return false;

    },

    

    // 清空列表中的所有元素

    clear: function() {

        delete this.dataStore;

        this.dataStore = [];

        this.listSize = this.pos = 0;

    },

    // 判断给定的元素是否在列表中

    contains: function(element) {

        var self = this;

        for(var i = 0,ilen = self.dataStore.length; i < ilen; i++) {

            if(self.dataStore[i] == element) {

                return true;

            }

        }

        return false;

    },

    // 将列表中的当前元素移动到第一个位置

    front: function(){

        this.pos = 0;

    },

    // 将列表中当前的元素移动到最后一个位置

    end: function(){

        this.pos = this.listSize - 1;

    },

    // 将当前位置 后移一位

    prev: function(){

        if(this.pos > 0) {

            --this.pos;

        }

    },

    // 将当前位置 前移一位

    next: function(){

        if(this.pos < this.listSize - 1) {

            ++this.pos;

        }

    },

    // 返回列表的当前位置

    curPos: function(){

        return this.pos;

    },

    // 将当前位置移动到指定位置

    moveTo: function(n) {

        this.pos = n;

    },

    // 返回当前位置的元素

    getElement:function(){

        return this.dataStore[this.pos];

    }

};

如上:实现一个列表类,包含上面的如上那么多方法,当然我们也可以扩展一些其他的方法,来丰富实现列表类,最主要可以学习如上编码方式。

Javascript 相关文章推荐
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
使用JavaScript破解web
Sep 28 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
react+antd 递归实现树状目录操作
Nov 02 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 #Javascript
基于jquery实现的自动补全功能
Mar 12 #Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 #Javascript
window.open()实现post传递参数
Mar 12 #Javascript
js运动动画的八个知识点
Mar 12 #Javascript
js实现最短的XML格式化工具实例
Mar 12 #Javascript
微信中一些常用的js方法汇总
Mar 12 #Javascript
You might like
PHP分页显示制作详细讲解
2006/10/09 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
python 以16进制打印输出的方法
2018/07/09 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
python多进程重复加载的解决方式
2019/12/13 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
python3爬虫中异步协程的用法
2020/07/10 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
财务与信息服务专业推荐信
2013/11/28 职场文书
高一学生评语大全
2014/04/25 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
先进单位事迹材料
2014/12/25 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书