教你永远搞清JS中的几个数组方法

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

相信大家工作中一定经常用到JS中的数组方法，包括面试，这个也是常考的题，但是可能常常搞混，或者胡用乱用，或者干脆就一直foreach和for哈哈哈哈哈，今天教大家永远搞清这几个方法。
very easy。

重点讨论几个常常碰到的方法，以及他们和foreach的区别。

---

一、数组方法

1.filter

你手里有一个篮子装的都是苹果，你需要挑出来符合你条件的一些苹果，放进一个新的篮子，然后你拿走了这个新篮子，这个方法做了这件事。

数组方法都有三个参数element(遍历中的当前元素)，index(遍历中的当前元素索引)以及array(需要遍历的数组本身)，以下所有数组方法都是如此，不过多赘述。

Array.filter((element,index,array) => {
  console.log(element,index,array);
});

它和foreach的区别就是，filter不影响原数组，且返回值是一个经过处理的新数组，而foreach的返回值是undefined

2.find

你手里有一个篮子装的都是苹果，你需要挑出来符合你条件的第一个苹果，如果有这个苹果，你就带走这个苹果，不然你就两手空空，这个方法做了这件事

如果没有符合条件的，返回值就是undefined。同样不影响原数组。

3.map

你手里有一个篮子装的都是苹果，你对篮子里的每个苹果都贴了个标签然后放进了一个新的篮子，你带走了这个篮子，这个方法做了这件事。

同样不影响原数组。

4.reduce

reduce也叫累加器，大概是比较难理解的一个方法了。

你有一个篮子是空的，有不同的人往里放苹果，你想知道这些苹果总计是多少。

它初始有两个参数。

第一个回调函数callFn, 这个函数有两个参数，accumulator,上次调用callFn函数的返回值，也就是上次计算和的结果；currentValue,当前要进行运算的值。
第二个是reduce的初始值。试想这个初始值就是篮子里的初始苹果，可能是空篮子，那么苹果的个数就是0，也可能一开始篮子里有n个苹果，那初始值就是n。

array1.reduce((accumulator, currentValue) => {
    //........
  },initialValue);

我们试想一个场景，现在有一个空篮子，那么初始值就是0,有四个人往篮子里放苹果，第一个人放了1个苹果，第二个人放了2个苹果，第三个人放了3个苹果，第4个人放了四个苹果。

当然这只是简单的场景，工作中很可能菜菜的后端把一堆恶心的数组返回给你，可能对象套对象，数组套数组的。你需要去合并你需要的的数据（当然良心后端更多哈哈哈哈哈）。

5.some和every

这两个就看英文字面就很好理解。

some，译某些，某一，如果数组里有哪怕有一个数据满足你的要求，返回一个布尔值，true，然后终止循环；如果数组里没有一个数据满足你的要求，那就返回false。

every，译所有，数组里所有的数据都满足你的要求，才返回true,反之返回false。同样都不影响原数组。

6.sort

排序用的，就是把篮子里的苹果由大到小或者由小到大排好，其实后端SQL语句一行order by 就解决了，如果需要的话，前端还是让后端处理排序比较好，这样方便。

在这里我们还是说一下。一个参数回调函数fn,fn有两个参数，a和b,a-b，由小到大，b-a，由小到大。

如果什么都不传呢。

总结

好了，以上就是JS中常用的数组方法了，是不是很好理解，当然挑自己顺手的用，如果实在不理解了话，那就foreach也可以，毕竟能解决问题,什么办法都是好办法。