资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Javascript数组系列一之栈与队列

Javascript数组系列一之栈与队列

sunsmell / 1567人阅读

摘要：所谓数组英语，是有序的元素序列。组成数组的各个变量称为数组的分量，也称为数组的元素，有时也称为下标变量。在栈中添加数据和删除数据也被称为推入和弹出，而且推入和弹出只会发生在栈的顶部。栈是一种数据结构，而队列则是一种的数据结构，即先进先出。

所谓数组（英语：Array），是有序的元素序列。 若将有限个类型相同的变量的集合命名，那么这个名称为数组名。 组成数组的各个变量称为数组的分量，也称为数组的元素，有时也称为下标变量。 －－－百度百科

简单理解，数组就是数据的有序列表。

Array 在 Javascript 中属于最常用的数据类型之一了，与其它语言一样 Javascript 中的数组也是数据的有序列表，但是与其他语言有所不同的是，它可以用于保存任何数据类型，而且数组的长度是可以动态调整的。

</>复制代码 
  1. var elements = ["first", 2, {age: 14}];
创建数组

既然认识了数组，那我们先看怎么创建一个数组吧！Javascript 提供两种创建数组的方法。

1.通过构造函数创建

</>复制代码 
  1. var arr1 = new Array(); //[]
  2. var arr2 = new Array(3); //[,,] 创建一个包含三项的数组
  3. var arr3 = new Array(3, 4) //[3, 4]
  4. var arr4 = new Array("3"); //["3"]
  5. var arr5 = new Array("2","3"); //["2","3"]
</>复制代码 
  1. 看到上面的结果简直蒙逼，因此可以看出参数传递的不同产生的结果也会不一样，而且结果令人惊讶，不过我们可以总结为：如果传入一位数值类型的参数时，则创建给一个定项的数组（例如 arr2 ），如果传入其他类型的参数时，则会创建一个包含当前参数的数组（例如 arr4， arr5），

我们这个方法比较坑，所以一般不会使用这个方法去创建数组，那么我们继续看下一个方法如何创建数组的。

2.通过字面量创建

</>复制代码 
  1. var arr1 = [];
  2. var arr2 = [1, 2];
  3. var arr3 = ["1", "3"];
</>复制代码 
  1. 就是这么简单，粗暴，明了；是我们创建数组最常用的方法，而且这种方法创建还非常高效。
如何访问和设置数组

上面说到我们是如何创建一个数组，数组创建出来之后我们需要对数组中的元素进行访问或修改吧？下面我们就来看看吧

访问数组，通过索引访问数组中的元素，索引从 0 开始，如果访问的索引大于数组中元素的个数怎么办呢？结果肯定是找不到的，所以会返回 undefined 。

说到数组元素的个数我们不能不提到数组的一个属性了，那就是 length 属性，它会返回当前数组元素的个数，
而且 length 属性不是只读属性，它还可以去修改，因此我们利用 length 属性即可以添加数组的元素，还可以删除数组的元素。

</>复制代码 
  1. var arr = ["first", "second", "three"];
  2. console.log(arr[0]); //first
  3. console.log(arr[1]); //second
  4. console.log(arr[3]); //undefined
  5. //利用 length 删除元素
  6. arr.length = 2;
  7. console.log(arr); //["first", "second"]
  8. //利用 length 添加元素(可以利用此方法在数组的末尾添加元素)
  9. arr[arr.length] = "five";
  10. console.log(arr); //["first", "second", "five"]
如何表现的和「栈」一样

想要知道数组怎么表现的和「栈」一样，首先我们先来了解一下什么是「栈」。

在这里我们不深究「栈」，如果深究下去一时半会我们也说不清楚，也不是我们本文的重点。

简单来说，「栈」是一种数据结构，一种 LIFO (Last-In-First-Out)的数据结构，也就是后进先出，最新添加进来的元素最早被移出。
在 「栈」中添加数据和删除数据也被称为推入和弹出，而且推入和弹出只会发生在「栈」的顶部。

Javascript 提供为数组提供了两个方法以便于我们实现「栈」的行为，下面我们就来看看吧。

push : 向数组的末尾添加元素，可以传入任意数量的参数

pop：从数组的末尾删除最后一项，返回删除的元素，使数组的 length-1

</>复制代码 
  1. var arr = ["A", "B", "C"];
  2. arr.push("D");
  3. console.log(arr); //["A", "B", "C", "D"]
  4. var rem = arr.pop();
  5. console.log(arr);//["A", "B", "C"]
  6. console.log(rem); // "D"
如何表现的和 「队列」一样

上回我们说到 Javascript 中的数组可以有「栈」一样的行为，那么它也可以表现出和「队列」一样的行为。

