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 相关文章推荐
ajax中get和post的说明及使用与区别
Dec 23 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
纯JS代码实现气泡效果
May 04 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 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
基于mysql的论坛(7)
2006/10/09 PHP
一个更简单的无限级分类菜单代码
2007/01/16 PHP
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
php排序算法实例分析
2016/10/17 PHP
php和asp语法上的区别总结
2019/05/12 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
如何将python中的List转化成dictionary
2016/08/15 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
课外活动总结范文
2014/07/09 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
男生贾里读书笔记
2015/06/30 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
详解python字符串驻留技术
2021/05/21 Python