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中实现标签切换效果的代码
Mar 01 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
js实现小星星游戏
Mar 23 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
Vue中 axios delete请求参数操作
Aug 25 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
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
php动态变量定义及使用
2015/06/10 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
WAF的正确bypass
2017/01/05 PHP
php实现小程序支付完整版
2018/10/09 PHP
PHP count()函数讲解
2019/02/03 PHP
50个比较实用jQuery代码段
2011/09/18 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
javascript常用的方法整理
2015/08/20 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python批量转换文件编码格式
2015/05/17 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
航海技术专业毕业生求职信
2014/04/06 职场文书
同居协议书范本
2014/04/23 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
Java数组详细介绍及相关工具类
2022/04/14 Java/Android