javascript实现List列表数据结构

书籍推荐

有幸拜读《数据结构与算法Javascript描述》这本书,先强烈安利一波!非常感谢作者大大给我们前端领域带来这本书。

全书从javascript的角度出发,简单明了的分析了数据结构在javascript领域的实现过程与实际的应用案例,且在每一章的结尾,都给大家留了一些书中案例相关的小作业,让大家可以实操消化,是一本实实在在可以带领大家入门数据结构与算法的神书,再次强烈推荐!!!

那么,如何使用javascript实现一个列表呢?作为一名前端开发人员,大家的第一反应肯定都是利用数组,但我们可以利用数组做些什么呢?这时候就需要大家对List这种数据结构有一定的了解了。

尝试理解List

  1. 我们可以把List看成一个对象(比如一列火车)
  2. 这个对象有自己的属性和方法(火车有车厢长度,每节车厢的位置,可以前进,可以后退,车厢排列一定是有序的,车厢是一节一节连接,可以给火车在后面添加一节车厢...)
  3. 我们如何去获取或修改对象内部的一些零件或者获取对象的一些信息?(通过属性和方法)

代码实现

javascript 复制代码
function List () {
  // 列表数据
  this.data = []
  // 列表的元素个数
  this.listSize = 0
  // 列表的当前位置
  this.pos = 0
  // 返回列表元素的个数
  this.length = function() {
    return this.listSize
  }
  // 清空列表中的所有元素
  this.clear = function() {
    this.data.length = 0
    this.listSize = this.pos = 0
  }
  // 返回列表的字符串形式
  this.toString = function() {
    return this.data
  }
  // 返回当前位置的元素
  this.getElement = function() {
    return this.data[this.pos]
  }

  /**
   * 在现有元素后插入新元素
   * @param elem 需要插入的元素
   * @param after 将elem插入到after元素的后面
   */
  this.insert = function(elem, after) {
    const insertIndex = this.findIndex(after)
    if (insertIndex === -1) {
      console.error(`未查找需要插入的元素位置`)
      return false
    }
    this.data.splice(insertIndex + 1, 0, elem)
    ++this.listSize
    return true
  }
  // 在列表的末尾添加新元素
  this.append = function(elem) {
    this.data[this.listSize++] = elem
  }
  // 从列表中删除元素
  this.remove = function(elem) {
    const index = this.findIndex(elem)
    if (index === -1) {
      console.error(`未查找到需要删除的元素,目前列表包含的具体元素为:${this.toString()}`)
      return false
    }

    this.data.splice(index, 1)
    --this.listSize
    return true
  }
  // 将列表的当前位置移动到第一个元素
  this.front = function() {
    this.pos = 0
  }
  // 将列表的当前位置移动到最后一个元素
  this.end = function() {
    this.pos = this.listSize - 1
  }
  // 将当前位置后移一位
  this.prev = function() {
    if (this.pos > 0) {
      --this.pos
      return true
    }
    console.error('列表已经不能后移了')
    return false
  }
  // 将当前位置前移一位
  this.next = function() {
    if (this.pos < this.listSize - 1) {
      ++this.pos
      return true
    }
     console.error('列表已经不能前移了')
     return false
  }
  // 返回列表的当前位置
  this.currPos = function() {
    return this.pos
  }
  // 将当前位置移动到指定位置
  this.moveTo = function(position) {
    this.pos = position
  }
  // 查找元素在列表中的位置索引
  this.findIndex = function(elem) {
    for (let i = 0; i < this.listSize; i ++) {
      if (this.data[i] === elem) return i
    }
    return -1
  }
  // 判断元素是否在列表中
  this.contains = function (elem) {
    const index = this.findIndex(elem)
    if (index > -1) {
      return true
    }
    return false
  }
}

测试一下

javascript 复制代码
const names = new List();
names.append("Clayton");
names.append("Raymond");
names.append("Cynthia");
names.append("Jennifer");
names.append("Bryan");
names.append("Danny");
names.front();
console.log(names.getElement());
names.next();
console.log(names.getElement());
names.next();
names.next();
names.prev();
console.log(names.getElement());

结果

以上就是本文的全部内容,希望大家能从文章中感受到数据结构的魅力,想要了解更多更详细的实际应用常见,请一定要去看一下 《数据结构与算法Javascript描述》这本书!

相关推荐
可乐鸡翅yeah_1 小时前
FFmpeg 生成 HLS 独立分片 independent‑segments 参数到底有什么用
javascript·ffmpeg·音视频·safari·m3u8
福兮说1 小时前
canvas 旋转图片的六个坑:四角被裁、Math.ceil 多出 1px 黑边、JPG 角发黑、翻转方向反了
前端·javascript·图像处理·canvas
Ai-_Man2 小时前
您您这可以把Grok的多个会话比如说。左侧的多个会话一次性导出吗?不是单条会话里面的多次会对话。AI导出鸭
javascript·人工智能·ai·小程序·电脑
liangshanbo12153 小时前
JavaScript 异步核心主线
javascript·事件循环·异步操作
余额瞒着我当琳4 小时前
红黑树的实现--红黑树的概念、规则、效率、结构、旋转、查找、验证
数据结构·c++·算法
程序员南飞4 小时前
win系统安装minio
java·数据结构·算法
传人once4 小时前
悬停旋转放大和位移效果如何写
javascript·css·动画
w_zero_one6 小时前
链表(4)
java·数据结构·算法
默_笙6 小时前
🍔 中间件不只是打日志:四个钩子、一次短路,和自带的工具
前端·javascript
Dovis(誓平步青云)7 小时前
家里设备越来越多,如何用一张空间地图控制灯光和温度![
android·java·前端·javascript·人工智能·电脑