JavaScript数据结构学习之数组、栈与队列


Posted in Javascript onMay 02, 2017

前言

数据结构就是关系,没错,就是数据元素相互之间存在的一种或多种特定关系的集合。

常用的数据结构有:

数组,队列(queue),堆(heap),栈(stack),链表(linked list ),树(tree),图(graph)和散列表(hash)

本文主要介绍的是数组、栈与队列,下面来一起看看详细的介绍吧。

一、数组

数组是平时使用最常用的数据结构,在JavaScript中数组是动态的分配大小,在这里我不会介绍JavaScript里面数组的所有的方法,而是针对数据结构这个方向谈谈所用到的方法。

创建和初始化数组

//创建空数组
var array = new Array();
//[]
//初始化数组
var array = new Array(1,2,3);
var array = Array.of(1,2,3);//ES6的方法
//[1,2,3]
//创建大小为5的数组
var array = new Array();//ES6的方法
//[undefined,undefined,undefined,undefined,undefined]
//给数组赋值
var array = new Array();
array[0] = 1 ;
array[1] = 2 ;
array[2] = 3 ;
//[1,2,3]

添加元素

往数组后添加元素

var number = [1,2,3];
number[number.length] = 4;
//[1,2,3,4]
//或者
var number = [1,2,3];
number.push(4);
//[1,2,3,4]

往数组前面添加元素

var number = [1,2,3];
number.unshift(0);
//[0,1,2,3]
number.unshift(-2,-1);
//[-2,-1,0,1,2,3]

往数组的任意位置插入元素

运用splice方法

//在索引1后面添加2,3,4
var number = [1,5,6];
number.splice(1,0,2,3,4);
//[1,2,3,4,5,6]

删除元素

删除第一位

var number = [1,2,3];
number.shift();
//[2,3]

删除任意位置

使用splice方法删除数组任意位置的元素

var numebr = [1,2,3,4,5,6];
//如果想删除元素3
number.splice(2,1);
//[1,2,4,5,6]
//如果想删除元素4,5
number.splice(3,2);

排序

反序

var number = [3,2,1];
number.reverse();
//[1,2,3]

自然排序

var numebr = [2,3,4,1,3,7];
number.sort();
//[1,2,3,3,4,7]

自定义排序

这个自定义排序跟java里面实现comparator接口一个意思。用处可大了。

var number = [4,5,6,7,1,2,3,8,9,10,11,12,13];
number.sort();
//[1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9]

仿佛看起有点不对啊,我们应该想要的是
[1,2,3,4,5,6,7,8,9,10,11,12,13],这个时候我们就用自定义排序来解决这个问题

var number = [4,5,6,7,1,2,3,8,9,10,11,12,13];
function compare(a,b){
 if(a < b){
 return -1;
 }
 if(a > b){
 return 1;
 }
 return 0;
}
number.sort(compare);
//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

这还只是最简单的,也可以对任何对象类型进行数组排序。例如,对象Person有名字和年龄属性,我们希望根据年龄排序

var friends = [{name:'李晨',age:40},{name:'范冰冰',age:35}];
function comparePerson(a,b){
 if(a.age < b.age){
 return -1;
 }
 if(a.age > b.age){
 return 1;
 }
 return 0;
}
friends.sort(comparePerson);
//[{name:'范冰冰',age:35},{name:'李晨',age:40}]

搜索

搜索有两个方法:indexOf方法返回与参数匹配的第一个元素的索引,lastIndexOf返回与参数匹配的最后一个元素的索引。

var number = [1,3,4,3,56,6,7,4];
number.indexOf(3);//1
number.lastIndexOf(3)//3

二、栈

栈是一种遵循后进先出(LIFO)原则的有序集合。新添加的或待删除的元素都保存在栈的末尾,称作栈顶,另一端就叫栈底。在栈里,新元素都靠近栈顶,旧元素都接近栈底。在JavaScript中变量保存和函数调用都是用栈存储的。

首先创建一个类来表示一个栈,需要一种数据结构来保存栈里的元素。这里我们就选择刚学的数组:var items = [];
接下来,为我们的栈声明一些方法:

  1. push(elements(s)) :添加一个(或几个)新元素到栈顶
  2. pop() :移除栈顶的元素,同时返回被移除的元素
  3. peek() :获取栈顶的元素,不对栈做出任何修改
  4. isEmpty() :如果栈里没有任何元素就返回true,否则返回false;
  5. clear() :清空栈
  6. size() :返回栈元素的个数

