JS中算法和数据结构列表示例的详细说明

本文通过实例描述了JS中的链表算法和数据结构。分享给大家参考，如下：

前言

前端很少能接触到算法，大部分都是交互操作，所以很多前端工程师都会抱着这样一个想法：我是前端，为什么要学习数据结构和算法？没有数据结构和算法，我也能做好我的工作。其实算法是一个宽泛的概念，我们平时写的任何代码都可以是算法。它是对一个问题的解决方案的准确而完整的描述，是解决一系列问题的明确指令，是描述解决问题的政策机制的系统方式。随着互联网的快速发展，前端工程师无法通过几个选择器、链接和事件来应对。越来越复杂的产品和基础库需要坚实的数据结构和算法来控制。所以我觉得前端工程师也要重视算法和数据结构，这对他们的职业发展有很大的帮助。当然，算法学习不是一次性的事情。是一个过程，需要自己去探索、去实践、去总结。我只用JavaScript实现了一些常用的算法和数据结构，起到了吸引有价值建议的作用。

列表(List)

列表是计算机中常见的数据结构。日常生活中的购物清单和待办事项都可以是清单。它是一组有序的数据，每个列表中的数据项称为元素。在javascript中，列表中的元素可以是任何数据类型。列表中可以存储的元素数量没有限制(实际使用时会受到程序内存的限制)。列表中有一些常见的属性或方法，比如列表中的元素数量、列表的当前位置、在列表末尾添加元素、从列表中删除元素、清空列表等等。接下来，我们抽象一个列表的数据类型定义，并用JS中的数组实现它。

列表的数据类型定义

列表类

