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 相关文章推荐
键盘KeyCode值列表汇总
Nov 26 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
如何将Node.js中的回调转换为Promise
Nov 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
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
js实现的网页颜色代码表全集
2007/07/17 Javascript
jQuery 全选效果实现代码
2009/03/23 Javascript
子页向父页传值示例
2013/11/27 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
vue better-scroll插件使用详解
2018/01/25 Javascript
微信小程序实现留言板
2018/10/31 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
Python 12306抢火车票脚本
2018/02/07 Python
Django的models中on_delete参数详解
2019/07/16 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
python绘制玫瑰的实现代码
2020/03/02 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
网络技术支持面试题
2013/04/22 面试题
餐厅执行经理岗位职责范本
2014/02/26 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
代理人委托书
2014/09/16 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL