【数据结构】JavaScript列表实现

已于 2022-07-06 11:03:24 修改
阅读量1.7k 收藏 3
点赞数
分类专栏： # 数据结构&&算法 文章标签： javascript 数据结构 链表 线性表
于 2022-01-27 20:37:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuxingyuzaixian/article/details/122723307
版权

List，即线性表，也叫做列表。有以下存储结构：

  1. 顺序存储方式：数组
  2. 链式存储方式：单向链表、双向链表、单向循环链表、双向循环链表

在JavaScript数据结构中，一直缺少List这种常用的数据结构。这里通过对比其他语言的数据结构，比如java的ArrayList、LinkedList等源码，通过顺序存储方式、链式存储方式实现List这一功能。

一、数组方式

1.1、数据结构优缺点

定义：数组（Array）是有序的元素序列

优点：读取效率极高

缺点：插入、删除效率极低(需要移动该节点后续所有数据)

1.2、功能实现

参照java sdk的ArrayList源码，简单实现JavaScript版的ArrayList数据结构。

通过对ArrayList源码查看，我们发现其本质也是数组的存储结构

image-20220127202646857

对于add方法的实现，则是在数组末尾追加

image-20220127202810611

按照jdk的思路，我们初步定义ArrayList数据结构如下

class ArrayList {
  constructor() {
    this.list = [];
  }

  // 大小
  size() {
    return this.list.length;
  }

  // 新增元素
  add(object) {
    this.list[this.list.length] = object;
  }

  // 移除指定元素
  remove(object) {
    let removeIndex = this.list.indexOf(object);
    if (removeIndex !== -1) {
      this.list.splice(removeIndex, 1);
    }
  }

  // 按下标移除元素
  removeAtIndex(index) {
    if (this.list.length > index) {
      this.list.splice(index, 1);
    }
  }

  // 清空
  clear() {
    this.list = [];
  }

  // 查找
  get(index) {
    if (this.list.length > index) {
      return this.list[index];
    } else {
      return null;
    }
  }
}

1.3、验证

简单测试，符合逾期无bug

image-20220127203128891

二、单向链表方式

2.1、数据结构优缺点

定义：a1是a2的前驱，ai+1 是ai的后继，a1没有前驱，an没有后继

n为线性表的长度 ，若n==0时，线性表为空表

优点：增加、删除效率极高

缺点：读取效率低，特别是逆向读取效率极低

2.2、功能实现

在js、java中我们以对象代替指针，首先我们需要定义节点数据模型

class Node {
  constructor(item, next) {
    this.item = item;
    this.next = null;
  }
}

然后提供OneWayList为单向链表的数据结构，提供增删查改等功能

// 单向链表
class OneWayList {
  constructor() {
    this.headNode = new Node(null, null);//头指针
    this.size = 0;//链表长度
  }

  // 在链表末尾追加
  add(object) {
    let node = this.headNode;
    for (let i = 0; i < this.size; i++) {
      node = node.next;
    }
    let newNode = new Node(object, null);
    node.next = newNode;
    this.size = this.size + 1;
  }

  // 修改
  set(index, object) {
    let node = this.headNode;
    node = node.next;
    if (index < this.size && index > -1) {
      for (let i = 0; i < index; i++) {
        node = node.next;
      }
      node.item = object;
    }
  }

  // 移除指定index的数据、或移除最后一个数据
  remove(index = this.size - 1) {
    let node = this.headNode;
    if (index < this.size && index > -1) {
      for (let i = 0; i < index; i++) {
        node = node.next;
      }
      //断开中间数据
      node.next = node.next?.next;
      this.size = this.size - 1;
    }
  }

  // 链表长度
  size() {
    return this.size;
  }

  // 清空单向链表
  clear() {
    this.headNode = new Node(null, null);
    this.size = 0;
  }

  // 列表转字符串
  toArray() {
    let arrayList = [];
    let node = this.headNode;
    for (let i = 0; i < this.size; i++) {
      node = node.next;
      arrayList[arrayList.length] = node.item;
    }
    return arrayList;
  }
}

2.3、验证

对上述数据结构做简单的测试，符合预期

const temp = new OneWayList();
temp.add('第一个');
temp.add('第二个');
temp.add('第三个');
temp.add('第四个');
temp.set(1, '修改第二个');
temp.remove(2)
console.log(temp.toArray())
//[ '第一个', '修改第二个', '第四个' ]

