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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
微信小程序反编译的实现
Dec 10 Javascript
html实现随机点名器的示例代码
Apr 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
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
js动态切换图片的方法
2015/01/20 Javascript
js分页工具实例
2015/01/28 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python坐标线性插值应用实现
2019/11/13 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
Python如何获取文件指定行的内容
2020/05/27 Python
python要安装在哪个盘
2020/06/15 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
Python 求向量的余弦值操作
2021/03/04 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
工商治理实习生的自我评价分享
2014/02/20 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android