盘点JavaScript中数组所有的方法

目录

实例方法

一、普通方法(没有函数作参数的方法)

1.push

2.unshift

3.pop

4.shift

5.splice

6.reverse

7.sort

8.indexOf

9.lastIndexOf

10.includes

11.slice

12.at

13.concat

14.fill

15.values

16.keys

17.join

18.with

19.copyWithin

20.entries

21.flat

22.toString

二、高阶方法(使用函数作参数的方法)

1.forEach

2.map

3.filter

4.reduce

5.reduceRight

6.find

7.findIndex

8.findLast

9.findLastIndex

10.some

11.every

12.flatMap

静态方法

1.from

2.fromAsync

3.isArray

4.of


实例方法

一、普通方法(没有函数作参数的方法)

1.push

将指定的元素(一个或多个,用逗号隔开)添加到数组的末尾,并返回新的数组长度。

2.unshift

将指定元素(一个或多个)添加到数组的开头,并返回数组的新长度

3.pop

从数组中删除最后一个元素,并返回该元素的值。此方法不需要传参,会更改数组的长度。

4.shift

从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

5.splice

就地移除或者替换已存在的元素和/或添加新的元素。此方法有三个及以上参数(start,deleteCount,item1、item2、...itemN),其中deleteCount和item是可选的,这个方法返回被删除的元素组成的数组

start:要开始删除的位置(索引)

deleteCount:要删除的元素个数

item:要新增的元素一个或多个

通过传参的不同此方法可以实现删除,替换,新增等功能:

1.只传一个参数:会默认删除从传入的参数的索引开始删除后面所有的元素

2.传两个参数:从第一个参数的值的索引开始删除指定个数的元素

如上图所示表示从索引为2的地方开始删除1个元素

3:传三个参数或以上:

如上图所示表示从索引为2开始的地方删除0个元素并添加7,8,9这三个元素,达到新增的效果

6.reverse

反转数组中的元素,并返回同一数组的引用。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。换句话说,数组中的元素顺序将被翻转,变为与之前相反的方向。

7.sort

对数组的元素进行排序,并返回对相同数组的引用。默认排序是将元素转换为字符串,然后按照它们的 UTF-16 码元值升序排序。这个方法也可以通过传入一个简单的函数来控制升序或者降序。

如果传入参数:

简单理解就是如果return b-a 就为降序排列,如果return a-b 就为升序排列

8.indexOf

返回数组中第一次出现给定元素的索引,如果不存在则返回 -1。

9.lastIndexOf

返回数组中给定元素最后一次出现索引,如果不存在则返回 -1。

简单理解就是indexOf从前往后查找,而lastIndexOf是从后往前查找

10.includes

判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。该方法有两个参数,第一个参数是要查找的元素,第二个参数是要开始查找的索引

如上图所示,数组arr里包含3,所以result1返回true。但是加上第二个参数就返回false了,因为第二个参数指定了开始查找的位置,从索引为3的地方开始往后并没有元素3,所以返回false

11.slice

返回一个新的数组对象,这一对象是一个由 start(参数1) 和 end(参数2) 决定的原数组的浅拷贝(包括 start,不包括 end),其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。

如果不传参的话会把整个数组浅拷贝一份

12.at

接收一个整数值并返回该索引对应的元素,允许正数和负数。负整数从数组中的最后一个元素开始倒数。

13.concat

用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

可以传多个参数合并多个数组,不传参的话会把原数组浅拷贝一份

14.fill

用一个固定值填充一个数组中从起始索引(默认为 0)到终止索引(默认为 array.length)内的全部元素。它返回修改后的数组。此方法有三个参数(value,start,end),其中start和end是可选的

如果传了start和end:

只传start不传end的话会一直填充到末尾

15.values

返回一个新的数组迭代器对象,该对象迭代数组中每个元素的值。该方法没有参数

简单说就是一个可以被循环拿到每一个元素的一个对象

16.keys

返回一个新的数组迭代器对象,其中包含数组中每个索引的键。该方法没有参数

17.join

将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串,用逗号或指定的分隔符字符串分隔。如果数组只有一个元素,那么将返回该元素而不使用分隔符。

如上图所示,传入参数'-'那么返回的字符串的各个元素之间会用'-'符号连接,如果不传参的话默认会用逗号连接

18.with

使用方括号表示法修改指定索引值的复制方法版本。有两个参数,第一个参数是要替换的元素的索引,第二个元素是要替换的新元素值。返回一个新数组,其指定索引处的值会被新值替换

19.copyWithin

浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。有三个参数(target,start,end),其中start和end是可选的,target是要复制到的目标索引,start是开始复制的索引,end是结束复制的索引。

1、如果只传target,会把整个数组从target值的索引位置开始复制到后面(超出数组长度的部分不会复制),如下图所示

2、只传了target和start,会把数组中start值的索引位置开始到数组结束之间的部分复制到target值的索引位置,如下图所示

3、三个参数都传了,会把数组中start值的索引位置开始到end值的索引位置结束之间的部分复制到target值的索引位置,如下图所示

20.entries

返回一个新的数组迭代器对象,该对象包含数组中每个索引的键/值对

简单说就是一个可以被遍历(循环)然后取得多个由索引和元素组成的数组  的对象

21.flat

创建一个新的数组,并根据指定深度递归地将所有子数组元素拼接到新的数组中,不会改变原数组。

简单说就是实现数组的扁平化(多维数组变成一维数组),有一个可选参数depth,表示要扁平化的层数

如上图所示,传入参数2,把三维数组降低2层变为一维数组,也可以传入一个infinity作参数,表示不管多少维都会被变为一维

22.toString

