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 相关文章推荐
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
js模块加载方式浅析
Aug 12 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
js中apply和call的理解与使用方法
Nov 27 Javascript
JavaScript实现省份城市的三级联动
Feb 11 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
PHP中防止SQL注入实现代码
2011/02/19 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
javascript常用对话框小集
2013/09/13 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
详解微信UnionID作用
2019/05/15 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
小学班干部竞选演讲稿
2014/04/24 职场文书
治超工作实施方案
2014/05/04 职场文书
课外科技活动总结
2014/08/27 职场文书
答辩状格式范本
2015/05/22 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python