js 数组的遍历方法

for 

for循环是最普通的一种数组循环方法,通过数组中自带的索引进行数组元素的获取,这种方式可以支持 break、continue、return的打断形式。具体如下:

js 数组的遍历方法

forEach

forEach是一个方法,这个方法是在 Array 类的 prototype 上,所以所有的Array的实例上都有这个方法。forEach方法没有返回值,参数有两个。形式为:arr.forEach(callbackFn[, thisValue]),其中 callbackFn 是个函数,这个函数有三个参数,可以分别记为 item、index、array,见名知意:第一个参数 item 表示的是被遍历的数组每一项,index 表示的是当前被遍历项的数组下标,array 表示的是被遍历的数组对象,此处即为arrcallbackFn 是必传参数。forEach函数还有一个可传参数 thisValue,这个参数是一个对象,作用是在 callbackFn 函数中this的引用。如果不传 thisValue,则默认值为 undefined

注意点:

  1. forEach不能被break、continue、return打断;
  2. 如果callbackFn是箭头函数,则传入的 thisValue 不起作用,因为箭头函数绑定的this是模块this

js 数组的遍历方法

js 数组的遍历方法

map

map的用法跟forEach非常的类似,跟forEach一样都是 Array.ptototype 上的方法,通过原型链,所有的Array实例都可以访问到map方法。map方法的参数跟forEach一样,一个回调函数和一个this对象:arr.map(callbackFn[, thisValue]),并且callbackFn的参数跟forEach中的callbackFn中的参数也是一样的。map跟forEach的区别在于,map是有返回值的,返回值是一个新的数组实例。map方法的目标并不是用来对原数组进行遍历,而是在原数组的基础上进行一些变换从而得到一个新的数组。这些变换并不会影响到原数组。下面看一下map方法的典型用法:

js 数组的遍历方法

orEach和map的 callbackFn中虽然可以得到被遍历数组的每一项,但是我们如果要改变原数组需要使用一点手段。callbackFn方法的参数传入同普通方法的参数一样,都是将数据的引用传入到了函数中。所以我们如果直接更改参数的引用的话,我们将不能变更原数组的内容。如下例所示:

js 数组的遍历方法

上面的做法并不能改变原数组,因为curVal是一个引用,我们在callbackFn中将curVal的引用重新进行了赋值,引用的指向改变了。所以arr中对应的值并不会发生改变,因为arr中对应的值的引用与curVal的引用指向已经不一样了。我们把实例改一下:

js 数组的遍历方法

这里我们将 curVal.value 的引用重新指向,但是curVal的指向并没有被修改,也就是说 curVal 的引用指向还是跟 arr 中对应项的引用指向保持一致,所以最终输出的结果会发生变化。还有一种做法,我们利用第二个和第三个参数来修改原来的数组:

js 数组的遍历方法

forEach同map一样。

every

every 类似 forEach和map,都是 Array.prototype上的方法,该方法的返回值是boolean,callbackFn的返回值也是一个boolean,如果为true则继续遍历,直到返回值为false或者到达数组边界结束遍历。every方法常用来判断当前数组中所有项是否满足指定条件。

js 数组的遍历方法

some

some类似every而又正好相反,都是 Array.prototype上的方法,该方法的返回值是boolean,callbackFn的返回值也是一个boolean,如果为true则停止遍历,如果没有满足条件的元素,则返回falsesome方法用于检测数组中的元素是否满足指定条件。

js 数组的遍历方法

filter

filter过滤通过条件的元素组成一个新数组,原数组不变;

js 数组的遍历方法

reduce

reduce中回调函数的参数,这个回调函数有4个参数,意思分别为

  1. prev: 第一项的值或上一次叠加的结果值
  2. cur: 当前会参与叠加的项
  3. index: 当前值的索引
  4. arr: 数组本身

js 数组的遍历方法

js 数组的遍历方法