Javascript数组系列一之栈与队列

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

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

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

var elements = ['first', 2, {age: 14}];

创建数组

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

1.通过构造函数创建

var arr1 = new Array(); //[]
var arr2 = new Array(3); //[,,] 创建一个包含三项的数组
var arr3 = new Array(3, 4) //[3, 4]
var arr4 = new Array('3'); //['3']
var arr5 = new Array('2','3'); //['2','3']

看到上面的结果简直蒙逼,因此可以看出参数传递的不同产生的结果也会不一样,而且结果令人惊讶,不过我们可以总结为:如果传入一位数值类型的参数时,则创建给一个定项的数组(例如 arr2 ),如果传入其他类型的参数时,则会创建一个包含当前参数的数组(例如 arr4, arr5),

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

2.通过字面量创建

var arr1 = [];
var arr2 = [1, 2];
var arr3 = ['1', '3'];

就是这么简单,粗暴,明了;是我们创建数组最常用的方法,而且这种方法创建还非常高效。

如何访问和设置数组

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

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

说到数组元素的个数我们不能不提到数组的一个属性了,那就是 length 属性,它会返回当前数组元素的个数,

而且 length 属性不是只读属性,它还可以去修改,因此我们利用 length 属性即可以添加数组的元素,还可以删除数组的元素。

var arr = ['first', 'second', 'three'];
console.log(arr[0]); //first
console.log(arr[1]); //second
console.log(arr[3]); //undefined

//利用 length 删除元素
arr.length = 2;
console.log(arr); //["first", "second"]

//利用 length 添加元素(可以利用此方法在数组的末尾添加元素)
arr[arr.length] = 'five';
console.log(arr); //["first", "second", "five"]

如何表现的和「栈」一样

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

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

简单来说,「栈」是一种数据结构,一种 LIFO (Last-In-First-Out)的数据结构,也就是后进先出,最新添加进来的元素最早被移出。

在 「栈」中添加数据和删除数据也被称为推入和弹出,而且推入和弹出只会发生在「栈」的顶部。

stack 图片

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

  • push : 向数组的末尾添加元素,可以传入任意数量的参数
  • pop:从数组的末尾删除最后一项,返回删除的元素,使数组的 length-1
var arr = ['A', 'B', 'C'];
arr.push('D');
console.log(arr); //['A', 'B', 'C', 'D']
var rem = arr.pop();
console.log(arr);//['A', 'B', 'C']
console.log(rem); // 'D'

如何表现的和 「队列」一样

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

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

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

队列
  • shift:删除数组的第一个元素,返回删除的元素,使数组的 length-1可以看出它与pop()方法刚好相反
var arr = ['A', 'B', 'C'];
arr.push('D');
console.log(arr); //['A', 'B', 'C', 'D']
var rem = arr.shift();
console.log(arr);//['B', 'C', 'D']
console.log(rem); // 'A'

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

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

队列2
  • unshift():在数组的开头添加任意个数的元素
var arr = ['A', 'B', 'C'];
arr.unshift('D');
console.log(arr); //[ 'D', 'A', 'B', 'C']
var rem = arr.pop();
console.log(arr);//['D', 'A', 'B']
console.log(rem); // 'C'

总结

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

本文原创文章发布于微信公众号:Modeng。关注并回复 「前端书籍」百本经典技术书籍免费领取,你懂的!

系列文章列表:

  1. 《Javascript数组系列一之栈与队列》
  2. 《Javascript数组系列二之迭代方法1》https://cloud.tencent.com/developer/article/1339842)
  3. 《Javascript数组系列三之迭代方法2》
  4. 《Javascript数组系列四之数组的转换与排序sort》
  5. 《Javascript数组系列五之增删改和强大的 splice》(https://www.modenng.com/2018/09/17/array-slice-splice-concat-tutorial/)

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏诸葛青云的专栏

C语言初学者必须掌握的关键字!

其实小伙伴在写代码的时候,关键字还是用的比较多的,老九主要就平常中用到的常用关键字进行总结,便于小伙伴们更全面的理解其在代码中的意图。

6900
来自专栏北京马哥教育

深入 Python 字典的内部实现

字典是通过键(key)索引的,因此,字典也可视作彼此关联的两个数组。下面我们尝试向字典中添加3个键/值(key/value)对: 这些值可通过如下方法访问: 由...

410150
来自专栏Java面试通关手册

最最最常见的Java面试题总结——第二周

String类中使用字符数组:private final char value[]保存字符串,所以String对象是不可变的。StringBuilder与Str...

13120
来自专栏吴裕超

es6 Object的几个新方法

ES5 的 Object.preventExtensions 则可以阻止给对象添加新属性

11030
来自专栏奇点大数据

Scala语言学习笔记一

Scala是一门小众的语言,但是作者因为工作原因要以Spark作为工作中的一个重心,而Spark采用了Scala语言编写,于是萌生了认真学习Scala的念头,在...

37440
来自专栏小樱的经验随笔

数据结构学习笔记【持续更新】

数据结构概述:   定义:     我们如何把现实中大量而复杂的问题以特定的数据类型和特定的存储结构保存到保存到主存储器(内存)中,     以及在此基础上为实...

23530
来自专栏web前端教室

浅谈数据结构 - 字典

浅淡,真的是很浅。Orz.. 先摆出定义,这里的字典是啥样的? 是以键-值对形式保存数据的一种结构。 现实中比较典型的例子,就是以前的电话本。你想找一个单位的电...

202100
来自专栏coding for love

JS入门难点解析3-作用域

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

11220
来自专栏C/C++基础

C++嵌套类与局部类

定义嵌套类的初衷是建立仅供某个类的成员函数使用的类类型。目的在于隐藏类名,减少全局的标识符,从而限制用户能否使用该类建立对象。这样可以提高类的抽象能力,并且强调...

8910
来自专栏程序员互动联盟

【专业技术】C++里面重要的几个关键字的用法

编者按: 这几个关键字非常重要,程序中经常见到他们的身影,但是确切意思有时候还需要多搜索下才能知道。笔者这里把它搬出来,也是希望大家引起重视,努力掌握它。 C+...

37370

扫码关注云+社区

领取腾讯云代金券