三、双向链表方式

3.1、数据结构优缺点

定义：双向链表也叫双链表，是链表的一种，它的每个数据结点中都有两个指针，分别指向直接后继和直接前驱。所以，从双向链表中的任意一个结点开始，都可以很方便地访问它的前驱结点和后继结点。不过一般我们都构造双向循环链表

优点：增加、删除效率较高

缺点：读取效率较低

3.2、功能实现

这里需要注意的是对链表的处理，需要同时处理前驱指针与后继指针，稍微麻烦点

由于是双向非循环链表，

1，当size为0时，头指针的前驱与后继皆为空；

2，当size非0时，头指针的前驱为空，后继非空。最后一个指针的前驱非空，后继为空

class Node {
  constructor(item, next, prev) {
    this.item = item;
    this.next = next;
    this.prev = prev;
  }
}

// 单向链表
class LinkedList {
  constructor() {
    this.headNode = new Node(null, null, null);//头指针
    this.size = 0;//链表长度
  }

  // 在链表末尾追加
  add(object) {
    let node = this.headNode;
    for (let i = 0; i < this.size; i++) {
      node = node.next;
    }
    // 添加前驱指针
    let newNode = new Node(object, null, node);
    // 添加后继指针
    node.next = newNode;
    this.size = this.size + 1;
  }

  // 修改
  set(index, object) {
    let node = this.headNode;
    node = node.next;
    if (index < this.size && index > -1) {
      for (let i = 0; i < index; i++) {
        node = node.next;
      }
      node.item = object;
    }
  }

  // 移除指定index的数据、或移除最后一个数据
  remove(index = this.size - 1) {
    let node = this.headNode;
    if (index < this.size && index > -1) {
      for (let i = 0; i < index + 1; i++) {
        node = node.next;
      }
      //断开前驱指针
      if (node.prev != null) {
        node.prev.next = node.next;
      }

      //断开后继指针
      if (node.next != null) {
        node.next.prev = node.prev;
      }

      this.size = this.size - 1;
    }
  }

  // 链表长度
  size() {
    return this.size;
  }

  // 清空单向链表
  clear() {
    this.headNode = new Node(null, null, null);
    this.size = 0;
  }

  // 列表转字符串
  toArray() {
    let arrayList = [];
    let node = this.headNode;
    for (let i = 0; i < this.size; i++) {
      node = node.next;
      arrayList[arrayList.length] = node.item;
    }
    return arrayList;
  }
}

3.3、验证

简单的验证

const temp = new LinkedList();
temp.add('第一个');
temp.add('第二个');
temp.add('第三个');
temp.add('第四个');
temp.set(1, '修改第二个');
temp.remove(3)
console.log(temp.toArray())
// [ '第一个', '修改第二个', '第三个' ]

四、双向循环链表方式

4.1、数据结构优缺点

双向循环链表是单向循环链表的每个结点中，再设置一个指向其前驱结点的指针域

对于空的双向循环链表，则是收尾相连

优点：增加、删除效率较高

缺点：读取效率低

4.2、功能实现

由于是双向循环链表，

1，当size为0时，头指针的前驱与后继皆为本身；

2，当size非0时，头指针的前驱为最后一个元素，最后一个元素后继为头指针

3，另外在循环查找元素时候，可根据查找路径灵活使用prev与next指针

class Node {
  constructor(item, next, prev) {
    this.item = item;
    this.next = next;
    this.prev = prev;
  }
}

// 双向循环链表
class LinkedList {
  constructor() {
    this.headNode = new Node(null, null, null);//头指针
    this.headNode.next=this.headNode;
    this.headNode.prev=this.headNode;
    this.size = 0;//链表长度
  }

  // 在链表末尾追加
  add(object) {
    let node = this.headNode;
    for (let i = 0; i < this.size; i++) {
      node = node.next;
    }
    // 添加新节点的前驱指针、后继指针为头指针
    let newNode = new Node(object, this.headNode, node);
    // 添加后继指针
    node.next = newNode;
    // 头指针的前驱为新节点
    this.headNode.prev=newNode;
    this.size = this.size + 1;
  }

  // 修改
  set(index, object) {
    let node = this.headNode;
    node = node.next;
    if (index < this.size && index > -1) {
      for (let i = 0; i < index; i++) {
        node = node.next;
      }
      node.item = object;
    }
  }

