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

 更新时间:2022年06月29日 11:14:34   作者:言不及行yyds  
栈作为一种数据结构,是一种只能在一端进行插入和删除操作的特殊线性表,也成称为先进后出表,下面这篇文章主要给大家介绍了关于JavaScript数据结构与算法之栈的相关资料,需要的朋友可以参考下

1.认识栈

:(stack)又名堆栈,它是一种运算受限的线性表。遵循后进先出(LIFO)

栈顶:限定仅在表尾进行插入和删除操作的线性表,

栈底:限定仅在表头进行插入和删除操作的线性表。

进栈:向一个栈插入新元素又称作进栈、入栈或压栈,它是把新元素放到栈顶元素的上面,使之成为新的栈顶元素;

出栈:从一个栈删除元素又称作出栈或退栈,它是把栈顶元素删除掉,使其相邻的元素成为新的栈顶元素

2.面向过程方法源码编写栈

2.1思考

面向过程是什么:

面向过程就是将解决问题的步骤分析出来,

然后用函数实现,

只要一步一步的执行调用他就可以了。

2.2需要实现的方法

  • push(element)添加一个或多个元素到栈顶
  • pop()删除钱顶的元素,并返回移除的元素
  • peek()返回栈顶的元素
  • isEmpty()用于判断栈是否为空,空则为空
  • clear()用于清空栈的元素
  • size()用于返回栈中元素的个数

在实现之前我们思考一下我们怎么实现

首先我们借用数组的方法来实现,所以我们需要创建

一个空数组来模拟栈

2.3源码实现,并调用类

构建一个类,用数组来模拟,

在类中书写各种方法

部分调用数组的方法。

总的来说就是用类来包装

数组的方法来实现栈的模拟

class Stack {
   constructor() {
       this.item = []
         }
   push(element) {
        this.item.push(element)
               }
   pop() {
      return this.item.pop()
          }
   peek() {
       return this.item[this.item.length - 1]
            }
   isEmpty() {
       return this.item.length === 0
            }
   clear() {
         this.item = []
   size() {
          return this.item.length
            }
        }
//实例化Stack类
const stack = new Stack()
stack.push(4)
stack.push(6)
console.log( stack.pop())
console.log(stack.peek())
console.log(stack.isEmpty())
console.log(stack.size())

运行结果:

3.用面向对象的方法来源码书写

3.1思考

面向对象:

就是将构建问题的事物,分解成若干个对象

建立对象不是为了完成某个步骤,而是为了

描述某个事物在解决问题过程的行为

3.2需要实现的方法

  • push(element)添加一个或多个元素到栈顶
  • pop()删除钱顶的元素,并返回移除的元素
  • peek()返回栈顶的元素
  • isEmpty()用于判断栈是否为空,空则为空
  • clear()用于清空栈的元素
  • size()用于返回栈中元素的个数
  • toString()用于将栈以字符串的形式打印

那么在实现这个类,我们用对象来模拟栈

3.3源码及使用类

class Stack {
   constructor() {
      this.count=0
      this.items = {}
            }
   push(element) {
      this.items[this.count]=element
      this.count++
            }
    pop() {
       if(this.isEmpty()){
           return undefined
          }
       this.count--
       const result=this.items[this.count]
       delete this.items[this.count]
       return result
            }
    peek() {
          if(this.isEmpty()){
               return undefined
               }
         return this.items[this.count-1]
            }
    isEmpty() {
         return this.count===0
            }
    clear() {
        this.items={}
        this.count=0
          }
    size() {
       return this.count
           }
    toString(){
       if(this.isEmpty()){
        return undefined
               }
         let objectString=`${this.items[0]}`
          for(let i=1;i<this.count;i++){
               objectString=`${objectString},${this.items[i]}`
               }
         return objectString
            }
        }
 
  const stack = new Stack()
  stack.push(23)
  stack.push(34)
  stack.push(80)
  console.log( stack.pop())
  console.log(stack.peek())
  console.log(stack.isEmpty())
  console.log(stack.size())
  console.log(stack.toString())

在使用对象来模拟栈时,采用了键:值的方式 

来存储数据,比如this.items[this.count]=element

在这个结构中用this.count来记录栈的大小,

当我们向里面插入一个数字时,就分配count为键

插入的值为值。这个时候就需要将this.count++.

关于pop()与peek(),toString()方法都需要

先判断栈是否为空,如果为空则返回undefined。

4.总结

  • 了解了面向对象与面向过程
  • 掌握了两种方式用什么来模拟栈
  • 对栈模拟进行源码设计

到此这篇关于JavaScript数据结构与算法之栈详解的文章就介绍到这了,更多相关JS栈详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现跨域的方法实例详解

    js实现跨域的方法实例详解

    这篇文章主要介绍了js实现跨域的方法,实例分析了几种常用的javascript实现跨域的技巧,需要的朋友可以参考下
    2015-06-06
  • 微信小程序实现二维码签到考勤系统

    微信小程序实现二维码签到考勤系统

    这篇文章主要介绍了微信小程序实现二维码签到考勤系统,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • 根据一段代码浅谈Javascript闭包

    根据一段代码浅谈Javascript闭包

    水平不高,不能也不想从太深的层次去讲解这个东西,只是根据一段比较有代表性的代码,结合执行结果,从表象上粗浅地谈谈。
    2010-12-12
  • JS 9个Promise面试题

    JS 9个Promise面试题

    这篇文章主要介绍了JS 9个Promise面试题,对异步Promise感兴趣的同学,可以参考下
    2021-05-05
  • Jquery颜色选择器ColorPicker实现代码

    Jquery颜色选择器ColorPicker实现代码

    这里我要分享一个自己修改的颜色选择器,有需要的朋友参考下
    2012-11-11
  • JavaScript详细分析数据类型和运算符

    JavaScript详细分析数据类型和运算符

    这篇文章主要介绍了JavaScript数据类型和运算符案例,结合实例形式分析了JavaScript数据类型和运算符特性与相关操作技巧,需要的朋友可以参考下
    2022-07-07
  • tkinter使用js的canvas实现渐变色

    tkinter使用js的canvas实现渐变色

    这篇文章主要为大家介绍了tkinter使用canvas实现渐变色,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • js实现使用鼠标拖拽切换图片的方法

    js实现使用鼠标拖拽切换图片的方法

    这篇文章主要介绍了js实现使用鼠标拖拽切换图片的方法,涉及javascript操作图片实现轮播效果的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • 在组件外(.js文件)中使用pinia的解决方法

    在组件外(.js文件)中使用pinia的解决方法

    这篇文章主要给大家介绍了关于在组件外(.js文件)中使用pinia的解决方法, pinia是Vue的最新一代的轻量级状态管理插件,它允许跨组件/页面共享状态,需要的朋友可以参考下
    2024-06-06
  • JS+HTML实现的圆形可点击区域示例【3种方法】

    JS+HTML实现的圆形可点击区域示例【3种方法】

    这篇文章主要介绍了JS+HTML实现的圆形可点击区域,结合实例形式分析了javascript结合HTML元素属性实现一个圆形的可点击区域相关操作技巧,需要的朋友可以参考下
    2018-08-08

最新评论