单链表（JavaScript实现）

• 链表访问任何一个位置的元素的时候，都需要从头开始访问，无法通过下标直接访问元素。

一、什么是单链表

=======================================================================

那么到底什么是单链表呢？

它就类似于火车，火车头规连接一个节点，节点上有乘客，并且这个节点会连接到下一个节点，依次类推，如下所示：

我们的链表结构就是：

了解了直观上的链表，我们再来对单链表进行代码的封装。

二、单链表的封装

=======================================================================

首先，我们封装一个NodeList类，用于表示链表结构，在这个类里面在封装一个内部类Node，用于封装每一个节点上的信息（数据和指向下一个节点的引用），然后在NodeList类中保存两个属性，一个是链表的长度，一个是链表中的头结点。如下所示：

function LinkedList(){

this.length = 0;

this.head = null;

//内部的类

function Node(data){

this.data = data;

this.next = null;

}

}

三、单链表的常用操作

=========================================================================

然后在里面添加单链表常用的操作。主要有：

• append（element:向列表尾部添加一个项

• insert(position,element):向列表的特定位置插入一个项

• get(position):获取对应位置的元素

• indexOf(element):返回元素在列表中的索引，如果列表中没有该元素则返回-1

• update(position，ele):修改某个位置的元素

• removeAt(position):从列表的指定位置移除一项

• remove(element):从列表中移除一项

• isEmpty():如果链表中不包含任何元素，返回true,如果链表长度大于0返回false

• size():返回链表包含的元素个数，与数组的length属性相关

• toString():由于列表项用到了Node类，需要重写继承自JavaScript对象默认的toString方法，让其输出元素的值

接下来们就来一个一个实现。

1、append(element)方法-----向列表尾部添加一个项

---

因为向链表尾部添加数据可能有两种情况：

• 链表本身为空，新添加的数据是唯一的节点

• 链表不为空，需要向其他节点后面追加节点

所以我们就需要进行判断，如果链表为空，直接将头结点的指针指向新节点。

如果链表不为空，则新建立一个临时节点，让它等于头结点，并对它进行判断，如果它指向的节点的指针域为空，则为尾节点，将新加的节点添加到末尾，即让尾节点的指针指向新添加的节点。如果它指向的节点的指针域不为空，则让这个临时节点的指针域指向下一个节点，一直循环操作到这个节点的指针域为空（即为尾节点）。然后每添加一个节点，让链表的长度+1。

LinkedList.prototype.append = function(data){

var newNode = new Node(data);

// 判断链表是否为空

// 1.为空

if(this.length === 0){

this.head = newNode;

}else{

//不为空

var current = this.head;

if(current.next){

current = current.next;

}

current.next = newNode;

}

this.length += 1;

}

2、toString方法-----输出元素的值

---

这个比较简单，主要是获取每一个元素，因为获取链表的任何元素都必须从第一个节点开始，所以我们可以从头结点开始，循环遍历每一个节点，并且取出其中的element，拼接成字符串，并将字符串返回。

LinkedList.prototype.toString = function(){

var current = this.head;

var ListStr = ‘’;

while(current){

ListStr += current.data + ’ ';

current = current.next;

}

return ListStr;

}

验证：创建几个新的节点，并打印

var list = new LinkedList();

list.append(‘a’);

list.append(‘b’);

list.append(‘c’);

list.append(‘d’);

list.append(‘e’);

alert(list);

打印结果为：

3、insert方法-----向列表的特定位置插入一个项

---

实现在任意位置插入数据的方法，首先判断插入的位置是否越界，然后在不越界的情况下分两种情况，如果插入到第一个位置，则表示新添加的节点是头，则需要将原来的头结点作为新节点的next,再让head指向新节点。如果插入到其他位置，则需要通过循环先找到节点位置，并在循环的过程中保存上一个节点和下一个节点，找到正确的位置后，将新节点的Next指向下一个节点，将上一个节点的next节点指向新节点。代码如下：

