数组遍历方法 forEach, map, filter, some, every, find, findIndex, reduce 的使用

我们可以使用各种循环来完成对数组的遍历操作，不同的方法有不同的使用场景，因此我们要在选择合适的方法对数组进行遍历。我们创建一个数组 arr 和 nums 如下， ：

const arr = [
  {a: 1},
  {a: 2},
  {a: 3},
  {a: 4},
  {a: 5}
]
const nums = [1, 2, 3, 4, 5]

a 值全部加1

arr.forEach((item) => {
  item.a++;
});
console.log('arr', arr)
// [{a: 2},{a: 3},{a: 4},{a: 5},{a: 6}];

以上用 forEach 完成了对数组进行遍历，并将 a 的值增加1。map 也可以实现对数组中元素的遍历，让我们来尝试一下：

arr.map((item) => {
  item.a++;
});
console.log('arr', arr)
// [{a: 2},{a: 3},{a: 4},{a: 5},{a: 6}];

map 同样完成了数组的遍历，将 a 的值增加1，但是 forEach 更符合该项操作的语义。

a 值全部加1并返回新的数组

map 遍历数组中的每一个元素，执行回调函数的返回值，组成新的数组。

let res = nums.map((item) => {
  return item + 1
});
console.log('res', res)
// [2, 3, 4, 5, 6]

返回的值必须通过 return 返回，否则返回 undefined。

let res = nums.map((item) => {
  item + 1
});
console.log('res', res)
// [undefined, undefined, undefined, undefined, undefined]

forEach 没有返回值，return 也不会返回值。

let res = nums.forEach((item) => {
  return item + 1
});
console.log('res', res)
// undefined

返回大于3的数

filter 返回数组中满足条件的值，组成一个新的数组。

let res = nums.filter((item) => {
  return item > 3
});
console.log('res', res)
// [4, 5]

是否有大于3的数

some 数组中是否至少有一个元素，能通过回调函数的测试，只要有一个元素满足条件，返回 true，否则返回 false。

let res = nums.some((item) => {
  return item > 3
});
console.log('res', res)
// true

是否所有的数字都大于3

every 数组中是否每一个元素，都能通过回调函数的测试，元素全部满足条件，返回 true, 否则返回 false。

let res = nums.every((item) => {
  return item > 3
});
console.log('res', res)
// false

注意：some, every 返回的都是布尔值。

是否有数字3，如果有则返回3

find 找到数组中满足回调函数的第一个元素的值。数组中有重复的元素，会返回第一个查找到的元素。

let res = nums.find((item) => {
  return item === 3
});
console.log('res', res)
// 3

findLast 与 find 相反，找到数组中满足回调函数的最后一个元素的值。

let res = nums.findLast((item) => {
  return item === 3
});
console.log('res', res)
// 3

是否有数字3，如果有则返回在数组中的位置

findIndex 找到数组中满足回调函数的第一个元素在数组中的索引。数组中有重复的元素，会返回第一个查找到的元素的索引。

let res = nums.findLastIndex((item) => {
  return item === 3
});
console.log('res', res)
// 2

findLastIndex 与 findIndex 相反 找到数组中满足回调函数的最后一个元素在数组中的索引。

let res = nums.findLastIndex((item) => {
  return item === 3
});
console.log('res', res)
// 2

累加数组中的值

reduce 可以用来计算数组中所有值的总和。

let res = nums.reduce((prev, cur) => {
  return prev + cur
}, 0);
console.log('res', res)
// 15

reduce 函数有两个参数，以下定义引自 MDN ： 第一个参数是一个回调函数： previousValue：上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。 currentValue：数组中正在处理的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。 currentIndex：数组中正在处理的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始。 array：用于遍历的数组。

第二个参数： 作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。

如果我们使用 forEach 来求和则比 reduce 更加复杂，语义化也不好。

let res = 0
nums.forEach((item) => {
  res += item
})
console.log('res', res)

我们还可以通过改变传入的初始值，影响返回的结果。

let res = nums.reduce((prev, cur) => {
  return prev + cur
}, 85);
console.log('res', res)
// 100

reduce 还有更加高级的用法，这里知道基础的用法就好。

以上就是数组的遍历方法，希望对大家有所帮助。