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 相关文章推荐
Jquery读取URL参数小例子
Aug 30 Javascript
js字符串转成JSON
Nov 07 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
Vue程序调试的方法
Jun 17 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
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
IIS6的PHP最佳配置方法
2007/03/19 PHP
PHP伪造referer实例代码
2008/09/20 PHP
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
JavaScript游戏之优化篇
2010/11/08 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
Python易忽视知识点小结
2015/05/25 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
python使用epoll实现服务端的方法
2018/10/16 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python SVM 线性分类模型的实现
2019/07/19 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
PyQt5实现画布小程序
2020/05/30 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
仓库主管的岗位职责
2013/12/04 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
个人委托书范文
2015/01/28 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
MySQL笔记 —SQL运算符
2022/01/18 MySQL