如果上一节数组认真看了,我相信用JavaScript实现一个栈是非常简单的。在这里就直接来代码了,不用一个方法一个方法去解释了。

function Stack(){
 var items = [];
 this.push = function(element){
 items.push(element);
 }
 this.pop = function(){
 return items.pop();
 }
 this.peek = function(){
 return items[items.length-1];
 }
 this.isEmpty = function(){
 return items.length === 0;
 }
 this.size = function(){
 return items.length;
 }
 this.clear = function(){
 items = [];
 }
 this.print = funciton(){
 console.log(items.toString());
 }
}

三、队列

队列是遵循先来先服务(FIFO)原则的一组有序的项。队列在尾部添加新元素,并从顶部移除元素。最新添加的元素排在队列的末尾。

在现实生活中常见的例子就是排队。
在计算机科学中,一个常见的例子就是打印队列,先点击打印的文档会被先打印。

创建队列

同样先创建一个类来表示一个队列。需要用到的数据结构同样是数组var items = [];

声明可用的方法:

  • enqueue(element(s)) :向队尾添加一个(或多个)新的项
  • dequeue() :移除队列的第一(即排在队列最前面的)项,并返回被移除的元素。
  • front() :返回队列中第一个元素
  • isEmpty() :如果队列中不包含元素返回true,否则返回false
  • size() :返回队列包含元素的个数

完整的Queue类

function Queue(){
 var items = [];
 this.enqueue = function(element){
 items.push(element);
 }
 this.dequeue = function(){
 return items.shift();
 }
 this.front = function(){
 return items[0];
 }
 this.isEmpty = function(){
 return items.length === 0;
 }
 this.clear = function(){
 items = [];
 }
 this.size = funciton(){
 return items.length;
 }
 this.print = function(){
 console.log(items.toString());
 }
}

优先队列

在优先队列中,元素被赋予优先级。当访问元素的时,具有最高优先级的元素先删除。优先队列具有最高进先出的行为特征。例如:医院的急救室为病人赋予优先级(这个优先级可以指病情严重的成程度),具有最高优先级的病人最先得到治疗。

实现一个优先队列有两种选项:

  • 设置优先级,然后在正确的位置添加元素;
  • 用入列操作添加元素,然后按照优先级移除它们。

我们这里采用第一种。

function PriorityQueue(){
 var items = [];
 funciton QueueElement(element,priority){
 this.element = element;
 this.priority = priority;
 }
 function comparePriority(a,b){
 if(a.priority > b.priority){
  return 1;
 }
 if(a.priority < b.priority){
  return -1;
 }
 return 0;
 }
 this.enqueue = funciton(element,priority){
 var queueElement = new QueueElement(element,priority);
 items.push(queueElement);
 items.sort(comparePriority);
 }
 //其它方法和默认的Queue实现相同
}

当然,这个enqueue的实现方法很多种,我这效率不是最高的,但是容易理解。将插入的元素根据优先级排个序,那么先出去的就是优先级最高的了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript去除空格的几种方法
Oct 03 Javascript
重定向实现代码
Nov 20 Javascript
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
jquery操作select方法汇总
Feb 05 Javascript
javascript中var的重要性分析
Feb 11 Javascript
jQuery操作之效果详解
May 19 jQuery
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 #Javascript
详解webpack+es6+angular1.x项目构建
May 02 #Javascript
jQuery Tree Multiselect使用详解
May 02 #jQuery
bootstrap的常用组件和栅格式布局详解
May 02 #Javascript
Vuejs实现带样式的单文件组件新方法
May 02 #Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 #Javascript
老生常谈js-react组件生命周期
May 02 #Javascript
You might like
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
小学毕业寄语大全
2014/04/03 职场文书
节水倡议书范文
2014/04/15 职场文书
党员四风剖析材料
2014/08/27 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
个人先进事迹材料
2014/12/29 职场文书
运动员入场词
2015/07/18 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
2016大一新生军训感言
2015/12/08 职场文书