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 相关文章推荐
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 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并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
puppeteer库入门初探
2019/01/09 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
python模块restful使用方法实例
2013/12/10 Python
Python字典操作简明总结
2015/04/13 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
简单的JAVA编程面试题
2013/03/19 面试题
揭牌仪式主持词
2014/03/19 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
合作协议书模板
2014/10/10 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
安全教育片观后感
2015/06/17 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
python 实现图片特效处理
2022/04/03 Python