数组的遍历方法有哪些
- 一、forEach()
- 二、map()
- 三、filter()
- 四、every()
- 五、some()
- 六、find()
- 七、findIndex()
- 八、reduce()
- 九、reduceRight()
一、forEach()
不改变原数组,没有返回值,会返回新数组
功能:用于调用数组的每个元素,并将元素传递给回调函数。
数组中的每个值都会调用回调函数,回调函数有三个参数:
-
currentValue: 必需。当前元素
-
index: 可选。当前元素的索引值。
-
arr: 可选。当前元素所属的数组对象
let arr = [1,2,3,4,5]
arr.forEach((item, index, arr) => {
console.log(index+":"+item)
})
该方法还可以有第二个参数,用来绑定回调函数内部this变量(前提是回调函数不能是箭头函数,因为箭头函数没有this):
let arr = [1,2,3,4,5]
let arr1 = [9,8,7,6,5]
arr.forEach(function(item, index, arr){
console.log(this[index])
}, arr1)
需要注意的是,forEach方法对数组的操作会改变原数组,也没有返回值。
二、map()
不改变原数组,有返回值,会返回新数组
map() 方法会返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。该方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测,它会返回一个新数组,不会改变原始数组。
该方法的第一个参数为回调函数,他有三个参数:
currentValue: 必须。当前元素的值
index :可选。当前元素的索引值
arr :可选。当前元素属于的数组对象
let arr = [1, 2, 3];
arr.map(item => { return item+1;})
第二个参数用来绑定参数函数内部的this变量,可选:
var arr = ['a', 'b', 'c'];
[1, 2].map(function (e) {
return this[e];}, arr)
该方法可以进行链式调用:
let arr = [1, 2, 3];
arr.map(item => item+1).map(item => item+1)
三、filter()
有返回值,满足条件的元素会被返回,不改变原数组
filter()方法用于过滤数组,满足条件的元素会被返回。它的参数是一个回调函数,所有数组元素依次执行该函数,返回结果为true的元素会被返回。该方法会返回一个新的数组,不会改变原数组。
该方法的第一个参数是回调函数,它有三个参数:
currentValue: 必须。当前元素的值
index :可选。当前元素的索引值
arr :可选。当前元素属于的数组对象
let arr = [1, 2, 3, 4, 5]
arr.filter(item => item > 2)
同样,他也有第二个参数,用来绑定参数函数内部的this变量。
第三、ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素 (false, null, undefined, 0, NaN or an empty string):
var a=[1,2,"b",0,{},"",NaN,3,undefined,null,5];
var b=a.filter(Boolean);
四、every()
有返回值,不改变原数组
功能:如果每个元素都符合条件返回true,否则返回false
同filter(),也有三个参数,item,index,数组名
let arr = [1, 2, 3, 4, 5]
arr.every(item => item > 0)
五、some()
有返回值,不改变原数组
功能:如果有一个元素符合条件 ,返回true
同filter(),也有三个参数,item,index,数组名
let arr = [1, 2, 3, 4, 5]
arr.some(item => item > 4)
六、find()
有返回值,不改变原数组
功能:返回符合条件的第一个元素
- 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 undefined
注意: find() 对于空数组,函数是不会执行的。
该方法的第一个参数也是一个函数,它有三个参数:
- currentValue :必需。当前元素
- index :可选。当前元素的索引
- arr :可选。当前元素所属的数组对象
let arr = [1, 2, 3, 4, 5]
arr.find(item => item > 2)
七、findIndex()
功能:返回第一个符合条件的元素下标
- 当数组中的元素在函数条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组,函数是不会执行的。
该方法的第一个参数也是一个函数,它有三个参数:
- currentValue :必需。当前元素
- index :可选。当前元素的索引
- arr :可选。当前元素所属的数组对象
let arr = [1, 2, 3, 4, 5]
arr.findIndex(item => item > 2)
八、reduce()
加初始值,可改变原数组,有返回值,返回值是数组的和
功能:按数组下标升序对数组元素求和
语法: arr.reduce(callback,[initialValue])
reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。
(1) callback (执行数组中每个值的函数,包含四个参数)
(2) initialValue (作为第一次调用 callback 的第一个参数。)
var arr = [1, 2, 3, 4]
var sum = arr.reduce((prev, cur, index, arr) => {
console.log(prev, cur, index);
return prev + cur;
})
console.log(arr, sum);
输出结果:

再来加一个初始值看看:
var arr = [1, 2, 3, 4]
var sum = arr.reduce((prev, cur, index, arr) => {
console.log(prev, cur, index);
return prev + cur;
}, 5)
console.log(arr, sum);
输出结果:

通过上面的两个例子,我们可以得出结论:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始
注意,该方法如果添加初始值,就会改变原数组,将这个初始值放在数组的最后一位。
九、reduceRight()
功能:对数组逆序(按数组下标)求和
其它同reduce()
var arr = [1, 2, 3, 4]
var sum = arr.reduceRight((prev, cur, index, arr) => {
console.log(prev, cur, index);
return prev + cur;
}, 5)
console.log(arr, sum);
执行结果:
