数据结构列表的JS实现

jsdt 发布于2019-08-23 13:07 / 1241人阅读

摘要：列表时一组有序的数据结构，每个列表中的数据项称为元素。访问元素列表不用关系底层的数据存储结构向列表添加元素时，索引值会改变，而迭代器的访问方式不会改变为访问列表里的元素提供了统一的方式使用迭代器访问

列表时一组有序的数据结构，每个列表中的数据项称为元素。不包含任何元素的列表为空列表，可以在列表的末尾append一个元素，也可以在列表中指定位置insert一个元素，关于列表的抽象数据类型的定义如下：

属性或方法	描述
listSize(属性）	列表的元素个数
pos(属性）	列表中的当前位置
length(方法)	返回列表中元素的个数
clear(方法)	清空列表中的所有元素
toString(方法)	返回列表中字符串形式
getElement(方法)	返回当前位置的元素
insert(方法)	在列表指定位置后插入新元素
append(方法)	在列表末尾插入新元素
remove(方法)	删除列表中的元素
contains(方法)	判断列表中是否存在给定值
front(方法)	将列表中当前位置移动到第一个
end(方法)	将列表中当前位置移动到最后一个
prev(方法)	将当前位置前移一位
next(方法)	将当前位置后移一位
hasNext(方法)	判断是否有后一位
hasPrev(方法)	判断是否有前一位
currPos(方法)	返回列表的当前位置
moveTo(方法)	移动当前位置至指定位置

下面直接用代码实现已列表类

// 为了简便，直接将方法放入对象中。最好时将方法放在prototype对象中。
function List() {
    this.listSize = 0;
    this.pos = 0;
    this.dataStore = [];
    this.clear = clear;
    this.toString = toString;
}

List.prototype.append = function(ele) {
    this.dataStore[this.listSize++] = ele;  //添加一个元素并将listSize加一
}

List.prototype.remove = function(ele) {
    var pos = this.find(ele);
    if(pos > -1) {
        this.dataStore.splice(pos,1);
        this.listSize--;
        return true;
    }
    return false;
}

List.prototype.find = function(ele) {
    for(var i = 0; i < this.dataStore.length; i++) {
        if(this.dataScore[i] === ele) {
            return i;
        }
    }
    return -1;
}

List.prototype.length = function() {
    return this.listSize;
}

List.prototype.toString = function() {
    return this.dataStore;
}

List.prototype.insert = function(ele,afterEle) {
    var insertPos = this.find(afterEle);
    if(insertPos !== -1) {
        this.dataStore.splice(insertPos+1,0,ele);
        this.listSize++;
        return true;
    }
    return false;
}

List.prototype.clear = function() {
    this.dataStore.length = 0;
    this.listSize = this.pos = 0;
}

List.prototype.contains = function(ele) {
    for(var i = 0; i < this.dataStore.length; i++) {
        if(this.dataScore[i] === ele) {
            return true;
        }
    }
    return false;
}

List.prototype.front = function() {
    this.pos = 0;
}

List.prototype.end = function() {
    this.pos = this.listSize - 1;
}

List.prototype.prev = function() {
    if(!this.pos) {
      this.pos--;  
    } 
}

List.prototype.next = function() {
    if(this.pos < this.listSize) {
      this.pos++;  
    } 
}

List.prototype.currPos = function() {
    return this.pos;
}

List.prototype.moveTo = function(pos) {
    return this.pos = pos;
}

List.prototype.getElement = function() {
    return this.dataStore[this.pos];
}

List.prototype.hasNext = function() {
    return this.pos=0;
}

这样列表的js现实就完成了。其中front(),end(),prev(),next()方法就实现了List类的一个迭代器。使用迭代器访问和数组索引相比，有以下的一些优点。

访问元素列表不用关系底层的数据存储结构

向列表添加元素时，索引值会改变，而迭代器的访问方式不会改变

为访问列表里的元素提供了统一的方式

// 使用迭代器访问
var test = new List()
test.append("Jack");
test.append("Rose")
for(test.front(); test.hasNext(); test.next()) {
    console.log(test.getElement())   // Jack   //Rose
}

专线服务混合云 js怎样得到列表的数据类型 js实现数据的拖拽 map的数据结构js实现 js实现数据的懒加载图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99224.html

使用原生js+css3实现下拉刷新效果

摘要：原生里的数据列表都会使用下拉刷新的效果，在里可以采用等插件或框架实现，那么如何自己编码实现类似的效果呢，下面介绍使用原生实现的简单效果。原生app里的数据列表都会使用下拉刷新的效果，在webapp里可以采用iscroll、swiper等插件或框架实现，那么如何自己编码实现类似的效果呢，下面介绍使用原生js+css3实现的简单效果。 html布局 test ...

王军 2019-08-02 18:28 评论0 收藏0
JS+HTML实现列表动态无限滚动

摘要：实现列表动态无限滚动问题在开发页面工程中，经常会遇到滚动列表当实际需要显示的内容宽度或高度超过容器的宽度或高度时，设置当滚动列表中的内容比较少时，我们可以一次性加载所有的内容到列表容器中显示。 JS+HTML实现列表动态无限滚动问题在HTML开发页面工程中，经常会遇到滚动列表-当实际需要显示的内容宽度或高度超过容器的宽度或高度时，设置CSS overflow-x:auto;...

Lorry_Lu 2019-08-20 15:11 评论0 收藏0
JS+HTML实现列表动态无限滚动

摘要：实现列表动态无限滚动问题在开发页面工程中，经常会遇到滚动列表当实际需要显示的内容宽度或高度超过容器的宽度或高度时，设置当滚动列表中的内容比较少时，我们可以一次性加载所有的内容到列表容器中显示。 JS+HTML实现列表动态无限滚动问题在HTML开发页面工程中，经常会遇到滚动列表-当实际需要显示的内容宽度或高度超过容器的宽度或高度时，设置CSS overflow-x:auto;...

BakerJ 2019-08-01 16:31 评论0 收藏0
vue2 + vuex 高度还原饿了么 App，与官方后台真实数据交互，获取商品信息，实现登陆、购

摘要：注此项目纯属个人瞎搞，正常下单请选择饿了么官方客户端。目前下单功能已经实现，下单功能完全采用官网真实数据，可以控制官网发短信或者打电话到指定的手机号码，下单后可以在手机中查看并且付款。前言 vue2的发布后自己也研究了一段时间，奈何公司的技术栈是以react为主，没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo，但和写一个完整的项目还是有很大差别的。于是自己想着用空余...

JeOam 2019-08-20 14:26 评论0 收藏0
vue2 + vuex 高度还原饿了么 App，与官方后台真实数据交互，获取商品信息，实现登陆、购

摘要：注此项目纯属个人瞎搞，正常下单请选择饿了么官方客户端。目前下单功能已经实现，下单功能完全采用官网真实数据，可以控制官网发短信或者打电话到指定的手机号码，下单后可以在手机中查看并且付款。前言 vue2的发布后自己也研究了一段时间，奈何公司的技术栈是以react为主，没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo，但和写一个完整的项目还是有很大差别的。于是自己想着用空余...

xzavier 2019-08-05 10:47 评论0 收藏0