  // 移除指定index的数据、或移除最后一个数据
  remove(index = this.size - 1) {
    let node = this.headNode;
    if (index < this.size && index > -1) {
      for (let i = 0; i < index + 1; i++) {
        node = node.next;
      }
      //断开前驱指针
      if (node.prev != null) {
        node.prev.next = node.next;
      }

      //断开后继指针
      if (node.next != null) {
        node.next.prev = node.prev;
      }

      this.size = this.size - 1;
    }
  }

  // 链表长度
  size() {
    return this.size;
  }

  // 清空单向链表
  clear() {
    this.headNode = new Node(null, this, this);//头指针
    this.size = 0;
  }

  // 列表转字符串
  toArray() {
    let arrayList = [];
    let node = this.headNode;
    for (let i = 0; i < this.size; i++) {
      node = node.next;
      arrayList[arrayList.length] = node.item;
    }
    return arrayList;
  }
}

4.3、验证

简单的验证

const temp = new LinkedList();
temp.add('第一个');
temp.add('第二个');
temp.add('第三个');
temp.add('第四个');
temp.set(1, '修改第二个');
temp.remove(3)
console.log(temp.toArray())
//[ '第一个', '修改第二个', '第三个' ]

有偏薄之处欢迎指正

流星雨在线
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript 自动生成列表
MEX651938106的博客
07-07 1174
function createTable(){                 var row = document.getElementById("row").value;                 var col = document.getElementById("col").value;                                  var tab = "
JavaScript数据结构 —— 列表List
热门推荐
weixin_48920282的博客
12-20 1万+
2.1 —— List的简述 列表是一组有序的数据，每个列表中的数据项称为元素。 列表拥有描述元素位置的属性，列表有前有后（front和end）。 使用next()方法可以从当前元素移动到下一个元素，使用next（） 可以从当前元素移动到下一个元素，使用prev()方法可以移动到当前元素的前一个元素，还可以使用moveTo(n)方法直接移动到指定位置 2.1 —— List的方法 定义的属性有： listSize : 列表的元素个数 pos： 列表的当前位置 定义的方法有: getE
JavaScript常用的列表方法
l1965564484的博客
06-28 767
push():在列表添加一个或者多个元素。pop():移除并返回列表的最后一个元素unshift():在列表添加一个元素或者多个元素shift():在列表删除一个元素concat():连接两个或多个列表，并返回一个新的列表slice():返回子列表splice():从列表中添加、移除或替换元素。indexof():返回指定元素在列表中首次出现的索引lastIndexof():返回指定元素在列表中最后一次出现的索引join():将列表中的所有元素以join函数中参数指定的字符形式连接起来。
JavaScript List
weixin_30555515的博客
01-23 465
functionList(){this.listSize=0;this.pos=0;this.dataSource=[];this.clear=function(){this.dataSource=[];this.pos=0;this.listSize=0;};this...
js实现列表
weixin_39514724的博客
10-23 1234
列表 列表是一种最自然的数据组织方式。上一章已经介绍如何使用 List 类将数据组织成一个列 表。如果数据存储的顺序不重要，也不必对数据进行查找，那么列表就是一种再好不过的 数据结构。 var List = function () { this.pos = 0; this.dateStore = []; this.listSize = 0; } List.prototyp...
javascript列表
男儿当自强
10-10 585
1 ul 无序列表： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here 列表1 列表2 列表3 列表4 列表5 去掉列表中的圆点，需要添加如下样式 ul{list-style: non
JavaScript实现数据结构
01-02
本主题主要围绕JavaScript实现常见数据结构进行详细探讨。 首先，我们来了解一些基本的数据结构类型： 1. 数组（Array）：JavaScript中的数组是最常用的数据结构之一，它可以存储多个元素，并通过索引来访问。数组...
javascript数据结构与算法实现合集.zip
01-04
JavaScript数据结构与算法实现合集是一系列用于深入理解编程基础的资源集合，主要关注于如何在JavaScript中构建和操作各种数据结构以及应用不同算法。这个压缩包中的"DataStructuresAndAlgorithms-main"目录可能包含...
基于JavaScript实现的各种算法与数据结构
最新发布
08-07
基于JavaScript实现的各种算法与数据结构，很有价值。
基于JavaScript实现的在线数据结构演示系统源码.zip
03-05
基于JavaScript实现的在线数据结构演示系统源码.zip基于JavaScript实现的在线数据结构演示系统源码.zip基于JavaScript实现的在线数据结构演示系统源码.zip基于JavaScript实现的在线数据结构演示系统源码.zip基于...
javascript实现List列表数据结构
Dancy的博客......
12-06 869
有幸拜读《数据结构与算法Javascript描述》这本书，先强烈安利一波！全书从javascript的角度出发，简单明了的分析了数据结构在javascript领域的实现过程与实际的应用案例，且在每一章的结尾，都给大家留了一些书中案例相关的小作业，让大家可以实操消化，是一本实实在在可以带领大家入门数据结构与算法的神书，再次强烈推荐！！！那么，如何使用javascript实现一个列表呢？作为一名前端开发人员，大家的第一反应肯定都是利用数组，但我们可以利用数组做些什么呢？
第三章 列表
lgf362479845的博客
12-21 326
当不需要在一个很长的序列中查找元素，或者对其进行排序时，列表显得尤为有用。反之，如果数据结构非常复杂，列表的作用就没那么大了。
JavaScript中list的简单使用<菜单>
yangxin_blog的专栏
10-13 5484
在网页中有需要隐藏部分信息，点击之后就出来了，正好可以采用这种方法
使用 js 实现 列表
樊小书生
01-30 4732
列表是一组有序的数据，列表中的每个数据项称为元素。本篇文章中列表提供两种实现方式，一种是 ES5 构造函数，一种是 ES6 Class 。 参数 接收的参数为数组类型。 属性及方法 列表的抽象数据类型定义 列表 属性或方法 描述 listSize 属性 列表的元素个数 pos 属性 列表的当前位置 find 方法 在列表中查找某一元素在列表中的位置（从0开始计数），未找到则返回 -1 contains 方法 判断给定值是否在列表中，返回 true/false length 方
28 个 Javascript 数组方法汇总整理
web前端开发
07-02 154
英文 | https://devsmitra.medium.com/28-javascript-array-hacks-a-cheat-sheet-for-developer-ba7d30a5fed9翻译 | 杨小爱01、Array.map()返回一个新数组，其中包含对该数组中每个元素调用提供的函数的结果。const list = [????, ????, ????, ????]; list.m...
js实现列表类
※老鼠拧刀满街找猫※
08-29 2421
function List() { this.listSize=0; this.pos=0; this.dataStore=[]; this.clear=clear; this.find=find; this.toString=toString; this.insert=insert; this.append=append;
JavaScript阶段性学习（三）---列表（数据结构）
qq_42356790的博客
04-29 503
JavaScript阶段性学习（三）—列表（数据结构） 目录JavaScript阶段性学习（三）---列表（数据结构）列表的抽象数据类型定义实现列表类1.append：给列表添加元素2.remove：从列表中删除元素3.find：在列表中查找某一元素4.length：列表中有多少个元素5.toString：显示列表中的元素6.insert：向列表中插入一个元素7. clear：清空列表中所有的元素8.contains：判断给定值是否在列表中9.遍历列表 列表的抽象数据类型定义 列表是一组有序的数据。每个列表
JavaScript Array
司马懿的西山居
09-15 1512
数组对象用来在单独的变量名中存储一系列的值。在JavaScript中我们有且仅能使用关键词 new 来创建数组对象。一、仅有以下2种方式来创建数组（1）先声明数组后赋值。var myArray = new Array(); myArray[0] = 'China'; myArray[1] = 'America'; myArray[2] = 'Japan'; //输出 [ 'China', 'Amer
javascript 数据结构 list
王亮的专栏
04-08 934
list : 如果我们只有几项存储在列表　　的形式。列表是特别有用如果我们没有执行搜索列表中的项目　　或者把它们放进某种类型的排序顺序。当我们需要执行或长搜索　　复杂的排序,列表变得不那么有用,尤其是在更复杂的数据结构。
JavaScript实现栈的数据结构详解
"这篇文档介绍了如何在JavaScript中实现栈数据结构，通过两种不同的方式：基于数组和基于对象。栈是一种后进先出（LIFO）的数据结构，常用于算法和程序设计中。" 在JavaScript中，栈数据结构的实现可以通过数组或者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

流星雨在线

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值