栈是一种遵从后进先出(LIFO)原则的有序集合。新添加或待删除的元素都保存在栈的同 一端,称作栈顶,另一端就叫栈底。在栈里,新元素都靠近栈顶,旧元素都接近栈底。

栈拥有以下方法:

push(element): 元素入栈, 添加一个或多个新元素到栈顶

pop(): 元素出栈,移除栈顶的元素,同时返回被移除的元素

peek(): 返回栈顶的元素,不对站内元素做任何修改

isEmpty(): 判断栈是否为空,如果栈内没有任何元素就返回true,否则返回false

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

size(): 返回栈里的元素个数,该方法和数组的length属性类似

说明:

  数组的头部就是栈底,数组的尾部就是栈顶

因为是基于javascript的数组构建的栈,所以会用到各种数组方法,首先创建一个类表示类,这里用到了ES6的语法,接下来便开始逐个实现栈中的6个常规方法。

s1.声明栈构造函数

 //在栈的构造函数中声明一个空数组用来保存栈内的元素
class Stack {
constructor() {
this.items = [];
}
}

s2.实现push()方法,元素入栈

使用数组的push方法,将元素放入数组的末尾,也就是栈结构中的栈顶。

push(element){
  this.items.push(element);
}

s3.实现pop()方法,元素出栈,并返回该元素

根据先进后出的原则,移除的元素是最后添加进栈的元素,这里使用数组的pop方法

pop() {
  return this.items.pop();
}

s4.实现peek()方法,查看栈顶元素,也就是最后添加进栈的元素

在数组中表现为数组最后一个索引位置的元素,访问数组的最后一个元素可以用 length -1

peek() {
return this.items[this.items.length - 1];
}

s5.实现isEmpty()方法,查看栈是否为空

其实就是判断数组的长度是否为0

isEmpty() {
  return this.items.length === 0;
}

s6.实现clear()方法,清空栈内所有元素

直接将数组重置为空即可

clear() {
  return this.items = [];
}

s7.实现size()方法,返回栈的长度

在数组中的表现就是返回数组的length

size() {
  return this.items.length;
}

  至此,基于数组搭建的栈就完成了,接下来就开始测试一下!下面的代码直接复制就可以用了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> </title>
</head>
<body>
<h1>测试 栈</h1>
<script>
//在栈的构造函数中声明一个空数组用来保存栈内的元素
class Stack {
constructor() {
this.items = [];
} push(element){
this.items.push(element);
} pop() {
return this.items.pop();
} peek() {
return this.items[this.items.length - 1];
} isEmpty() {
return this.items.length === 0;
} clear() {
return this.items = [];
} size() {
return this.items.length;
}
}
//首先实例化一个栈对象
const stack = new Stack(); stack.push(12); //进栈
stack.push(20);
console.log(stack.isEmpty()); //输出false
console.log(stack.pop()); //输出20,这里移除了栈顶元素20,并返回了
console.log(stack.peek()); //输出12,这是返回元素,12依然保存在栈中 console.log(stack.size()); //输出1 stack.clear(); //清栈,此时栈空了
console.log(stack.isEmpty()); //输出true
</script>
</body>
</html>

  

后面会再写一篇基于JavaScript对象搭建的栈结构实现。纯手打不易,转载请注明出处!

<html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>    </title></head><body><h1>测试 栈</h1><script>//在栈的构造函数中声明一个空数组用来保存栈内的元素class Stack {constructor() {this.items = [];}push(element){this.items.push(element);}
pop() {return this.items.pop();}
peek() {return this.items[this.items.length - 1];}
isEmpty() {return this.items.length === 0;}
clear() {return this.items = [];}
size() {return this.items.length;}}//首先实例化一个栈对象const stack = new Stack();
stack.push(12);//进栈stack.push(20);console.log(stack.isEmpty());//输出falseconsole.log(stack.pop());//输出20,这里移除了栈顶元素20,并返回了console.log(stack.peek());//输出12,这是返回元素,12依然保存在栈中
console.log(stack.size());//输出1
stack.clear();//清栈,此时栈空了console.log(stack.isEmpty());//输出true</script></body></html>

