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中的Split使用方法与技巧
Mar 09 Javascript
Javascript 自定义类型方法小结
Mar 02 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
js实现查询商品案例
Jul 22 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
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数组中的重复值的实现代码
2011/07/17 PHP
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
python创建线程示例
2014/05/06 Python
python字符串连接方式汇总
2014/08/21 Python
跟老齐学Python之编写类之二方法
2014/10/11 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
python如何读取bin文件并下发串口
2019/07/05 Python
python如何获取apk的packagename和activity
2020/01/10 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
python空元组在all中返回结果详解
2020/12/15 Python
异步传递消息系统的作用
2016/05/01 面试题
后勤自我鉴定
2013/10/13 职场文书
最新教师自我评价分享
2013/11/12 职场文书
党风廉政建设责任书
2014/04/14 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
大学开学计划书
2014/04/30 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
先进班集体事迹材料
2014/12/25 职场文书
辞职申请书范本
2019/05/20 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android
Hive常用日期格式转换语法
2022/06/25 数据库