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


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

目录
相关文章
|
7月前
three.js的Gui面板使用方法
three.js的Gui面板使用方法
345 0
|
7月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
304 0
|
7月前
|
JavaScript 前端开发 API
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(下)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
102 0
|
4月前
|
JavaScript 前端开发
js事件队列
js事件队列
146 55
|
3月前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
1月前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
|
2月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
54 6
|
2月前
|
缓存 JavaScript 前端开发
Node.js模块化的基本概念和分类及使用方法
Node.js模块化的基本概念和分类及使用方法
47 0
|
2月前
|
JavaScript 前端开发 容器
js之弹性布局使用方法
js之弹性布局使用方法
39 0
|
4月前
|
存储 前端开发 JavaScript
深入理解JavaScript调用堆栈
【8月更文挑战第20天】
85 3