本文实例讲述了JS中的算法与数据结构之列表(List)。分享给大家供大家参考,具体如下:
前言
前端很少有机会接触到算法,大多都交互性的操作,所以不少前端工程师会抱着这么一种想法:我是做前端的,为什么要学数据结构与算法?没有数据结构与算法,我一样很好的完成工作。实际上,算法是一个宽泛的概念,我们平时写的任何代码都可以成为算法,它是对一个问题的解决方案的准确而完整的描述,是解决一系列问题的清晰指令,它代表着用系统的方法描述解决问题的策略机制。随着现在互联网的飞速发展,前端工程师已不是靠几个选择器操作加链接加事件就能应付的,越来越复杂的产品和基础库,需要坚实的数据结构与算法才能驾驭,所以我认为前端工程师也是应该要重视算法和数据结构,这对于自己的职业发展是有很大帮助的。当然,算法的学习也不是一朝一夕的事情,这是一个过程,得自己去摸索,去实践,去总结,我这里只是将一些常见的算法和数据结构用 JavaScript 去实现,起到一个抛砖引玉的作用。
列表(List)
列表是计算机中一种常见的数据结构,日常生活中的购物清单,待办事项等都可以成为列表,它是一组有序的数据,每个列表中的数据项称为元素。在javascript中,列表中的元素可以是任意数据类型。列表中可以保存多少元素并没有限定(在实际使用时会受到程序内存的限制)。列表中会有一些常见属性或方法,比如列表中的元素个数,列表当前的位置,向列表末尾增加一个元素,从列表中删除一个元素,清空列表等一系列操作。接下来,我们抽象出一个列表的数据类型定义,并用JS中的数组去实现它。
列表类
/*定义List类*/ function List () { this.listSize = 0; //初始化元素个数为0 this.pos = 0; //初始化位置为0 this.dataStore = []; //初始化空数组来保存列表元素 this.clear = clear; this.find = find; //寻找元素 this.toString = toString; //显示列表中的元素 this.insert = insert; this.append = append; this.remove = remove; this.front = front; this.end = end; this.prev = prev; this.next = next; this.length = length; //列表中的元素总数 this.currPos = currPos; this.moveTo = moveTo; this.getElement = getElement; this.contains = contains; //判断给定值是否在列表中 }
接着我们来实现这些方法。
首先得可以添加元素,所以我们先来编写 append 方法
append:向列表中添加一个元素
//该方法给列表的最后一个位置添加一个新的元素,待插入成功后,更新列表中的元素个数 function append ( element ) { this.dataStore[this.listSize++] = element; }
这样我们就可以往列表里面添加元素了,接着我们来看查找 find 方法
find:查找列表中的某一个元素
//该方法通过循环查找给定元素是否在列表中,如果存在返回元素的位置,否则返回 -1 function find(element){ for( var i = 0 ; i < this.dataStore.length ; i ++ ){ if( this.dataStore[i] == element ){ return i; } } return -1; }
可以插入元素,那总得可以删除了,我们利用 remove 方法删除一个元素
remove:删除列表中的某一元素
//该方法通过使用find()方法返回元素的位置对 dataStore 数组进行截取,如果删除成功,返回 true , 并将 listSize 的值减1,更新列表长度,否则返回 false function remove ( element ) { var foundAt = this.find(element); if( foundAt > -1 ){ this.dataStore.splice( foundAt , 1 ); --this.listSize; return true; } return false; }
我想知道我的列表还有多少个元素的时候,就得构建 length 方法,
length:返回列表中总的元素个数
//该方法直接将 listSize 返回即可 function length(){ return this.listSize; }
如果能显示我的列表元素就好了,这个可以有,我们来看看 toString 方法,
toString:显示列表的元素
//该方法直接返回了列表数组,显示出当前列表内容 function toString(){ return this.dataStore; }
现在我们的列表已经有了基本的一些功能,不妨下试试
//构造列表对象 var fruits = new List(); //添加三个元素 fruits.append('Apple'); fruits.append('Grape'); fruits.append('Banana'); //打印列表 console.log( fruits.toString() ) // ["Apple", "Grape", "Banana"] //查看列表长度 console.log( fruits.length() ) // 3 //查找 Banana 的位置 console.log( fruits.find('Banana') ) // 2 //删除 Grape fruits.remove('Grape'); console.log( fruits.toString() ) // ["Apple", "Banana"]
如果我们删除了 Grape 元素 , 我们还想将它放回到原来的位置 ,这时候我们就需要调用 insert 方法
insert:向列表某个位置添加一个元素
//该方法需要传入两个参数,第一个参数表示待插入的元素,第二个参数表示待插入元素的前一个元素,用于确定插入元素的位置,并调用 splice 方法更改列表数组,插入成功后更新 listSize 并返回 true , 否则返回 false; function insert( element , after ){ var insertPos = this.find( after ); if( insertPos > -1 ){ this.dataStore.splice( insertPos + 1 , 0 , element ); this.listSize ++; return true; } return false; }