「栈」是一种 LIFO 数据结构，而「队列」则是一种 FIFO（First In First Out）的数据结构，即先进先出。

数据在「队列」的末尾添加元素，在前端移出元素，上面说到我们可以利用 push 方法在数组的末尾添加元素，那么什么方法在数组的前端去移出元素呢？答案就是 shift() 方法。

shift：删除数组的第一个元素，返回删除的元素，使数组的 length-1

</>复制代码 
  1. 可以看出它与pop()方法刚好相反
</>复制代码 
  1. var arr = ["A", "B", "C"];
  2. arr.push("D");
  3. console.log(arr); //["A", "B", "C", "D"]
  4. var rem = arr.shift();
  5. console.log(arr);//["B", "C", "D"]
  6. console.log(rem); // "A"

我们可以看到上面我们是在末尾添加元素，前端删除元素，但是我们可以不可以在前端添加元素，在末尾删除元素呢？也就是说我们能不能反向模拟「队列」。

Javascript 中为我们提供了一个方法然后我们配合pop()方法我们就可以实现反向的模拟。那就是 unshift()。

unshift()：在数组的开头添加任意个数的元素

</>复制代码 
  1. var arr = ["A", "B", "C"];
  2. arr.unshift("D");
  3. console.log(arr); //[ "D", "A", "B", "C"]
  4. var rem = arr.pop();
  5. console.log(arr);//["D", "A", "B"]
  6. console.log(rem); // "C"
总结

「数组」在 Javascript 中是最为常见的引用类型的数据结构，其重要性是不言而喻的，因此「数组」也拥有比较多的方法，如果一个篇幅写下来会非常非常的长，这样不仅不利于阅读而且也非常考验读者对耐性，细水长流，所以我们分两篇文章去介绍，如果你对文章感兴趣，可以持续关注，如果喜欢呢，你也可以转发，点赞，对作者也是一种支持！

关注微信公众号：六小登登。领取全套学习资源

云服务器 GPU云服务器 javascript专题系列 javascript深入系列 php数组模拟队列 javascript实现队列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97518.html

相关文章

  • Javascript数组系列五之增删改和强大的 splice()

    摘要：删除数组元素的开始索引需要删除元素的个数，插入数组的元素语法因为参数变化多样，我们主要从三个方面来展示的用法。 今天是我们介绍数组系列文章的第五篇，也是我们数组系列的最后一篇文章，只是数据系列的结束，所以大家不用担心，我们会持续的更新干货文章。 生命不息，更新不止！ 今天我们就不那么多废话了，直接干货开始。 我们在《Javascript数组系列一之栈与队列》中描述我们是如何利用 pus...

    chavesgu 评论0 收藏0

  • 学习数据结构与算法之栈与队列

    摘要：于是翻出了机房里的这本学习数据结构与算法开始学习程序员的基础知识。这本书用了我最熟悉的来实现各种数据结构和算法，而且书很薄，可以说是一本不错的入门教程。队列在头部删除元素，尾部添加元素。 本系列所有文章：第一篇文章：学习数据结构与算法之栈与队列第二篇文章：学习数据结构与算法之链表第三篇文章：学习数据结构与算法之集合第四篇文章：学习数据结构与算法之字典和散列表第五篇文章：学习数据结构与算...

    pingan8787 评论0 收藏0

  • Javascript数组系列二之迭代方法1

    摘要：我们在数组系列一之栈与队列中介绍了一些数组的用法。该方法接受两个参数，一个是元素每一项执行的回调函数，一个是可选参数，回调函数运行时的值。今天我们就说这么多，希望你有所收获，接下来还请继续关注，我们继续来说数组的其他一系列的方法。 我们在《avascript数组系列一之栈与队列》中介绍了一些数组的用法。比如：数组如何表现的和「栈」一样，用什么方法表现的和「队列」一样等等一些方法，因为 ...

    tylin 评论0 收藏0

  • 学习数据结构与算法之链表

    摘要：本系列所有文章第一篇文章学习数据结构与算法之栈与队列第二篇文章学习数据结构与算法之链表第三篇文章学习数据结构与算法之集合第四篇文章学习数据结构与算法之字典和散列表第五篇文章学习数据结构与算法之二叉搜索树简单介绍链表链表一种常见的数据结构，可 本系列所有文章：第一篇文章：学习数据结构与算法之栈与队列第二篇文章：学习数据结构与算法之链表第三篇文章：学习数据结构与算法之集合第四篇文章：学习数...

    jerryloveemily 评论0 收藏0

发表评论

登陆后可评论

0条评论

sunsmell

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<