携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 14 天，点击查看活动详情
大家好，我是爱吃鱼的桶哥Z。我们都知道在JS中数组是极其重要的一种数据结构，不管是页面的渲染，还是跟后端的数据交互，数组都是必不可少的，今天给大家分享几个人人都应该知道的数组操作方法，让我们一起来看一下吧！
Array.prototype.map()
Array.prototype.map() 方法会将原数组中的每个元素都调用一次，然后组成一个新的数组来返回，它的底层其实也是基于for循环来实现的，只是用起来会比for循环简单一些，其中map有两个参数，第一个参数是一个回调(callback)，在这个回调中，我们能够获取到当前正在处理的元素，数组的索引，以及当前处理的数组；而第二个参数是一个可选的thisArg，一般我们在开发中都很少会用到这个参数，下面我们一起来看一下map的实际使用，代码如下：
const arr: number[] = [1, 2, 3, 4];
const doubel: number = x => x * 2;
arr.map(doubel) // [2, 4, 6, 8]
在面试中，我们经常会遇到面试官问map与forEach的区别，那么关于这两个方法的区别你知道吗？
Array.prototype.filter()
Array.prototype.filter() 方法会创建一个新的数组，这个数组中包含通过所提供函数实现的测试的所有元素。顾名思义，这个方法也接受一个callback参数，在这个callback中我们可以通过相关的条件来筛选出我们需要的数据，并返回一个新的数组，这个方法不会修改原数组。filter方法的参数跟map方法的参数一样，这里就不做过多的介绍了，下面我们一起来看一下filter的实际使用，代码如下：
const arr: number[] = [1, 2, 3, 4];
const isOdd: number = x => x % 2 === 1; // 判断是否是奇数
arr.filter(isOdd); // [1, 3] // 返回一个新的数组，里面只包含所有的奇数
filter方法在实际的开发中也是很常用的，对于过滤数组、数组内容的处理非常的有效。
Array.prototype.reduce()
Array.prototype.reduce() 方法会对数组中的每个元素按顺序执行一个 reducer 函数，每一次运行 reducer 函数时，会将先前元素的计算结果作为参数传入，最后将计算的结果汇总为一个新的数组来返回。reduce有两个参数，第一个参数是一个callback，在这个callback中有四个参数，分别是：前一次调用callback时的返回值、数组中当前正在处理的元素、数组中正在处理元素的索引以及当前用于遍历的原数组。第二个参数是一个可选的参数，它是作为第一次调用 callback 函数时传入的参数 previousValue 的值。如果指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。我们可以通过以下代码来一起学习一下：
const array1: number[] = [1, 2, 3, 4];
const initialValue = 0;
const reducerArray = array1.reduce((prev, cur, index, arr) => {
return prev + cur
}, initialValue);
console.log(reducerArray); // 1 + 2 + 3 + 4 = 10
reduce方法将上一次计算的值当做下一次开始的值，这样就实现了计算数组中所有元素的总和的方法，当然在实际的开发中，肯定不会是这么简单的用法，但是这个方法确实是非常重要的，对于数组对象的合并很有效，如果你在实际的开发中遇到了要合并两个数组对象，并且要去重，那么就可以使用reduce来实现。
Array.prototype.find()
Array.prototype.find() 方法会返回数组中满足条件的第一个元素的值。否则返回 undefined。相比较来说，我们也可以用indexOf来实现对元素的查找，它们实现的原理都是一样的，具体的我们一起来看一下代码：
const arr: number[] = [1, 2, 3];
const isOdd = x => x % 2 === 1; // 查找余数为1的值
arr.find(isOdd); // 1
find方法简单来说就是从一个数组中查找我们需要的值，然后查找到的这个值；而indexOf是从数组中查找某个值，如果找到就直接返回这个值在数组中所在的位置，而不是直接返回找到的这个值。
上面介绍的数组中这四种方法，可以用下图来展示它们，并且这四种方法都可以互相实现的。
最后
数组中的 map、filter、reduce、find 这四种方法都是常用且非常重要的，尤其是 reduce 这个方法，一定要学会并掌握它，相信它一定能够帮你处理好你的数据。
最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家
