JS中的算法与数据结构之栈(Stack)实例详解


Posted in Javascript onAugust 20, 2019

本文实例讲述了JS中的算法与数据结构之栈(Stack)。分享给大家供大家参考,具体如下:

栈(Stack)

上一篇我们说到了列表,它是一种最自然的数据组织方式,如果对数据的存储顺序要求不重要,那么列表就是一种非常适合的数据结构,但对于计算机其他的一些应用(比如后缀表达式),那么列表就显得有些无能为力, 所以,我们需要一种和列表功能相似但更复杂的数据结构。
栈,又叫堆栈,是和列表类似的一种数据结构,但是却更高效,因为栈内的元素只能通过列表的一端访问,称为栈顶,数据只能在栈顶添加或删除,遵循 先入后出(LIFO,last-in-first-out) 的原则,普遍运用于计算机的方方面面。
对栈的操作主要有两种,一是将一个元素压入栈,push方法,另一个就是将栈顶元素出栈,pop方法。
除此之外,栈还有其他的一些属性和方法:查看当前栈顶的元素值,我们使用 peek 方法,它仅仅返回栈顶元素值,并不删除它;clear 方法用于清空当前栈内的所有元素;top属性记录当前栈顶位置;length方法返回当前栈内元素总数等;接着我们定义栈的数据类型,并利用JS中的数组去实现它。

JS中的算法与数据结构之栈(Stack)实例详解
栈数据类型定义

栈的实现

//定义栈

function Stack () {
  this.dataStore = [];  //初始化为空
  this.top = 0;      //记录栈顶位置
  this.pop = pop;     //出栈
  this.push = push;    //入栈
  this.peek = peek;    //查看栈顶元素
  this.length = length;  //查看栈内元素总数
  this.clear = clear;   //清空栈
}

我们利用 dataStore 来保存栈内元素,初始化为空数组,top 属性用于记录当前栈顶位置,初始化的时候为0,

表示栈顶对应数组的起始位置是0,如果有元素入栈,则该属性会随之反生变化。

首先我们先来实现第一个入栈方法。

push:向栈内压入一个新的元素

//该方法将一个新元素入栈,放到数组中 top 所对应的位置上,并将 top 的值加 1,让其指向数组的下一个空位置

function push( element ){
  this.dataStore[this.top++] = element;
}

能入栈,就得可以出栈,接着我们来看出栈方法:

pop:取出栈顶元素

//该方法与入栈相反,返回栈顶元素,并将 top 的值减 1

function pop(){
  return this.dataStore[--this.top];
}

如何查看栈顶元素呢,peek方法!

peek:查看栈顶元素

//该方法返回的是栈顶元素,即 top - 1 个位置元素

function peek(){
  if( this.top > 0 ) return this.dataStore[this.top-1];
  else return 'Empty';
}

这里我做了个判断,如果一个空栈调用了 peek 方法,因为栈内没有任何元素,所以我这里返回了一个 'Empty';
现在,我们已经有了基本的入栈、出栈、查看栈顶元素的方法,我们不妨试一试。

//初始化一个栈
var stack = new Stack();
console.log( stack.peek() );  // Empty

//入栈
stack.push('Apple');
stack.push('Banana');
stack.push('Pear');

//查看当前栈顶元素
console.log( stack.peek() );  // Pear
console.log( stack.pop() );   // Pear

如果我放入了一些水果,吃掉了一个,我现在想知道我还剩多少个水果怎么办?length 方法可以实现

length:返回栈内元素总数

//该方法通过返回 top 属性的值来返回栈内总的元素个数

function length(){
  return this.top;
}

我们把代码恢复到出栈前的状态,也就是里面已经放了三个水果,接着我们来看看

console.log( stack.length() );   // 3

//出栈
stack.pop();

console.log( stack.length() );   // 2

好了,我们还剩最后一个clear方法,我们来实现一下

clear:清空栈

//该方法实现很简单,我们将 top 值置为 0 , dataStore 数值清空即可

function clear(){
  delete this.dataStore;
  this.dataStore = [];
  this.top = 0;
}

我们将上面的栈清空试试

stack.clear();

console.log( stack.length() );   // 0
console.log( stack.peek() );    // Empty

至此,我们已经可以用JS实现一个栈,但是你仍可能处于不知道如何正确使用的状态,接下来,我们举两个例子,一起看看栈的使用。

案例1:实现数制间的相互转换

我们可以利用栈将一个数字从一种数制转换成另一种数制。例如将数字 n 转换成以 b 为基数的数字,可以采用如下算法(该算法只针对基数为 2-9 的情况):

最高位为 n % b , 直接压入栈;
使用 n / b 来代替 n ;
重复上面的步骤,知道 n 为 0 ,并且没有余数;
以此将栈内元素弹出,直到栈空,并依次将这些元素排列,就得到了转换后的形式

代码如下:

//进制转换(2-9)

function mulBase ( num , base ) {
  var s = new Stack();
  do{
    s.push( num % base );
    num = Math.floor( num /= base );
  }while ( num > 0 );

  var converted = '';
  while (s.length() > 0){
    converted += s.pop();
  }
  return converted;
}

console.log( mulBase( 125 , 2 ) );   // 1111101
console.log( mulBase( 125 , 8 ) );   // 175

案列2:判断一个字符串是不是回文

回文是指一个字符串,从前往后写和从后往前写结果都是一样的,比如单词 'level' , 'racecar',就是回文,数字 1001 也是回文。
我们采用栈,可以很轻松判断一个字符串是否是回文,实现算法很简单,相信你们都猜到了。我们把字符串从左到右依次压入栈,这样,栈中保存了该字符串反转后的字符,我们再依次出栈,通过比较出栈后的字符串是否与原字符串是否相等,就可判断该字符串是否是回文。
具体代码实现如下:

//回文判断

function isPalindrome ( word ) {
  var s = new Stack();
  for( var i = 0 ; i < word.length ; i ++ ){
    s.push( word[i] );
  }
  var rword = '';
  while( s.length() > 0 ){
    rword += s.pop();
  }

  if( word == rword ){
    return true;
  }else{
    return false;
  }
}

console.log( isPalindrome('level') )  // true
console.log( isPalindrome('1001') )   // true
console.log( isPalindrome('word') )   // false

本文主要讲的是栈的运用,所以采用上述方式判断字符串是否是回文,实际上,你完全可以采用以下方式更方便的判断一个字符串是否是回文:

function isPalindrome ( word ){
  return String(word).split('').reverse().join('') == word ? true : false;
}

到此,栈的内容也基本告一段落,希望你能有所收获,一起加油~

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

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
Javascript基础之数组的使用
May 13 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 #Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 #Javascript
基于vue手写tree插件的那点事儿
Aug 20 #Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 #Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 #Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 #Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 #Javascript
You might like
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
表格 隔行换色升级版
2009/11/07 Javascript
Date对象格式化函数代码
2010/07/17 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
JS中的多态实例详解
2017/10/15 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
Python实现翻转数组功能示例
2018/01/12 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
潘婷洗发水广告词
2014/03/14 职场文书
新员工入职欢迎词
2015/01/23 职场文书
退休教师追悼词
2015/06/23 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL