【中高级前端人必看】不数不知道，JS数组已经有42个方法了

大家好，欢迎来到IT知识分享网。

前言

数组在js中作为一个非常重要的类型之一，在我们对数据处理，存储数据，条件渲染的时候经常会用到，所以随着ES的不断更新，数组的方法也是越来越多，也让我们使用数组对数据操作的时候，越来越简单，但是不经意间，数组的方法已经有42个之多，接下来让我们看看有哪些数组方法从出来就你还没用过的吧！

数组方法

数组方法之多，大致可以分为以改变数组本身的，不改变数组本身的（返回一个新的数组），还有就是其他对数组本身功能性作用的方法

改变数组本身 （7个）

pop和push尾部删除添加

这两个方法用于数组结尾的删除和添加

unshift和shift头部删除添加

用于在数组的首位进行删除和添加

sort 排序

进行对数组就地排序，不会复制或返回一个新数组，接收可选参数，一个回调函数，有a,b两个参数，当返回a<b时返回-1从小到大排序，当返回a>b时返回1从大到小排序，a==b时返回0，保持原来的排序（默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序。）

reverse 反转

对数组进行就地反转，顺序颠倒

splice 截取新增数据

可以选择删除数组中的某一个值，也可以在数组中的某个位置添加一些数据，接收可选参数，三个或以上的参数，第一个为截取的索引位置number类型，第二个截取的个数number类型，第三个或更多实在截取位置添加的参数，可以是任何类型

不改变原数组 （13个）

filter 数据过滤

需要一定条件返回对应的数据，接收一个回调函数，有回调函数有三个参数，第一个是当前遍历的元素，第二个为当前索引，第三个是数组本身，需要一个返回值，filter方法会根据符合这个返回值条件的数据返回一个新数组

map

map方法只是单纯的返回一个新数组，可以是处理后的，也可以是原数组，接收一个会点函数，回调函数有三个参数第一个是当前遍历的元素，第二个为当前索引，第三个是数组本身，需要一个返回值，从map内部处理过后，回调函数的返回值返回一个新数组

reduce 数据累加

reduce是一个功能非常强大的方法，但平常很少使用，因为他的功能他的方法都可以实现，它也能实现其他的一些方法，有时候合理的使用reduce会大大减少代码量。接收两个参数，第一个为回调函数，回调函数有四个参数，第一个参数为上一次回调函数return的结果，首次默认为第二个参数值，如果没有第二个参数值，则默认当前数组下标为0的参数，第二个参数为当前元素，第三个为当前索引值，第四个为数组本身，reduce的第二个参数指定一个默认值，可选

reduceRight 从右开始 数据累加

这个是reduce的右边开始一种写法，运算时会从右向左执行，参数与使用方法和reduce一致。适用于当你想对一个数组进行反转加过滤等操作的时候，这个方法就完全突出了他的便携

slice 数组截取

可以对一个数组进行浅拷贝，接收两个参数，第一个为截取的初始位置，第二个为终止位置（不包括此索引值），如果只填一个参数则从当前索引值截取到最

concat 数组合并

需要两个或以上的数组合并的时候就可以使用concat快速合并，当然在ES6之后大多都使用扩展运算符进行数组合并了，此方法接收一个或以上得任意类型参数

copyWithin 将数组得一部分赋值到另一个位置

copyWithin是一种移动数组数据的高性能方法，copyWithin() 方法是通用的。它只期望 this 值具有 length 属性和整数键属性。虽然字符串也是类似数组的，但这种方法不适用于它们，因为字符串是不可变的。
copyWithin不会改变数组的长度，只会修改内容，它接收三个参数，第一个为复制到的目标位置（索引值），第二个是复制的起始位置（可选），如果为负数，则相当于从后往前数，第三个为结束位置，不包含此索引的位置（可选），起始位置不可小于结束位置，否者方法无效

fill 填充

对数组内容进行覆盖填充，有三个参数，第一个为填充的值，第二个为起始位置（可选），第三个为结束位置，不包含此索引位置（可选）

flatMap 扁平化map

flatMap与map相似，都是接收一个回调函数，进行处理后返回一个数组，但有一处差别就是flatMap可以对数组进行一层扁平化（仅数组）

with 修改指定索引值得复制方法

