栈是一种遵从后进先出（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. 用深度学习做命名实体识别(六)-BERT介绍

    什么是BERT? BERT,全称是Bidirectional Encoder Representations from Transformers.可以理解为一种以Transformers为主要框架的双 ...

  2. Scala 占位符在REPL和Eclipse/IDEA中初始化变量问题

    占位符在REPL和Eclipse/IDEA中初始化变量问题: 占位符初始化,如果是局部变量,都会报错!只能在全局变量中使用! REPL: Eclipse: IDEA: 如果是类的属性,却就是对的.

  3. 写了那么多年 Java 代码，终于 debug 到 JVM 了

    继上篇文章 原创 | 全网最新最简单的 openjdk13 代码编译 之后,我们有了自己编译后的 jdk 和 hotspot,如下图所示.接下来就来干一番事情. 搭建调试环境 1.下载 CLion 软 ...

  4. JSON parse error: No suitable constructor found for type

    错误信息: 2019-02-19 09:17:58,678 [http-nio-8080-exec-1] WARN org.springframework.web.servlet.mvc.suppor ...

  5. 02-18 scikit-learn库之k近邻算法

    目录 scikit-learn库之k近邻算法 一.KNeighborsClassifier 1.1 使用场景 1.2 代码 1.3 参数详解 1.4 方法 1.4.1 kneighbors([X, n ...

  6. Java字符串课后作业

    [实验任务] 1.实验题目:字串加密 2.实验内容:古罗马皇帝凯撒在打仗时曾经使用过以下方法加密军事情报:

  7. 使用Swagger服务搭建.Net Core API

    使用Swagger服务搭建.Net Core API 创建.Net Core API 新建项目.文件——新建——项目 选择应用程序模板. 设置存放路径,命名方案名称. 创建API. 搭建成功. 使用S ...

  8. PHP krsort

    1.什么都不想说了,干么没事放那么悲伤的歌呢?回忆里我还是对代码懵懵懂懂的无知青年!也许不是青年,只是少年... <?php $arr = [ 1 => 'Zhangbiyu', 2 =& ...

  9. luogu P4035 [JSOI2008]球形空间产生器

    [返回模拟退火略解] 题目描述 今有 n+1n+1n+1 个 nnn 维的点,它们都在一个球上.求它们所在球的球心. Solution 4035\text{Solution 4035}Solution ...

  10. 事业单位招聘网搭建思路和seo方法

    期望目标 自动采集事业单位招聘信息+自动发布到网站+自动提交网址到百度+自动发外链. 技术框架 前端用layUI,后端用flask,数据库用的elasticsearch,编程语言用Python 3.7 ...