大家好，我是讯享网，很高兴认识大家。



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

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

1、pop和push尾部删除添加

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

讯享网

2、unshift和shift头部删除添加

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

讯享网

3、sort 排序

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

4、reverse 反转

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

讯享网

5、splice 截取新增数据

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

1、filter 数据过滤

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

讯享网

2、map

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

3、reduce 数据累加

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

讯享网

4、reduceRight 从右开始 数据累加

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

5、slice 数组截取

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

讯享网

6、concat 数组合并

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

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

讯享网

8、fill 填充

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

9、flatMap 扁平化map

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

讯享网

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

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

讯享网

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

11、toReversed 反转数组的复制版

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

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

讯享网

12、toSorted 排序的复制版

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

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

13、toSpliced 截取新增数组的复制版

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

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

讯享网

1、forEach 数组遍历

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

2、Array.from() 转换成数组

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

讯享网

3、Array.fromAsync Array.from异步版本

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

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

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

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

4、Array.isArray 判断是不是数组

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

讯享网

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

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

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

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

讯享网

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

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

8、find 查找符合条件的元素

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

讯享网

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

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

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

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

讯享网

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

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

12、at 返回索引位置的值

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

讯享网

13、Array.of 创建可变的数组

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

14、flat 扁平化数组

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

讯享网

15、every 所有元素是否通过测试

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

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

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

讯享网

17、join 选定格式转换成字符串

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

18、toString 转换成字符串

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

讯享网

19、toLocaleString

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

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

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

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

讯享网

21、keys 返回数组迭代对象，键

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

22、values 返回数组迭代对象，值

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

讯享网

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