此方法兼容性不好，暂时不推荐使用，node版本需要20.0.0以上，浏览器就不用说了

我们都知道，我们再修改数组中得某一个值得时候可以使用arr[index]=xxx 来进行修改，但是这样是改变了原数组,当我们既想使用索引值来改变某一个值，还不想改变原数组得时候就可以使用with方法，它接收两个参数，第一个为索引值，第二个是要修改成为数据

toReversed 反转数组的复制版

此方法兼容性不好，暂时不推荐使用，node版本需要20.0.0以上，浏览器就不用说了

使用reverse可以反转数组，但是会改变原数组，如果不想让原数组改变的并反转数组的话就可以使用它的复制版本toReveresed

toSorted 排序的复制版

此方法兼容性不好，暂时不推荐使用，node版本需要20.0.0以上，浏览器就不用说了。

使用sort可以反转数组，但是会改变原数组，一样的可以使用toSorted，不会改变原数组，会返回一个排好序的数组，接受的参数和sort一致，参考sort

toSpliced 截取新增数组的复制版

此方法兼容性不好，暂时不推荐使用，node版本需要20.0.0以上，浏览器就不用说了

使用splice可以对数组进行截取和指定位置新增数据，但是会改变原数组，可以使用toSpliced，不会改变原数组，会返回一个新的数组，接受的参数使用方法和splice一致，参考splice

其他 功能性方法(22个)

forEach 数组遍历

这个方法应该都非常熟悉了，为什么把他分为其他里面呢，因为他的作用只是遍历，其他什么作用都没有，接收一个回调函数，又三个参数，第一个当前元素，第二个为索引值，第三个为数组本身因为都比较熟悉了，就随便写个例子

Array.from() 转换成数组

此方法可以将一些可迭代的以及为数组的数据转换成真正的数组，并返回一个那个新数组，比如字符串，dom伪数组等，接收两个参数，第一个为要转化的参数，第二个是一个回调函数（可选），回调函数有两个参数当前遍历的对象和索引

Array.fromAsync Array.from异步版本

Array.fromAsync() 迭代异步可迭代对象的方式与 for await…of 很相似。Array.fromAsync() 在行为上与 Array.from() 几乎等价

• Array.fromAsync() 可以处理异步可迭代对象。
• Array.fromAsync() 返回一个会兑现为数组实例的 Promise。
• 如果使用非异步可迭代对象调用 Array.fromAsync()，则要添加到数组中的每个元素（无论是否为 Promise）都会先等待其兑现。
• 如果提供了 mapFn，则其输入和输出会在内部等待兑现。

Array.fromAsync() 和 Promise.all() 都可以将一个 promise 可迭代对象转换为一个数组的 promise。然而，它们有两个关键区别：

• Array.fromAsync() 会依次等待对象中产生的每个值兑现。Promise.all() 会并行等待所有值兑现。
• Array.fromAsync() 惰性迭代可迭代对象，并且不会获取下一个值，直到当前值被兑现。Promise.all() 预先获取所有值并等待它们全部兑现。

Array.isArray 判断是不是数组

在类型判断的时候，我们通常使用typeof ，但是使用typeof的时候数组判断出来的就是Object类型，可以说数组是特殊的对象，使用typeof判断不出数组，就可以使用Array.isArray方法

includes 判断某个值数组中是否存在

在数组中查抄某一个值，返回一个布尔值，有两个参数，第一个你要查找的值，第二个从哪个索引位置开始找

indexOf 判断数组中是否存在某个值，并返回索引

写法和includes类似，有两个参数第一个是要找的值，第二个为开始索引，indexOf会在查找到第一个符合条件的参数跳出循环并返回索引，没找到则返回-1

lastIndexOf 判断数组中是否存在某个值，并返回最后的索引

与indexOf一致，只不过是返回最后的索引位置，也可以理解为他是从数组的右边开始往左找元素，并返回第一个找到的元素的索引，没找到则返回-1

find 查找符合条件的元素

find查找符合条件的的一个元素并返回那个元素本身,没有则返回undefined，接收一个回调函数，回调函数有三个形参，第一个当前元素，第二个当前索引，第三个数组本身

findIndex 查找符合条件的元素，返回索引版

与find使用方法一致，findIndex查找符合条件的的一个元素并返回那个元素的索引值,没有则返回-1，接收一个回调函数，回调函数有三个形参，第一个当前元素，第二个当前索引，第三个数组本身

findLast 从右向左查找符合条件的元素

此方法兼容性不好，暂时不推荐使用，node版本需要18.0.0以上 与find使用方法一致，findLast从右向左查找符合条件的的一个元素，并返回那个元素,没有则返回undefined，接收一个回调函数，回调函数有三个形参，第一个当前元素，第二个当前索引，第三个数组本身

findLastIndex 从右向左查找符合条件的元素,返回索引版

此方法兼容性不好，暂时不推荐使用，node版本需要18.0.0以上 与findLast使用方法一致，findLastIndex从右向左查找符合条件的的一个元素，并返回那个元素的索引值,没有则返回-1，接收一个回调函数，回调函数有三个形参，第一个当前元素，第二个当前索引，第三个数组本身

at 返回索引位置的值

此方法兼容性一般，暂时不推荐使用，node版本需要16.6.0以上 at接收一个number的参数，可以为负数，正数时获取到索引为的值，当参数为负数时，从右向左查找对应的值

Array.of 创建可变的数组

使用静态方法创建一个可变的数组，可以接收任意类型，任意个数的参数

flat 扁平化数组

通常在扁平化数组的时候都要使用递归函数，flat方法避免了页面中写递归函数造成大量的代码冗余，flat本身也是使用递归方法来达到数组扁平化的，接收一个number类型的参数，参数是几就可以扁平几层，在不确定有几维数组的情况下，参数为Infinity（无限大），可以扁平任意层次的数组

every 所有元素是否通过测试

every用于所有元素是否都能通过测试，返回一个布尔值，只有当所有元素都通过了测试，才会返回true，接收一个回调函数，回调函数有三个形参，第一个为当前元素，第二个为当前索引，第三个为数组本身，另外，当数组为空的时候使用every，条件不论是怎么样的，都会返回true（这种情况属于无条件正确，因为空集的所有元素都符合给定的条件。）

some 数组中至少有一个元素通过测试

some用于数组中参数其中一个或多个通过了测试，返回一个布尔值，如果有一个或以上通过测试就返回true，一个都没通过返回false，接收一个回调函数，有三个形参，第一个为当前元素，第二个为当前索引，第三个为数组本身，另外，当数组为空时使用some，不论判断条件如何，都会返回false，并且他不会改变数组

join 选定格式转换成字符串

join用于将数组转换成字符串的方法，接收一个参数（可以为任意类型，但引用类型则会默认转换成[object Object]等），为数组元素转换成字符串的间隔符，不传参数默认以 ‘，’号隔开

toString 转换成字符串

toString是几乎所有数据类型都有的一个方法，就是单纯的转换成字符串，数组中转换成字符串默认以‘，’号隔开，有一个小技巧，如果多维数组的类型都是值类型的，可以使用toString进行扁平化

toLocaleString

此方法用于格式转换，最后返回字符串代表数组中所有的元素，接收两个参数第一个带有 BCP 47 语言标签的字符串，或者此类字符串的数组。对于 locales 参数的一般形式和说明，可以参见 Intl 主页面的参数说明。第二个，一个具有配置属性的对象。对于数字，请参见 Number.prototype.toLocaleString()；对于日期，请参见 Date.prototype.toLocaleString()。

此方法的使用方法记得东西比较多，详细使用方法可以点击上面的链接查看

entries 返回数组迭代器的对象，包含键和值

返回一个数组迭代器对象，数组迭代器（ array[Symbol.iterator]）,如果不太清楚的可以看一下Symbol篇章，或者点击数组迭代器查看

keys 返回数组迭代对象，键

返回一个只包含键的迭代对象，使用方法与entries一致

values 返回数组迭代对象，值

返回一个只包含值得可迭代对象，使用方法与entries一致

结尾

截止到ES2023得42种数组方法就这些，看是否有哪些方法从来就没有使用过吧，有很多方法也许我们平常根本用不到，但也可以相对得了解以下，还有几种最近新出的方法兼容性没那么好，在实际得开发环境中还是需要谨慎使用，如果有写的不对得地方欢迎纠正！

原文链接：https://juejin.cn/post/