JavaScript总结:关于堆栈、队列中push()、pop()、shift()、unshift()使用方法的理解

简介: JavaScript总结:关于堆栈、队列中push()、pop()、shift()、unshift()使用方法的理解

今天在学习js中发现push()、pop()、shift()、unshift()四种方法在栈和队列中的使用,发现结果和自己想像的不太一样,下面我们看代码和运行结果:


var stack = [];
  stack.push("栈1");       //push(ele):元素入栈,返回入栈后数组的长度
  stack.push("栈2");
  stack.push("栈3");
  console.log("这是堆栈");
  console.log(stack.push());
  console.log(stack.pop());  //pop():元素入栈,返回出栈的数组元素
  console.log(stack.pop());
  console.log(stack.push());
  var queue = [];
  queue.unshift("队列1");//unshift(ele):元素入队列,返回入队后数组的长度
  queue.unshift("队列2");
  queue.unshift("队列3");
  console.log("这是队列");
  console.log(queue.unshift());
  console.log(queue.shift()); //shift():元素入队列,返回出队列的数组元素
  console.log(queue.shift());
  console.log(queue.unshift());


栈按照先进后出的原则存储数据,先进入的数据被压入栈底,最后的数据在栈顶,需要读数据的时候从栈顶开始读出数据。


队列只允许在一端插入,在另一端删除,所以只有最早进入队列的元素才能最先从队列中删除,故队列又称为先进先出线性表。


这样看来,栈是先入后出,队是先入先出,按照这个思路来看,上面代码的输出结果应该是:

栈3 先出栈

栈2 后出栈


队列1 先出队列

队列2 后出队列


实际结果(在浏览器按F12):


2019021821001864.png


栈是先进后出没有问题,但是队列怎么感觉是先进后出了,哪里出错了???


我们应该仔细看一下数据结构,了解下面概念就不难理解了:


1、push()是用来在数组末端添加项,并且返回添加后数组的长度;

2、pop()在数组末端移除项,返回移除的数组元素;

3、unshift()在数组前端添加项,并且返回添加后数组的长度;

4、shift()在数组的第一个项(前端)移除,返回移除的数组元素。


所以队列还是符合先入先出的原则,只是我们要注意unshift()和shift()方法,都是在数组前端插入,在数组前端移除的。


我们上图理解:


使用unshift()方法:在数组前端插入


20190218205458217.png


使用shift()方法:在数组前端移除


20190218205740105.png


 

所以当我们使用unshift()和shift()方法共同操作队列的时候,输出结果是受影响的,并不是队列不符合先进先出的原则。

我们可以使用push()和shift()组合或者使用pop()和unshift()组合来使得队列的输出结果也是展示先进先出的效果。

示例代码:

var queue = [];
  queue.unshift("队列1");
  queue.unshift("队列2");
  queue.unshift("队列3");
  console.log("这是队列");
  console.log(queue.unshift());
  console.log(queue.pop());
  console.log(queue.pop());
  console.log(queue.unshift());


运行结果:


20190218210524594.png


探究之后便能理解了,希望可以帮助大家!

目录
相关文章
|
3月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
81 0
|
4月前
|
JavaScript 前端开发 API
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(下)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
38 0
|
4月前
|
分布式计算 JavaScript 前端开发
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
|
1月前
|
存储 JavaScript 索引
深入理解栈和队列(js的问题)
深入理解栈和队列(js的问题)
|
4月前
|
JavaScript 前端开发
js小功能--如何实现按住shift拖拽多选div
js小功能--如何实现按住shift拖拽多选div
34 0
|
9月前
|
JavaScript 前端开发
js正则表达式的作用及使用方法
js正则表达式的作用及使用方法
79 1
|
10月前
|
存储 算法 JavaScript
JavaScript 中的数据结构与算法:数组、链表、栈、队列等
在JavaScript中,数据结构和算法是非常重要的主题,它们用于有效地组织和处理数据。下面介绍几种常见的数据结构和算法:
|
5月前
|
JavaScript
【升级玩法】js用push、unshift、shift、pop或splice实现5张卡片(可以自由定义更多)轮播图效果banner、swiper
【升级玩法】js用push、unshift、shift、pop或splice实现5张卡片(可以自由定义更多)轮播图效果banner、swiper
|
5月前
|
JavaScript 前端开发
JavaScript题解剑指offer : 09. 用两个栈实现队列
JavaScript题解剑指offer : 09. 用两个栈实现队列
24 0
|
7月前
|
JavaScript
JS unshift() 方法
JS unshift() 方法
25 0