javascript创建一个基于数组的栈结构的更多相关文章

  1. javascript创建一个基于对象的栈结构

    上篇博客介绍了基于数组创建一个栈,这是用对象创建一个栈 s1.声明一个Stack类 class Stack { constructor() { this.count = 0; this.items = ...

  2. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  3. 在C#/.NET应用程序开发中创建一个基于Topshelf的应用程序守护进程(服务)

    本文首发于:码友网--一个专注.NET/.NET Core开发的编程爱好者社区. 文章目录 C#/.NET基于Topshelf创建Windows服务的系列文章目录: C#/.NET基于Topshelf ...

  4. 如何创建一个基于 MSBuild Task 的跨平台的 NuGet 工具包

    MSBuild 的 Task 为我们扩展项目的编译过程提供了强大的扩展性,它使得我们可以用 C# 语言编写扩展:利用这种扩展性,我们可以为我们的项目定制一部分的编译细节.NuGet 为我们提供了一种自 ...

  5. 如何创建一个基于命令行工具的跨平台的 NuGet 工具包

    命令行可是跨进程通信的一种非常方便的手段呢,只需启动一个进程传入一些参数即可完成一些很复杂的任务.NuGet 为我们提供了一种自动导入 .props 和 .targets 的方法,同时还是一个 .NE ...

  6. 基于数组的栈(Java)

    package com.rao.linkList; /** * @author Srao * @className ArrayStack * @date 2019/12/3 13:41 * @pack ...

  7. CXF 入门:创建一个基于WS-Security标准的安全验证(CXF回调函数使用,)

    http://jyao.iteye.com/blog/1346547 注意:以下客户端调用代码中获取服务端ws实例,都是通过CXF 入门: 远程接口调用方式实现 直入正题! 以下是服务端配置 ==== ...

  8. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  9. 如何创建一个基于 .NET Core 3 的 WPF 项目

    在 Connect(); 2018 大会上,微软发布了 .NET Core 3 Preview,以及基于 .NET Core 3 的 WPF:同时还发布了 Visual Studio 2019 预览版 ...

随机推荐

  1. 基于HTML5 WebGL的工业化3D电子围栏

    前言 现代工业化的推进在极大加速现代化进程的同时也带来的相应的安全隐患,在传统的可视化监控领域,一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控,本系统采用 Hightopo 的 ...

  2. 解决使用MUI时mui-slider-item高度不一致的自适应问题

    今天在写一个MUI项目的时候,发现使用slider时,最高的mui-slider-item会把mui-slider-group撑开,而其他的mui-slider-item下面会出现很大的空白. 百度了 ...

  3. iOS 组件化路由框架 WisdomRouterKit 的应用

    [前言] 大家好,写作是为了和读者沟通交流,欢迎各位开发者一起了解 WisdomRouterKit SDK 的功能. 关于 iOS 组件化路由方案框架: WisdomRouterKit 的功能介绍,之 ...

  4. kotlin系列文章 --- 2.基本语法

    函数 函数定义使用fun关键字,参数格式为:参数:类型,需要声明返回类型 fun sum(a:Int, b:Int): Int{ return a+b } 表达式作为函数体,返回值类型自动推断 fun ...

  5. 多线程下的wait为什么可以不需要notify

    多线程下的wait方法就像我无处安放的青春,胡乱来,感觉没有一点套路.wait后不需要notify仍可以继续执行.所以我决定看看到底咋回事..... 先结合join方法了解一下. join方法是可以等 ...

  6. Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行

    本文将对如何在Java程序中操作Word表格作进一步介绍.操作要点包括 如何在Word中创建嵌套表格. 对已有表格添加行或者列 复制已有表格中的指定行或者列 对跨页的表格可设置是否禁止跨页断行 创建表 ...

  7. 渗透系统虚拟机----win7(渗透工具包)

    今天把自己用的win7渗透虚拟机和渗透工具脚本整合到一起备份传网盘了: D:\渗透工具包>dir 驱动器 D 中的卷是 DATA 卷的序列号是 0D74-084B D:\渗透工具包 的目录 // ...

  8. cobalt strike批量发送钓鱼邮件

    0×01 利用Cobalt strike生成木马 这里我们生成木马可以用cs带的HTA.OFFICE宏.word宏来使目标上线cs,这里以word宏病毒为例子. 首先我们需要制作一个word宏病毒来进 ...

  9. 数据结构c语言

    这篇博客是为了对数据结构进行一系列的学习整理,包括线性表,栈和队列,串,数组和广义表,树和二叉树,图,动态储存管理,查找,内部排序,外部排序文件进行部分笔记的记录. 基本概念和术语 数据:是对客观事物 ...

  10. qt读取文本

    直接 代码: // lyy : 2016/8/26 16:40:11 说明:读取文本 bool FileOpeartion:: GetTheTextContent (const QString str ...