在ES6的语法中，数组新添了好几种新的和遍历有关的方法。虽然这些函数本质上都是语法糖，理论上说，离开他们一样可以写码。但是他们的存在使我们的业务处理方便了太多，所以说熟练掌握他们在实际开发中是非常必要的。对于第一次见到他们的同学来说，他们也许不是特别容易理解，本篇讲用实际案例详解他们的语法和用法。 所有数组方式的共同点：参数都接收一个回调函数 以下所有回调函数内的参数都是形参。也就是说，用forEach举个例子，你并不需要一定把参数写成element，index，和array。你会看到我会用许多自定义的参数名来代表他们，你只需要按顺序传参数即可。 1. forEach 基本语法： element指数组中的每一个元素，index指各个元素相对应的索引，array指数组本身。但是如果你通过arr.forEach()的方式来写的话，第三个参数array往往不需要。forEach没有返回值 首先，我认为最容易理解，也最常使用的数组方法: forEach。forEach基本上就是for循环的代替品，最适合用于循环数组，也可以用于循环其他可循环数据(比如nodelist，Map和Set)。本身没有任何返回值，仅根据数据数量做循环操作。 forEach有一个常见的用法，就是遍历一个nodeList(节点集合)，对dom中的多个对象进行统一操作。请看下面这个例子。 以下是另外两个forEach的使用场景： 2. map 基本语法： map和forEach类似，最大的区别是会返回一个全新的数组。不会改变原数组，element， index，和array的意义于forEach相同。 下面这两个例子将为阐述map的基本用法： 3. filter 基本语法： filter是另一个语法和map以及forEach很相似的数组方法。filter中文是过滤，特别适用于提取一个数组中符合条件的数组。每轮遍历返回一个布尔值，结果为true的元素会被添加到新数组中，最终filter将返回这个新数组 filter是我认为第二常用，也极其好用的一个数组方式。因为很多时候我们需要根据条件筛选一部分数组元素，而这个时候filter会特别方便。对于新手来说，最大的难点是理解回调函数中的return值是一个布尔值，这个布尔值通常以一个表达式的形式出现。然而filter最终返回的是一个数组的浅拷贝。简而言之，改变浅拷贝的元素值也会影响之前的数组的元素。 4. sort 基本语法： sort的语法和前面的方法有所不同，你可以直接调用它，不传任何参数；也可以传一个用于比较的回调函数。sort的用途是给一个数组中的元素排序，a和b在此分别指代第一个用于比较的元素和第二个用于比较的元素。返回值为排序后的原数组 如果没有比较函数，那么sort将会按照元素的Unicode位点进行排序。也就是说：'Banana'会排在'Cat'前，因为b比c要靠前。110也会排在20之前，因为1比2靠前。请看下面两个例子 但是，如果你在sort中传入一个比较函数，那么sort将会按照a和b的大小进行排序，基本规则如下： 比较函数(a, b)返回值排序顺序> 0a在b后< 0a在b前=== 0保持a和b的顺序 简而言之，比较函数每次执行需要返回一个数字，如果这个数字大于0，数组按升序排序；如果小于0，则按降序排序。如果等于0，则顺序不变。传统上讲，我们一般返回1和-1来分别代表大于0和小于0的情况。使用方式如下： 这次，我们再此使用之前的数字数组的例子排序，但是这次使用回调的比较函数。结果将会按照数字实际大小进行排序： 5. reduce 基本语法： reduce可以说是数组方法里最难理解，也最特殊的一个函数了。 reduce同样接受一个回调函数和一个初始值作为参数，这个回调函数可以接受4个参数，分别是上一个值(总值)，当前值，当前索引，和数组，reduce有一个可选的第二个参数，为初始值。如果不填写，那遍历将从索引1开始，也就是数组的第二个元素，因为第一个元素的初始值不存在，当前索引的值也将为1。如果填写初始值，那么第一轮遍历的当前索引为0，当前元素为一个数组元素，上一个元素也将成为初始值。返回回调函数遍历整个数组后的结果 reduce不是一个特别常用的数组方式，但在部分情况下，他可以大大减少代码的复杂程度，我们将用多个例子来展现reduce的一些实际用途。 第一眼看到上面这段代码，你可能会有点摸不清头脑，下面这个表格可以帮助你理解 回调次数previousValuecurrentValuecurrentIndexreturn value第一轮遍历1415第二轮遍历5982103第三轮遍历1031703273第四轮遍历273354308 我们的数组共有六个元素，所以将一共遍历六次。上面的例子是前四轮的过程以及结果。下面有另外一个例子来表明如何用reduce来集合对象数组中的值： 以上是reduce的两个比较基础的用法，你也可以把它应用在一些更复杂的场景当中。还有一个比较常见的场景就是把一个数组中相同种类的对象归为一类，形成一个新的数组。 6. every 基本语法： 最终，我们将以一个比较简单的函数收尾: every()。every方法用于检查一个数组中是否所有元素都满足条件。有任何一个不满足条件，回调函数将返回false。如果所有遍历都返回true，那么every最终将返回true every自身的概念很好理解，我们用一个例子来阐述他的作用 最后只有一个需要额外注意的是，今天所讲的所有的数组方法，不会遍历空的数组元素 以上就是ES6中的常见数组遍历方式，掌握他们对业务至关重要，需要在合适的情况下多多练习。 到此这篇关于JS中的常见数组遍历方法详解(forEach, map, filter, sort, reduce, every)的文章就介绍到这了,更多相关js数组遍历内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！