JavaScript数据结构与算法之栈详解


Posted in Javascript onMarch 12, 2015

在上一篇博客介绍了下列表,列表是最简单的一种结构,但是如果要处理一些比较复杂的结构,列表显得太简陋了,所以我们需要某种和列表类似但是更复杂的数据结构---栈。栈是一种高效的数据结构,因为数据只能在栈顶添加或删除,所以这样操作很快,而且容易实现。

一:对栈的操作。

栈是一种特殊的列表,栈内的元素只能通过列表的一端访问,这一端陈为栈顶。比如餐馆里面洗盘子,只能先洗最上面的盘子,盘子洗完后,也只能螺到这一摞盘子的最上面。栈被称为 "后入先出"(LIFO)的数据结构。

由于栈具有后入先出的特点,所以任何不在栈顶的元素都无法访问,为了得到栈低的元素,必须先拿掉上面的元素。我们可以对栈的两种主要操作是将一个元素 压入栈 和 将一个元素 弹出栈。入栈我们可以使用方法push()方法,出栈我们使用pop()方法。pop()方法虽然可以访问栈顶的元素,但是调用该方法后,栈顶元素也就从栈中被永久性的删除了。另一个我们很常用的方法是peek(),该方法只返回栈顶元素,而不删除它。

入栈和出栈的实列图如下:

JavaScript数据结构与算法之栈详解

push(),pop()和peek()是栈的三个主要方法,但是栈还有其他方法和属性。如下:

clear():清除栈内的所有元素。

length(): 记录栈内元素的个数。

二:对栈的实现如下:

我们可以先实现栈类的方法开始;如下:
 

  function Stack() {

      this.dataStore = [];

      this.top = 0;

  }

 

 如上:dataStore 是保存栈内的所有元素。变量top记录栈顶的位置,初始化为0. 表示栈顶对应数组的起始位置为0,如果有元素被压入栈。该变量值将随之变化。

我们还有如下几个方法:push(), pop(), peek(),clear(),length();

1.  push()方法;当向栈内压入一个新元素时,需要将其保存在数组中变量top所对应的位置,然后top值加1,让其指向数组中下一个位置。如下代码:

function  push(element) {

     this.dataStore[this.top++] = element;

}

2. pop()方法与push()方法相反---它返回栈顶元素,同时将top值减1.如下代码:
   function pop(){

       return this.dataStore[--this.top];

   }

3. peek()方法返回数组的第top-1个位置的元素,即栈顶元素;
    function peek(){

        return this.dataStore[this.top - 1];

    }

4. length()方法 有时候我们要知道栈内有多少个元素,我们可以通过返回变量top值的方式返回栈内的元素个数,如下代码:
     function length(){

         return this.top;

     }

5. clear(); 有时候我们要清空栈,我们将变量top值设为0;如下代码:
   function clear() {
        this.top = 0;
    }

如下所有代码:
function Stack() {

    this.dataStore = [];

    this.top = 0;

}
Stack.prototype = {

    

    // 向栈中压入一个新元素

    push: function(element) {

        this.dataStore[this.top++] = element;

    },

    // 访问栈顶元素,栈顶元素永久的被删除了

    pop: function(){

        return this.dataStore[--this.top];

    },

    // 返回数组中的 top-1 个位置的元素,即栈顶元素

    peek: function(){

        return this.dataStore[this.top - 1];

    },

    // 栈内存储了多少个元素

    length: function(){

        return this.top;

    },

    // 清空栈

    clear: function(){

        this.top = 0;

    }

};
demo实例如下:
var stack = new Stack();

stack.push("a");

stack.push("b");

stack.push("c");

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

console.log(stack.peek());   // c
var popped = stack.pop();

console.log(popped);  // c
console.log(stack.peek()); // b
stack.push("d");
console.log(stack.peek());  // d
stack.clear();
console.log(stack.length());  // 0
console.log(stack.peek());  // undefined

下面我们可以实现一个阶乘函数的递归定义;比如5!的阶乘 5!= 5 * 4 * 3 * 2 * 1;

如下代码:

function fact(n) {

    var s = new Stack();

    while(n > 1) {

        s.push(n--);

    }

    var product = 1;

    while(s.length() > 0) {

        product *= s.pop();

    }

    return product;

}

console.log(fact(5));

上面的代码含义是:先数字5传入函数,使用while循环,每次自减1的之前,把自己使用栈的函数push()压入栈内,直到变量n  小于 1为止。然后定义一个变量product;通过栈的length()的方法判断是否大于0 且每次执行 product* = s.pop();  pop()方法返回栈顶元素,且从栈中删掉该元素。所以每次执行一次,就删掉一个元素,直到s.length() <= 0 为止。所以 product = 5*4*3*2*1 .等操作。

Javascript 相关文章推荐
Javascript 二维数组
Nov 26 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 #Javascript
Javascript数据结构与算法之列表详解
Mar 12 #Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 #Javascript
基于jquery实现的自动补全功能
Mar 12 #Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 #Javascript
window.open()实现post传递参数
Mar 12 #Javascript
js运动动画的八个知识点
Mar 12 #Javascript
You might like
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
php blowfish加密解密算法
2016/07/02 PHP
php strftime函数的详细用法
2018/06/21 PHP
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
Angularjs中UI Router的使用方法
2016/05/14 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
js重写方法的简单实现
2016/07/10 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
Python常见的pandas用法demo示例
2019/03/16 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
python yield和Generator函数用法详解
2020/02/10 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
学校介绍信范文
2014/01/14 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
2014年消防工作总结
2014/11/21 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python