1. 前言

栈,是一种遵从后进先出(LIFO,Later-In-First-Out)原则的有序集合。新添加的元素都保存在栈的一端,称作栈顶,另一端叫做栈底。在栈中,新元素都靠近栈顶,旧元素都靠近栈底。

2. 功能说明

  1. push(value):添加一个新元素到栈顶
  2. pop():移除栈顶的元素,同时返回该元素
  3. peek():获取栈顶的元素
  4. isEmpty():判断栈是否为空。是返回true,否返回fallse
  5. clear():清空栈里的元素
  6. size():获取栈里元素的个数

3. 代码实现

首先,先创建一个类表示栈,并且初始化一个空数组,用来保存栈里的元素

  1. class Stack {
  2. constructor() {
  3. this.items = [];
  4. };
  5. }

接着,在这个栈类中实现所需要的功能:

  1. class Stack {
  2. constructor() {
  3. this.items = [];
  4. };
  5.  
  6. push(value) {
  7. this.items.push(value);
  8. };
  9.  
  10. pop() {
  11. return this.items.pop();
  12. };
  13.  
  14. peek() {
  15. return this.items[this.items.length - 1];
  16. };
  17.  
  18. isEmpty() {
  19. return this.items.length === 0;
  20. };
  21.  
  22. clear() {
  23. return this.items = [];
  24. };
  25.  
  26. size() {
  27. return this.items.length;
  28. }
  29. }

4. 测试

  1. var stack = new Stack();
  2. stack.push(5);
  3. stack.push(6);
  4. stack.push(7);
  5. console.log(stack.pop());
  6. console.log(stack.peek());
  7. console.log(stack.isEmpty());
  8. console.log(stack.size());
  9. console.log(stack.clear());
  10. console.log(stack.size());
  11. console.log(stack);

5.完整代码

完整代码请戳☞☞☞Stack.js

(完)

原生JS实现栈结构的更多相关文章

  1. js实现栈结构

    实现栈结构 //创建栈 function Stack (){ let items = [] this.push = function(element){ items.push(element) } t ...

  2. 原生JS实现集合结构

    1. 前言 集合是由一组无序且唯一(即不能重复)的项组成的.你可以把集合想象成一个既没有重复元素,也没有顺序概念的数组.在ES6中已经内置了集合这一数据结构--Set.接下来,我们就用原生JS来实现这 ...

  3. 原生JS实现队结构及利用队列模拟‘击鼓传花’游戏

    1. 前言 队列,是一种遵从先进先出(FIFO,First-In-First-Out)原则的有序集合.队列在尾部添加新元素,并从顶部移除元素,最新添加的元素必须排在队列的末尾. 2.功能说明 enqu ...

  4. (js描述的)数据结构[栈结构](2)

    (js描述的)数据结构[栈结构](2) 一.什么是栈结构 1.一种受限制的线性结构,这种结构可以基于数组来实现. 2.可以抽象成一个容器,上面的是栈顶,底下的是栈底.所以仅允许对栈顶进行操作, 二.栈 ...

  5. 原生JS实现树状结构列表

    树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢? 这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染 ...

  6. JS数据结构与算法-栈结构

    一.认识栈结构 栈也是一种非常常见的数据结构,并且在程序中的应用非常广泛 数组 我们知道数组是一种线性结构,并且可以在数组的任意位置插入和删除数据. 但是有时候,我们为了实现某些功能,必须对这种任意性 ...

  7. Rails Guide--Working with JavaScript in Rails; 如何把jquery转化为原生js

    1 An Introduction to Ajax 打开网页的的过程也叫:request response cycel. JavaScript也可以request然后parse the respons ...

  8. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  9. 【CSS进阶】原生JS getComputedStyle等方法解析

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

随机推荐

  1. Android Studio 优秀插件: Parcelable Code Generator

    这里假设我们已经会使用 Parcelable 序列化一个对象了~~ 那么大家会发现 Parcelable 使用起来有些复杂,因为我们要自己复写 几个方法,而且当类的属性比较多的时候,我们就会难受了,又 ...

  2. classpath:类路径

    classpath:可以用于web.xml中获取spring springmvc配置文件的位置 用于sprnig配置文件中获取mapper的位置 classpath:可以获取到java目录下的,res ...

  3. php微信支付v3版本签名生成

    前几天需要对接微信支付卡包营销活动需要对接微信新版SDKv3版 签名生成规则,微信的官方文档里面说明的还算可以吧,不过个人觉得不太理想- -.  自己调试的时候调试了半天才找了错误原因. https: ...

  4. Cocos2d-x入门之旅[1]场景

    在游戏开发过程中,你可能需要一个主菜单,几个关卡和一个END的界面,如何组织管理这些东西呢? 和其他游戏引擎类似,Cocos也使用了场景(Scene) 这个概念 试想象一部电影或是番剧,你不难发现它是 ...

  5. 记录一次Metaspace扩容引发FGC的调优总结

    开始之前 在开始之前先记录一个我碰到的jvm调优的坑.那就是… 为啥我配置到idea64exe.vmoptions中的参数没有生效??? 由于之前一直是在mac上开发,本地开发时当需要优化jvm参数的 ...

  6. Huffman树及其编解码

    Huffman树--编解码 介绍:   Huffman树可以根据输入的字符串中某个字符出现的次数来给某个字符设定一个权值,然后可以根据权值的大小给一个给定的字符串编码,或者对一串编码进行解码,可以用于 ...

  7. Fiddler的基本使用

    目录 清空历史请求 请求所消耗的时间 发送的数据在 设置fiddler过滤请求 模拟弱网环境 Ctrl+R 拦截数据,拦截数据又称"打断点" fiddler开启的时候就是默认开始抓 ...

  8. 代码审计-四叶草杯线下awd比赛源码web2

    今晚简单来看看那天比赛的源码吧,比赛的时候还是有些慌没有好好去静下心看代码. awd给的题中的漏洞,都是那种可以快速让你利用拿到权限后得到flag的那种,特别复杂利用的一般没有. 建议先黑盒去尝试,例 ...

  9. Android Studio 1.5运行问题

    Error:Unable to start the daemon process: could not reserve enough space for object heap.Please assi ...

  10. Vue学习笔记和代码记录

    ## 安装 * 直接引入链接:建议初学者使用:* 通过node.js的NPM安装Vue:* 通过node.js的NPM安装Vue-cli脚手架(推荐安装方式): ## 基础 ### 数据类型 * 字符 ...