前端有关数组方法详解

前端主要的职责是在合适的时候,从后台拿到合适的数据,渲染到合适的页面上面,可是在页面进行渲染的时候,我们不可能保证我们的数据完全适合于渲染,这个时候,我们需要对这些数据进行处理,将处理之后的数据渲染到页面上面去。那么在处理的过程中,我们不可避免用到数组上面的方法,可以说对数组操作方法是我们经常会用到的。那让我们一起来看看数组上一共有哪些方法可以使用,他们的区别是什么呢?
下面我按照不同的功能给所有操作数组的方法进行分类

检测数组方法
检测一个不明类型的值是否为数组的方法有很多,我只写出我比较熟悉的四种

1.Array.isArray: 这个方法是数组自带的,专门用来判断一个不明类型是否为数组类型,可以检测出这个数组是否是iframes,但是它只可以检测一个不明类型是否为数组,不能检测基本类型于其他的类型
2.instanceof 这个方法是es6上面的方法,它不是要检测当前对象是否为一个数组,是要检测这个原型链上面是否有array这个类型,如果有返回true, 无,返回false,这种方法不能检测基本类型,只要是Object类型都会返回true,这就意味着它是一个函数类型可能被误判成数组类型
3.Object.prototype.toString.call 是es5版的instanceof,
能很方便地检测出一个不明类型是否为Array, 还是Object类型, 不过无法检测出基本类型,都将识别成Function
4.typeof 只能大致检测出一个不明类型是否为Object类型(其中Object类型是包含数组类型的,能较为方便地检测出基本类型如undefined, number,bigInt, string,boolean,null, symbol ),并不能详细地检测出一个数组是否为数组类型

转换方法
1.toString将一个数组里面的转换成一个字符串,字符串之间是带逗号隔开的,直接转换无需加参数
2.join方法也是将数组转换成字符串,join可以带参数,join不带参数,默认是按照 “,”" 间隔开来,如果带参数,则按照参数间隔开来
栈方法
栈方法是后进先出,我是后面进来的,但是我先出去
1.push 这个方法主要是在数组的尾部, 添加一个或者多个数据 ,这个数据可以是任意类型的,返回数组的长度
2.pop从数组的尾部弹出一个数据,每次只能弹出一个数据,不需要添加参数,并且每次返回的是弹出的数据

队列方法
先进先出
1.unshift 在数组的头部添加一个或者是多个数据,可以是任意类型,返回数组最新的长度
2.shift在从数组的头部移除一个数据,返回移除的最新数据

寻找位置方法
1.indexOf 从左向右开始查找是否有某个值,如果有返回该值的位置,如果没有返回 -1, arr.indexOf(a, b),其中a是要查找的值,b是开始查找的位置,如果返回查找位置之后该值的位置
2.lastIndexOf是从右向左开始进行查找,其中也arr.lastIndexOf(a, b),其中a是要查找的值,b是开始查找的位置,如果返回查找位置之后该值的位置,

排序方法
1.sort : 如果直接是使用sort进行排序,是对编码进行排序,如[1, 22, 3, 44]这个不会按照大小排序;如果想要按照大小进行使用sort((a, b) => {return a-b})(从小到大进行排序) sort((a, b) {return b -a})(从大到小进行排序) 对原数组直接操作
2.reverse: 这个方法是将数组整体的值翻转过来,互换位置, 比如 [1, 2, 3]变成[3, 2, 1],这个在算法里是有很多方法实现的,比如双指针,循环等 对原数组直接操作

归并方法
1.reduce
reduce((pre, current, index, array)),其中pre是上次返回结果,current是当前值,index是索引, array是数组的意思,reduce会从数组的第一项开始遍历,直到最后一项,数组有几项,reduce就会遍历几次,用到几个参数,取决于实际应用场景,假设当前有一个数组,类型如下let arr = [{done: true}, {done: false}…],简写,假设我们要获取当前数组中的done个数为假的个数,那么我们用如下代码可以取得done为假个数, arr.reduce((pre, current)=> pre + (current.done == false ? 1: 0), 0}) 后面参数0的意思是从下标为0的数组项开始,代码中的pre默认值是0.(并不会对原数组造成影响)
2.reduceRight
reduceRight与reduce方法类似,不过reduceRight是从数组的右边开始读取数据的。(并不会对原数组造成影响)

操作方法
1.concat
concat是将多个数组合并成一个数据,当遇到[{}, {}]这种格式的数据需要合并处理时,可以使用这种方法,返回的是一个新数组,(不会对原数组有影响)
2.slice
可以接受两个参数,两个参数都是位置参数,截取某个位置到某个位置之间的数据,不会对原来数组造成影响;如果第二个参数不进行传输的话。 默认值为-1,也就是会截取是其长度加1的位置;
3.splice
这个方法可以接受三个参数,根据它接受参数个数的不同,可以分为给数组添加,删除,更改
删除
splice(x, 12): 前一个参数是从那个位置开始删除,后面的参数是删除数组中数据的个数
添加
splice(x,0, … ): x是从某个位置开始, 0是不对数据进行删除, …是删除的意思
替换
splice(x, y, y):x是从某个位置开始, 第二个参数y是删除的个数,第三个参数y是添加的参数, y个

迭代方法
都不对原数组造成影响

every()
这个方法可以接受三个参数,every((item, index, array)), item: 数组里面的数据, index: 是数组的下标, array:是数组本身, 一般every多用于判断数组里面的每一个值是否满足某一条件,满足就返回true, 否则返回false, 假设这边有个学生成绩统计系统,要对学生的成绩进行统计,老师输入成绩后,有一项指标是判断所有的人某项学科的成绩是否都大于60(及格分), studentMathScoreAggregate.every((score, index, array) => score >=60)

some()
这个方法也是接受三个参数 some((item, index, array)),一个为真时就返回真。

filter()
filter((item, index, array)) 这个方法是个过滤器 , 可以过滤掉不需要的元素
forEach((item, index, array)):对整个数组进行遍历,对每个数据进行处理,之后返回相应的数据

map((item, index, array))
操作函数中的每一项,返回每次函数调用的结果组成的数组。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值