返回一个字符串,表示指定的数组及其元素,该方法没有参数。

二、高阶方法(使用函数作参数的方法)

1.forEach

对数组的每个元素执行一次给定函数的操作。仅遍历数组,不会修改数组,无返回值

给定的函数(callback)有三个可选参数:item(每个元素),index(索引),arr(此数组),最常用的是第一个参数。

如上图所示,我们在callback函数中对每个元素进行了乘2的操作

2.map

创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

给定的函数(callback)有三个可选参数:item(每个元素),index(索引),arr(此数组),最常用的是第一个参数。

如上图所示,map方法返回了一个对原数组的每个元素进行乘2后的新数组,不会改变原数组

3.filter

创建一个新数组,过滤出所有满足callback函数返回值条件的元素,并添加进该新数组中

给定的函数(callback)有三个可选参数:item(每个元素),index(索引),arr(此数组),最常用的是第一个参数。

如上图所示,在callback函数中返回指定条件 item>6,创建一个由所有大于6的元素组成的数组

4.reduce

对数组中的每个元素按序执行一个提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

简单来说就是累加(减乘除也行),这个方法有两个参数,第一个参数callback函数,第二个参数initalValue初始值;callback函数通常有accmulator和currentValue两个参数,分别代表上次执行的结果和当前的元素。这么说可能有点复杂直接上代码

如上图所示,reduce的执行过程其实是两两计算,然后计算的结果再和下一项进行计算,最终计算结果为36

如果传了第二个参数initalValue的话,就是从这个数和第一个数开始计算,再把计算结果和下一项计算,如下图

给定了一个初始值4,其实也就是在上张图的基础上加了4而已

5.reduceRight

这个方法和reduce其实是一个意思,只不过这个方法是从右边往左边进行计算的

6.find

返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

给定的函数(callback)有三个可选参数:item(每个元素),index(索引),arr(此数组),最常用的是第一个参数。

如上图所示,callback函数中返回指定条件 item>5 ,返回第一个满足条件的元素 6 ,如果没有满足条件的元素则返回undefined

7.findIndex

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。

给定的函数(callback)有三个可选参数:item(每个元素),index(索引),arr(此数组),最常用的是第一个参数。

如上图所示,callback函数中返回指定条件 item>5 ,返回第一个满足条件的元素的索引,也就是6的索引 为5,如果没有找到满足条件的索引则返回-1

8.findLast

反向迭代数组,并返回满足提供的测试函数的第一个元素的值。如果没有找到对应元素,则返回 undefined。此方法和find方法是一个意思,只不过此方法是从后往前查找。

给定的函数(callback)有三个可选参数:item(每个元素),index(索引),arr(此数组),最常用的是第一个参数。

如上图所示,callback函数中返回指定条件item >5 ,从后往前查找,返回第一个满足条件的元素8,如果没有找到满足条件的元素则返回undefined

9.findLastIndex

反向迭代数组,并返回满足所提供的测试函数的第一个元素的索引。若没有找到对应元素,则返回 -1。此方法和findIndex方法是一个意思,只不过此方法是从后往前查找。

给定的函数(callback)有三个可选参数:item(每个元素),index(索引),arr(此数组),最常用的是第一个参数。

如上图所示,callback函数中返回指定条件item >5 ,从后往前查找,返回第一个满足条件的元素的索引,也就是8的索引 为7,如果没有找到满足条件的元素则返回undefined

10.some

测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true,则返回 true;否则返回 false。该方法不会修改原数组。

给定的函数(callback)有三个可选参数:item(每个元素),index(索引),arr(此数组),最常用的是第一个参数。

如上图所示,callback函数中返回指定条件item >5 ,数组中存在一个大于5的元素就返回true,如果一个都不存在则返回false,和every的区别是只要有一个满足条件就返回true。

11.every

测试一个数组内的所有元素是否都能通过指定函数的测试。如果能就返回true,否则返回false,该方法不会修改原数组

给定的函数(callback)有三个可选参数:item(每个元素),index(索引),arr(此数组),最常用的是第一个参数。

如上图所示,callback函数中返回指定条件item >5 ,数组并不是所有元素都大于5,返回false,如果所有元素均大于5才会返回true

12.flatMap

对数组中的每个元素应用给定的回调函数,然后将结果展开一级,返回一个新数组。

它等价于在调用 map()方法后再调用深度为 1 的 flat()方法(arr.map(...args).flat()),但比分别调用这两个方法稍微更高效一些。

给定的函数(callback)有三个可选参数:item(每个元素),index(索引),arr(此数组),最常用的是第一个参数。

如上图所示,flatMap方法中callback函数返回值两个方括号和map一个方括号的结果相同,因为faltMap方法会自动执行一次flat()方法,也就是降低一个维度

静态方法

1.Array.from()

从可迭代或类数组对象创建一个新的浅拷贝的数组实例。简单理解就是把另一种数据类型转为数组

2.Array.fromAsync()

方法可以由一个异步可迭代对象、可迭代对象或类数组对象创建一个新的、浅拷贝的 Array 实例。

这个新出的方法解决了from方法处理异步可迭代对象时操作比较繁琐的问题。

从异步可迭代对象创建数组:

从同步可迭代对象创建数组:

3.Array.isArray()

用于确定传递的值是否是一个数组。有一个参数value,如果value是数组则返回true,否则返回false

4.Array.of()

通过可变数量的参数创建一个新的 Array 实例,而不考虑参数的数量或类型。返回新的数组实例

Array.of() 和 Array() 构造函数之间的区别在于对单个参数的处理:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个 length 为 7 的空数组

需要注意的点是Array.of()不管参数是什么类型都会如常的放入数组实例中

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值