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学习笔记1 数据类型
Jan 11 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 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
农民和部队如何穿矿
2020/03/04 星际争霸
php 设计模式之 工厂模式
2008/12/19 PHP
php SQL之where语句生成器
2009/03/24 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
Python中按值来获取指定的键
2019/03/04 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
乡镇消防工作实施方案
2014/03/27 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
个人收入证明范本
2014/09/18 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
医生见习报告范文
2014/11/03 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
特岗教师个人总结
2015/02/10 职场文书
太行山上观后感
2015/06/05 职场文书
经营场所证明范本
2015/06/19 职场文书
工作会议简报
2015/07/20 职场文书
导游词之潮音寺
2019/09/26 职场文书