LinkedList.prototype.insert = function(position,data){

if(position<0 || position >this.length){

return false;

}

var newNode = new Node(data);

var index = 0;

if(position == 0){

newNode.next = this.head;

this.head = newNode;

}else{

while(index++ < position){

var current = this.head;

var previous = null;

previous = current;

current = current.next;

}

newNode.next = current;

previous.next = newNode;

}

this.length += 1;

return true;

}

验证：在第1个位置插入xl,在第2个位置插入wh

list.insert(1,‘xl’)

list.insert(2,‘wh’)

alert(list)

4、get方法-----获取对应位置的元素

---

这个方法相对简单，先对positon做越界判断，然后通过临时节点遍历链表直到目标位置，获取该位置的元素。

LinkedList.prototype.get = function(position,data){

var current = this.head;

var index = 0;

if(position < 0 || position >= this.length){

return null;

}else{

while(index<position){

current = current.next;

index++;

}

return current.data;

}

}

验证：获取第三个位置的元素：

alert( list.get(3));

5、indexOf()方法-----返回元素在列表中的索引

---

首先判断查找的元素的位置是否存在，如果不存在，返回-1。如果存在的话分两种情况，如果返回的元素在第一个位置，则直接返回第一个位置的索引。如果返回元素在其他位置，则需要通过循环先找到节点位置，这个过程中，索引需要跟着遍历的次数自加，找到正确元素的位置后，打印索引即为目标位置。

LinkedList.prototype.indexOf = function(data){

var index = 0;

var current = this.head;

while(current){

if(current.data == data){

return index;

}

else{

current = current.next;

index++;

}

}

return -1;

}

}

验证：获取c的索引：

alert(list.indexOf(‘c’));

6、update方法-----修改某个位置的元素

---

这个方法和get方法很像，向后遍历，当index的值等于position时，表示找到目标位置，将date改为目标值：

LinkedList.prototype.update = function(position,ele){

if(position<0 || position>=this.length){

return false;

}else{

var index = 0;

var current = this.head;

while(index++ <position){

current = current.next;

}

current.data = ele;

return true;

}

}

验证：修该第0个位置的元素为：bear

list.update(0,‘bear’)

alert(list)

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

完整版面试题资料免费分享，只需你点赞支持，动动手指点击此处就可免费领取了。

前端实习面试的套路

---

回顾项目

往往在面试时，面试官根据你简历中的项目由点及面地展开问答，所以请对你做过的最好的项目进行回顾和反思。回顾你做过的工作和项目中最复杂的部分，反思你是如何完成这个最复杂的部分的。

面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化，即使你项目中没有对那部分进行优化，你也应该预先思考有什么优化的方案。如果这部分答好了，会给面试官留下很不错的印象。

重点在于基础知识

这里指的基础知识包括：前端基础知识和学科基础知识。

前端基础知识：html/css/js 的核心知识，其中 js 的核心知识尤为重要。比如执行上下文、变量对象/活动对象（VO/AO）、作用域链、this 指向、原型链等。

学科基础知识：数据结构、计算机网络、算法等知识。你可能会想前端不需要算法，那你可能就错了，在大公司面试，面试官同样会看重学生这些学科基础知识。
你可能发现了我没有提到React/Vue这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。
这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。如果你没有使用过框架，那也不需要太担心，把重点放在基础知识和学科基础知识之上，有其余精力的话可以去看看主流框架的核心思想。

过的工作和项目中最复杂的部分，反思你是如何完成这个最复杂的部分的。

面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化，即使你项目中没有对那部分进行优化，你也应该预先思考有什么优化的方案。如果这部分答好了，会给面试官留下很不错的印象。

重点在于基础知识

这里指的基础知识包括：前端基础知识和学科基础知识。

前端基础知识：html/css/js 的核心知识，其中 js 的核心知识尤为重要。比如执行上下文、变量对象/活动对象（VO/AO）、作用域链、this 指向、原型链等。

学科基础知识：数据结构、计算机网络、算法等知识。你可能会想前端不需要算法，那你可能就错了，在大公司面试，面试官同样会看重学生这些学科基础知识。
你可能发现了我没有提到React/Vue这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。
这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。如果你没有使用过框架，那也不需要太担心，把重点放在基础知识和学科基础知识之上，有其余精力的话可以去看看主流框架的核心思想。