Java教程

JavaScript基础-数组

本文主要是介绍JavaScript基础-数组,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

数组专题整理

引入

  1. 数据类型:ECMAScript中有5中简单数据类型(也称为基本数据类型),分别是Undefined,Null,Boolean,Number和String,还有一种复杂数据类型——Object
  2. JavaScript引用类型:Object类型、Array类型、Date类型、RegExp类型、Function类型、基本包装类型
  3. 好了补充了上述那些知识点,接下来让我们来聊聊数组那些事吧

数组那些事

在日常开发中,数组这种结构是我们最常用到的数据结构了,那么当后台接口给我们返回来一个数组需要我们进行处理时,处理数组的方法就显得尤为重要啦!!!那么小伙伴们,你在用到处理数组的方法时,是信手拈来呢还是需要去网上查阅资料呢?如果你是第二种情况,那就和笔者一起再一次复习一下处理数组的那些方法吧

  1. 判断某个值是不是数组——instanceof
    在这里插入图片描述

当我们需要判断某个值是否是数组时,我们可以用到instanceof方法,用法参考上图,它的返回值是一个布尔类型的值,因此方便我们判断后做一系列的操作。当然有的小伙伴要说了,为什么我们不用更为熟悉的typeof方法而要用instanceof 方法呢,我们通过下图来体会一下这两个方法到底有什么不同

在这里插入图片描述

我们发现typeof方法在判断obj和arr时,返回的都是object.这是因为typeof更多的是用来判断一个变量是否存在,而instanceof是用来检测某个对象是不是另一个对象的实例,instanceof 可以对不同的对象实例进行判断,判断方法是根据对象的原型链依次向下查询。

在这里插入图片描述

当我们使用 arr instanceof Array 判断arr 是否是数组时,instanceof 会沿着arr的原型链一直向下查询,发现有Array,就会返回true.

除了instanceof方法,我们也可以使用Array.isArray()方法来最终确定某个值到底是不是数组,不管这个值是在哪个全局执行环境中创建的

  1. 数组的栈方法—push和pop

    push方法用来向数组中添加元素,它可以接收任意数量的参数,并将他们逐个添加到数组末尾,并返回修改后的数组长度

在这里插入图片描述

​ pop方法则是用来删除数组中的元素,它是从数组末尾一处最后一项,并返回移除的项(这个方法我们用的较少,了解即可)
在这里插入图片描述

我们为什么称他们是数组中的栈方法呢(LIFO:Last-In-First-Out,后进先出),也就是最新添加的项最早被移除
  1. 数组中的队列方法—shift

    shift方法是用来移除数组中的项的,它能够移除数组中的第一个项,并返回该项。这就符合了队列数据结构的访问规则LIFO(First-In-First-Out,即先进先出)

在这里插入图片描述

  1. 重排序方法—reverser 和 sort

    reverser方法用来反转数组项的顺序

在这里插入图片描述

sort方法可以按升序排列数组项,但是由于其内部的操作顺序是先将数组的每一项转换成字符串再进行比较,因此闹出很多笑话,比如

在这里插入图片描述

很明显顺序是不正确的,因此sort方法是可以接收一个比较函数作为参数,如下
在这里插入图片描述


现在重点来啦,我们要来介绍操作数组的方法喽,小伙伴们打起精神吧

  1. 操作数组的方法
  • concat()方法,可基于当前数组中的所有项创建一个新数组(即拷贝本数组),并将接收到的数组拼接到新数组的末尾

    即连接两个数组,并不改变原始数组

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zSFQoVLo-1642670206597)(C:\Users\Lvan\AppData\Roaming\Typora\typora-user-images\image-20220120152015727.png)]!

  • slice()方法,可以截取数组元素但并不会改变原数组,它可以接收两个参数,即要返回项的起始和结束位置;如果只有一个参数,slice()方法返回从该参数到当前数组末尾的所有项

在这里插入图片描述

 **请注意大佬要来了!!!**
  • splice()方法,最强大的数组方法,在实际工作中使用最多的方法

    • 删除元素:需传两个参数,即要删除的第一项的位置和删除的个数

在这里插入图片描述

 + 插入元素:需传3个参数,即起始位置,要删除的项数,要插入的项

在这里插入图片描述

  1. 位置方法—indexOf()

    indexOf(),用来查找指定元素在数组中的位置,如果存在,则返回该元素的位置,如果不存在则返回-1;并且该方法可以接收两个参数,第一个是要查询的元素,第二个是从哪个位置开始查找。

  2. 迭代方法(遍历数组的方法)

    • every()方法:对数组中每一项运行给定函数,如果该函数对每一项都返回true,则返回true
      在这里插入图片描述

    • some()方法:…,如果该函数对任一项返回true,则返回true
      在这里插入图片描述

      看到没有,some方法和every方法是不是形成了鲜明的对比呢,要注意区分哦

    • filter()方法:…返回该函数会返回true的项组成的数组

在这里插入图片描述

  • map()方法:…返回每次函数调用的结果组成的数组

在这里插入图片描述

  • forEach()方法:对数组中每一项执行指定函数,该方法没有返回值。这个方法其实在日常工作中用的很多,但笔者想说大家可以尽可能根据逻辑,试着取用一下其他方法,或许更能更完美的实现我们想要的效果

    另外笔者要补充一下,通过forEach方法判断数组中的项是否满足某一条件时,如果逻辑是每一项必须满足,如有一项不满足,则跳出循环或返回false。forEach方法是不能满足这样的需求的,也就是说即使不满足这一条件,forEach也不会跳出循环。这时我们可以使用for循环或者通过上面提到的every方法来解决问题

  1. 归并方法(了解就好哦)—reduce和reduceRight

    reduce()方法和reduceRight()方法可接收四个参数,分别是前一项,当前项,当前项索引,数组对象。两方法唯一的不同就是reduceRight方法是从数组的最后一项开始向前遍历的。

好啦各位小伙伴,今天的知识分享到这里就结束喽,最后要说明一下哈:以上知识点(大部分)参考了JavaScript高级程序设计(第3版)这本书。笔者之所以心血来潮要整理数组的相关知识,也是因为在实际工作中意识到了JavaScript基础真的很重要!!!希望阅读这篇文章的小伙伴们能够有所收获,笔者在接下来的时间里也会继续以专题的形式整理JavaScript知识点的,希望大家多多支持啦。当然如果笔者整理的内容中有错误的地方,希望大家能够不吝赐教,让我们共同进步吧!!!

这篇关于JavaScript基础-数组的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!