栈是一种遵从后进先出(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. python爬虫—— 抓取今日头条的街拍的妹子图

    AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 近期在学习获取j ...

  2. 各种常见文件的hex文件头

    我们在做ctf时,经常需要辨认各种文件头,跟大家分享一下一些常见的文件头.   扩展名 文件头标识(HEX) 文件描述 123 00 00 1A 00 05 10 04 Lotus 1-2-3 spr ...

  3. 重大升级!SEER见证人,您的节点需要在10月28日前更新

    SEER的区块链底层目前还处于不断完善中.一些新的完善更新会为区块链的基础设施--节点软件添加新的功能.理事会将会就是否接受新的节点版本进行共识投票,如果提案投票通过,将要求所有见证人在指定时间前将节 ...

  4. spring源码系列8:AOP源码解析之代理的创建

    回顾 首先回顾: JDK动态代理与CGLIB动态代理 Spring中的InstantiationAwareBeanPostProcessor和BeanPostProcessor的区别 我们得知 JDK ...

  5. Cocos2d-x 学习笔记(11.7) Repeat RepeatForever

    1. 成员变量 Repeat: unsigned int _times; //create参数 unsigned int _total; //执行的次数 float _nextDt; //startW ...

  6. win server 2008R2 安装telnet 在VM虚拟机中

    服务器端: 第一步:  安装telnet 先固定,ip地址,因为虚拟机之间通信需要同网段,所以先固定ip, 第二步: 服务管理器>功能>添加功能 >服务器上安装服务器端telnet ...

  7. Python开发【第四篇】语句与函数

    语句 statement 语句是由一些表达式组成,通常一条语句可以独立的执行来完成一部分事情,并且形成结果. 多条语句写在一行内要用分号分开 例子: print('hello world') #这是一 ...

  8. 使用WSL中开发调试.NET Core

    安装WSL 1.打开WINDOWS功能,勾选子系统选项 2.打开商店搜索WSL,安装ubuntu 我这里的系统版本是:18.04 如何查看ubuntu系统版本 sudo lsb_release -a ...

  9. Git推送到多个远程仓库

    Git推送到多个远程仓库 Grey 原文地址 准备工作 在码云和Github上分别新建两个不包括任何文件的空仓库(若是两个已经有文件的仓库,请参见关联已经存在的项目) https://github.c ...

  10. perftools::tcmalloc

    安装libunwind wget http://ftp.yzu.edu.tw/nongnu/libunwind/libunwind-1.1.tar.gz ./configure make make i ...