數據結構列表的JS實現

jsdt 發布于2019-08-23 13:07 / 1463人閱讀

摘要：列表時一組有序的數據結構，每個列表中的數據項稱為元素。訪問元素列表不用關系底層的數據存儲結構向列表添加元素時，索引值會改變，而迭代器的訪問方式不會改變為訪問列表里的元素提供了統一的方式使用迭代器訪問

列表時一組有序的數據結構，每個列表中的數據項稱為元素。不包含任何元素的列表為空列表，可以在列表的末尾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
}

GPU云服務器云服務器 js怎樣得到列表的數據類型 js實現數據的拖拽 map的數據結構js實現 js實現數據的懶加載圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99224.html

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