/*定义List类*/functionlist () {this。list size=0；//初始化元素个数为0 this.pos=0//初始化位置为0 this . Datastore=[]；//初始化一个空数组来保存列表元素this.clear=clearthis.find=find//查找元素this.toString=toString//显示列表中的元素this.insert=insertthis.append=追加；this.remove=移除；this.front=frontthis.end=endthis.prev=prevthis.next=nextthis.length=长度；//列表中的元素总数this . curr pos=curr pos；this . move to=move to；this.getElement=getElementthis.contains=contains//确定给定值是否在列表中}然后我们将实现这些方法。

首先，您可以添加元素，所以让我们先编写append方法

追加：向列表中添加元素

//这个方法在列表的最后一个位置添加一个新元素，插入成功后更新列表中的元素个数。函数追加(元素){this。数据存储[这个。listsize]=元素；}这样我们就可以向列表中添加元素，然后让我们看看find方法

查找：在列表中查找元素

//该方法通过循环查找给定元素是否在列表中，如果有位置返回该元素，否则返回-1函数find(element){ for(var I=0；I this . Datastore . length；i ){ if(this.dataStore[i]==元素){ return I；} } return-1；}您可以插入一个元素，该元素始终可以删除。我们使用remove方法删除一个元素

移除：从列表中移除元素

//此方法通过使用find()方法返回元素的位置来截取dataStore数组。如果删除成功，则返回true，并将listSize减1以更新列表长度；否则，它返回false函数remove (element) {var在=this处找到。find(元素)；if(Foundat-1){ this . Datastore . splice(Foundat，1)；-this . listsize；返回真；}返回false}当我想知道我的列表中还剩多少元素时，我必须构建length方法。

Length:返回列表中元素的总数

//这个方法直接将listSize返回给函数length () {return this。列表大小；}如果我能显示我的列表元素，这是可以做到的。让我们看看toString方法。

显示列表的元素

//此方法直接返回列表数组，显示当前列表内容functiontostring () {return this。数据存储；}现在我们的列表有了一些基本功能，让我们来试试吧

//构造列表对象var水果=新列表()；//添加三个元素水果.追加(' Apple ')；水果。附加('葡萄')；水果。附加('香蕉')；//打印列表console.log(水果. tostring ())//['苹果'，'葡萄'，'香蕉']//检查列表长度console.log(水果. length())//3//查找位置console.log(水果. Find('香蕉')//2//删除葡萄水果. remove('葡萄')；Console.log(水果. tostring ())//['apple '，' banana']如果我们删除了Grape元素，我们想把它放回原来的位置，所以需要调用insert方法。

插入：将元素添加到列表中的位置

//这个方法需要传入两个参数。第一个参数表示要插入的元素，第二个参数表示要插入的元素的前一个元素。它用于确定插入元素的位置，并调用拼接方法来更改列表数组。插入成功后，更新listSize并返回true，否则返回false；函数insert(element，after){ var insertPos=this . find(after)；if(insertPos-1){ this . datastore . splice(insertPos 1，0，元素)；this.listSize返回真；}返回false}现在，我们把葡萄放在原来的位置；

水果。插入('葡萄'，'苹果')；Console.log(水果. tostring ())//['苹果'，'葡萄'，'香蕉']好了，现在可以把葡萄插到原来的位置了。

如果我吃了所有的水果，现在想清空清单，我们需要一个明确的方法；

清除：清除列表

//此方法使用delete运算符删除dataStore数组，然后创建一个新数组，并将其listSize和pos初始化为1。函数clear(){ delete this . datastore；this . DATASE=[]；this . listsize=this . pos=0；}我们不妨试一试。

水果. clear()；console.log(水果. tostring())；//[]成功！

上图，我们可以看到列表中有一个pos属性，表示当前列表的位置。我们会围绕它做一些事情，让用户可以自由操作列表

前面：将列表的位置移动到第一个位置

//只要pos设置为0，这个方法就可以函数front(){ this . pos=0；}end:将列表位置移动到最后一个位置

//同上，这个方法只需要将pos设置为列表长度减1，因为数组下标从0开始。函数end () {this。POS=这个。listsize-1；}prev:将当前位置向前移动一位

//只要pos位置减少1，函数prev () {if (this。pos0){这个。pos-；}else{ console.log('您目前是第一名')；} }下一步：将当前位置向后移动一个位置

//同理，pos位置加1即可，但一定不能超过function next () {if (this。possis . listsize-1){ this。pos}else{ console.log('您当前处于末尾')；}}moveTo:将当前位置移动到指定位置

//直接改变pos的值，并注意输入函数移动到(position){ if(position 0 | | position(这。list size-1)) {console.log('请输入正确的位置')；} else { this.pos=position}}由于我可以随意改变列表位置，所以我必须知道我当前的位置在哪里，所以我们需要currPos和getElement方法分别返回当前位置和元素；

返回列表的当前位置

//只需将pos直接返回到function curr pos(){ returnthis . pos；}getElement:返回当前位置的元素

//直接取对应的元素即可。函数GetElement(){返回this . datastore[this . pos]；}接下来，我们来测试一下。首先，将列表恢复到清空之前的状态，然后我们将添加更多的元素。

//加几个水果.附加('梨')；水果。附加('橙色')；水果。附加('草莓')；console.log(水果. tostring())；//['苹果'，'葡萄'，'香蕉'，'梨'，'橘子'，'草莓']//我们来看看当前位置和元素console.log(水果. current//0console.log(水果. GetElement())；//苹果//我们试着换水果吧. move to(2)；水果. next()；console.log(水果. curr pos())；//3console.log(水果. GetElement())；//pearlocks . end()；水果. prev()；console.log(水果. curr pos())；//4console.log(水果. GetElement())；//Orange至此，我们已经基本完成了列表的所有功能，但是还需要最后一个来判断给定的元素是否在列表中。我们在这里使用contains方法

包含：确定给定值是否在列表中

//我们直接使用indexOf()或者采用ES6中的includes方法，后面跟着advanced level来判断//es5函数包含(element) {if (this。数据存储。(元素)-1)的索引返回true否则返回false}//ES6function包含(元素){ return this.dataStore.includes(元素)；}(ps:不熟悉ES6的同学也可以参考https://www.jb51.net/article/138409.htm)

写完测试后，

console.log(水果. contains(' Banana '))；//trueconsole.log(水果. contains('西瓜'))；//假的你完蛋了！我们已经用javascript实现了一个列表。至于以后如何拓展，可以发散思维，多实践动手，一起加油！

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun来测试上述代码的运行效果。

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》和0103010

希望本文对JavaScript编程有所帮助。