JS数组常用方法大全

数组的方法有数组原型方法,也有从object对象继承来的方法,下面就介绍一下数组常用方法:
join() ————————数组转字符串
split() ———————–字符串转数组
push() ———————-将数据添加到数组尾部
pop() ———————–数组末尾移除最后一项
shift() ———————–删除原数组第一项
unshift() ——————–将数据添加到数组头部
sort() ————————按升序排列数组项
reverse() ——————–反转数组项的顺序
concat() ——————–多个数组合并,原数组不变
slice() ———————–返回开始下标到结束下标之间的项组成的新数组,原数组不变
splice() ———————-从数组中添加/删除项目,然后返回被删除的项目,改变原数组
indexOf() ——————-从数组第0项查找目标值,返回第一个值的下标,无返回-1
lastIndexOf() —————从数组最后查找目标值,返回第一个值的下标,无返回-1
every() ———————-数组中全部符合条件,返回true ,适用全选和取消全选的功能
some() ———————-数组中有一个符合条件,返回true
includes() ——————-判断数组是否包含指定的值 , 包含返回true , 否则返回false
reduce() ——————–常见用法可用于数组项求和、求最大值、去重
reduceRight() ————-用法同reduce(),只是遍历的顺序相反,从后向前
find() ————————-遍历数组,返回符合条件的第一个值 , 无返回undefined
filter() ————————遍历数组,返回符合条件的数组,无则返回空数组
map() ———————–遍历数组,返回一个新数组,不改变原数组
forEach() ——————-遍历数组,对数组中的每一个元素执行一次回调函数,无返回值
for in ————————-一般常用来遍历对象或json
for of ————————-数组对象都可以遍历,遍历对象需要通过和Object.keys()
for in ————————-循环出的是key,for of循环出的是value

下面详细介绍一下各个方法的基本功能

1.join()

join(separator): 将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符,该方法只接收一个参数:即分隔符。

split() 方法用于把一个字符串分割成字符串数组。

通过join()方法可以实现重复字符串,只需传入字符串以及重复的次数,就能返回重复后的字符串,函数如下:

2、push()和pop()

push(): 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
pop():数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。

3、shift() 和 unshift()

shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。
unshift:将参数添加到原数组开头,并返回数组的长度 。

这组方法和上面的push()和pop()方法正好对应,一个是操作数组的开头,一个是操作数组的结尾。

4、sort()

sort():按升序排列数组项——即最小的值位于最前面,最大的值排在最后面。

在排序时,sort()方法会调用每个数组项的 toString()转型方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值, sort()方法比较的也是字符串,因此会出现以下的这种情况

为了解决上述问题,sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回 0,如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数:

如果需要通过比较函数产生降序排序的结果,只要交换比较函数返回的值即可:

5、reverse()

reverse():反转数组项的顺序。

6、concat()

concat() :将参数添加到原数组中。这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。

从上面测试结果可以发现:传入的不是数组,则直接把参数添加到数组后面,如果传入的是数组,则将数组中的各个项添加到数组中。但是如果传入的是一个二维数组呢?

7、slice()

slice():返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下, slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项(含头不含尾)

8、splice()

splice():很强大的数组方法,它有很多种用法,可以实现删除、插入和替换。

删除:可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数。例如, splice(0,2)会删除数组中的前两项。

插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、 0(要删除的项数)和要插入的项。例如,splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入4和6。

splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项,如果没有删除任何项,则返回一个空数组。

9、indexOf()和 lastIndexOf()

indexOf():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。
lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回1。在比较第一个参数与数组中的每一项时,会使用全等操作符。

10、every()

every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。

11、some()

some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。

12、includes()

该方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。该方法属于 ES7 ,但 Babel 转码器已经支持

该方法的第二个参数表示搜索的起始位置,默认为 0 。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为 -4 ,但数组长度为 3 ),则会重置为从 0 开始

13、reduce()和 reduceRight()

这两个方法都会实现迭代数组的所有项,然后构建一个最终返回的值。reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。

其中,
arr 表示原数组;
prev 表示上一次调用回调时的返回值,或者初始值 init;
cur 表示当前正在处理的数组元素;
index 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;
init 表示初始值。
太多不怕,常用参数只有prev、cur

举例:

a.求数组项之和

由于传入了初始值0,所以开始时prev的值为0,cur的值为数组第一项3,相加之后返回值为3作为下一轮回调的prev值,然后再继续与下一个数组项相加,以此类推,直至完成所有数组项的和并返回
下面代码用reduce()实现数组求和,数组一开始加了一个初始值10。

b.求数组项最大值

由于未传入初始值,所以开始时prev的值为数组第一项3,cur的值为数组第二项9,取两值最大值后继续进入下一轮回调

c. 数组去重

① 初始化一个空数组
② 将需要去重处理的数组中的第1项在初始化数组中查找,如果找不到(空数组中肯定找不到),就将该项添加到初始化数组中
③ 将需要去重处理的数组中的第2项在初始化数组中查找,如果找不到,就将该项继续添加到初始化数组中
④ ……
⑤ 将需要去重处理的数组中的第n项在初始化数组中查找,如果找不到,就将该项继续添加到初始化数组中
⑥ 将这个初始化数组返回



数组中的find、filter、forEach、map四个语法很相近,为了方便记忆,真正的掌握它们的用法,所以就把它们总结在一起喽

14、find():返回通过测试的数组的第一个元素的值

语法:array.find(function(value, index, arr),thisValue)

value:必须,代表当前元素,其他四个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值

返回值:返回符合测试条件的第一个数组元素的值,如果没有符合条件的则返回undefined。

15、filter():创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素

语法:array.filter(function(value, index, arr),thisValue)

value:必须,代表当前元素,其他四个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值

返回值:返回数组,包含了符合条件的所有元素,如果没有符合条件的则返回空数组

16、map():返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,map()方法按照原始数组元素顺序依次处理元素

语法:array.map(function(value, index, arr),thisValue)

value:必须,代表当前元素,其他四个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值

返回值:返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值

17、forEach():用于调用数组每个元素,并将元素传递给回调函数(注意没有办法跳出或终止forEach语句,除非抛出异常)

语法:array.forEach(function(value, index, arr),thisValue)

value:必须,代表当前元素,其他四个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值

返回值:undefined

从上面的内容我们可以看出,上面的四个语法以及参数的意义是一样的,而且都不会对空数组进行检测,也不会改变原始数组
find()方法主要用来返回数组中符合条件的第一个元素(没有的话,返回undefined)
filter()方法主要用来筛选数组中符合条件的所有元素,并且放在一个新数组中,如果没有,返回一个空数组
map()方法主要用来对数组中的元素调用函数进行处理,并且把处理结果放在一个新数组中返回(如果没有返回值,新数组中的每一个元素都为undefined)
forEach()方法也是用于对数组中的每一个元素执行一次回调函数,但它没有返回值(或者说它的返回值为undefined,即便我们在回调函数中写了return语句,返回值依然为undefined)

后期会继续补充添加

拓展:
JS常用功能代码片段

未经允许不得转载:一点博客-青梅煮码-共享博客 » JS数组常用方法大全
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