数组专题整理

引入

  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基础-数组相关推荐

  1. javaScript基础数组属性方法

    数组: 1.Array.push() 在数组末尾添加元素并返回新的长度 let arr = ["张三","李四","王五"]; consol ...

  2. JavaScript基础09-day11【原型对象、toString()、垃圾回收、数组、数组字面量、数组方法】

    学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...

  3. javascript基础系列:数组常用方法解析

    javascript基础系列:数组常用方法解析 今天是比较特殊的日子,我们编程人员共同的节日,1024,祝每个编程人员节日快乐! 数组是javascript必不可少的一项,今天让我们来总结一下数组操作 ...

  4. Javascript基础知识之四(常用数组方法)

    一.MDN链接 Array - JavaScript | MDNJavaScript的 Array 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象.https://developer.moz ...

  5. 【JavaScript基础】你真正了解如今的Js数组吗,看这篇就(Go)够了

    [JavaScript基础]你真正了解如今的Js数组吗,看这篇就(Go)够了

  6. JavaScript基础笔记集合(转)

    JavaScript基础笔记集合 JavaScript基础笔记集合   js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译   js存放的位置 html脚本必须放在< ...

  7. javascript基础语法——表达式

    前面的话 一般地,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但是,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression).本文将详 ...

  8. javascript基础系列(入门前须知)

    -----------------------小历史---------------------------- javascript与java是两种语言,他们的创作公司不同,JavaScript当时是借 ...

  9. 深入理解JavaScript类数组

    起因 写这篇博客的起因,是我在知乎上回答一个问题时,说自己在学前端时把<JavaScript高级程序设计>看了好几遍. 于是在评论区中,出现了如下的对话: 天啦噜,这话说的,宝宝感觉到的, ...

  10. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

最新文章

  1. 动态规划的用法——01背包问题
  2. 线程池,这一篇或许就够了
  3. 16位汇编 call调用函数 通过栈来传递参数
  4. jsp内置对象------session
  5. Sequence with Digits CodeForces - 1355A(暴力+数学)
  6. 统计学中【矩】的概念
  7. 摄像头图像分析目标物体大小位置_摄像头的原理、组成、选型及应用
  8. python语言语句块标记是_Python的基本语法——语句块
  9. Zipkin 基于MQ存 储链路信息至 MySQL
  10. python刷b站教程_【Python】【学习资源】B站上的Python学习资源
  11. Java进制间的转换
  12. pp助手苹果版本_腾讯桌球安卓和苹果系统如何进28以及怎么解决没有金币时的烦恼...
  13. c# word 在当前光标位置插入内容
  14. python逻辑回归模型建模步骤_从原理到代码,轻松深入逻辑回归模型!
  15. 鸿蒙系统手机一览表,四款华为鸿蒙系统手机推荐,后续可直接升级鸿蒙2.0
  16. MAX7219芯片 共阴LED驱动器 详细介绍
  17. HTML生日快乐代码 HTML5七夕情人节表白【告白模板】 HTML5七夕情人节表白网页源码 html css javascript
  18. STC8H8k64U——定时器T0(60s倒计时)
  19. Android通讯录模糊匹配搜索实现(号码、首字母、简拼、全拼)
  20. 处理机调度——看这一篇就够了

热门文章

  1. 【机器学习-分类】决策树预测
  2. 机器学习实战(Machine Learning in Action)学习笔记————02.k-邻近算法(KNN)
  3. 5G协议 基本架构 专有名词简称和缩写
  4. 2022年最好的游戏引擎是什么?
  5. 《CryENGINE+Game+Programming+with+C++,+C#,+and+Lua》第七章
  6. 2022年G1工业锅炉司炉考试试题及答案
  7. java面试宝典及答案
  8. 笔记本电脑开机后发现突然扫描不到WiFi网络(WiFi列表消失)
  9. Java中的Collections.sort()
  10. python游戏开发实战:行走系统之地图编辑器