JavaScript 遍历数组的方法

汇总

函数	简介	返回值
for/for…of…	遍历数组
forEach	遍历数组，无返回值	undefined
map	遍历数组，返回一个由回调函数返回值组成的新数组	array
flatMap	先将二维数组转换为一维数组并去除空项，然后再遍历数组，返回一个由回调函数返回值组成的新数组	array
filter	遍历数组，返回判断条件为 true 的元素组成的新数组	array
find	遍历数组，返回判断条件为 true 的第一个元素，若没有则返回 undefined	any / undefined
findLast	遍历数组，返回判断条件为 true 的最后一个元素，若没有则返回 undefined	any / undefined
findIndex	遍历数组，返回判断条件为 true 的第一个元素的索引，若没有则返回 -1	number
findLastIndex	遍历数组，返回判断条件为 true 的最后一个元素的索引，若没有则返回 -1	number
reduce	默认从索引 1 开始遍历数组，每次执行时，将上一次回调函数执行结果作为参数传入，最后返回最终执行结果	any
reduceRight	同 reduce 函数，以从末尾向开头顺序遍历数组	any
some	遍历数组，当条件判断为 true 时终止并返回 true，空数组则始终返回 false	bool
every	遍历数组，当条件判断为 false 时终止并返回 fase，空数组则始终返回 true	bool

for/for…of…

// for

let str = ''

for (let i = 0; i < 9; i++)
  str = str + i

console.log(str) // "012345678"

// for…of…

const arr = ['a', 'b', 'c']

for (const element of arr)
  console.log(element)

// "a"
// "b"
// "c"

forEach

等同与 for/for…of…，无返回值。

const array1 = ['a', 'b', 'c']

array1.forEach(element => console.log(element))

// "a"
// "b"
// "c"

map

遍历数组并返回一个新数组，新数组由原数组中的每个元素都调用一次回调函数后的返回值组成。

const array1 = [1, 4, 9, 16]

const map1 = array1.map(x => x * 2)

console.log(map1) // [2, 8, 18, 32]

flatMap

先将二维数组转换为一维数组并去除空项，然后再遍历数组，返回一个由回调函数返回值组成的新数组。

const arr1 = [1, 2, [3], [4, 5], 6, []]

const flattened = arr1.flatMap(num => num)

console.log(flattened) // [1, 2, 3, 4, 5, 6]

filter

遍历数组，返回判断条件为 true 的元素组成的新数组，如果没有任何元素为 true，则返回空数组。

const words = [
  'spray',
  'limit',
  'elite',
  'exuberant',
  'destruction',
  'present',
]

const result = words.filter(word => word.length > 6)

console.log(result) // ["exuberant", "destruction", "present"]

find

遍历数组，返回判断条件为 true 的第一个元素，若没有则返回 undefined。

const array1 = [5, 12, 8, 130, 44]

const found = array1.find(element => element > 10)

console.log(found) // 12

findLast

遍历数组，返回判断条件为 true 的最后一个元素，若没有则返回 undefined。

const array1 = [5, 12, 50, 130, 44]

const found = array1.findLast(element => element > 45)

console.log(found) // 130

findIndex

遍历数组，返回判断条件为 true 的第一个元素的索引，若没有则返回 -1。

const array1 = [5, 12, 8, 130, 44]

const index = array1.findIndex(element => element > 13)

console.log(index) // 3

findLastIndex

遍历数组，返回判断条件为 true 的最后一个元素的索引，若没有则返回 -1。

const array1 = [5, 12, 8, 130, 44]

const index = array1.findLastIndex(element => element > 45)

console.log(index) // 3

reduce

函数：array.reduce(callbackFn, initialValue?)

未指定 initialValue 参数时，索引 0 的元素将作为初始值 initialValue，从索引 1 开始遍历数组，每次执行时，将上一次回调函数执行结果作为参数传入，最后返回最终执行结果 。

指定 initialValue 参数时，迭代器将从索引 0 开始，并将参数 initialValue 作为初始值传入回调函数。

const array1 = [1, 2, 3, 4]

// 数组元素求和：0 + 1 + 2 + 3 + 4
const initialValue = 0
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
)

console.log(sumWithInitial) // 10

reduceRight

展示 reduce 与 reduceRight 之间的区别：

const a = ['1', '2', '3', '4', '5']
const left = a.reduce((prev, cur) => {
  return prev + cur
})
const right = a.reduceRight((prev, cur) => {
  return prev + cur
})

console.log(left) // "12345"
console.log(right) // "54321"

some

遍历数组，当条件判断为 true 时终止并返回 true，空数组则始终返回 false。

const array = [1, 2, 3, 4, 5]

// 检查数组中是否有偶数
const isEven = array.some(element => element % 2 === 0)

console.log(isEven) // true

every

遍历数组，当条件判断为 false 时终止并返回 fase，空数组则始终返回 true。

const array1 = [1, 30, 39, 29, 10, 13]

const isBelow = array1.every(currentValue => currentValue < 40)

console.log(isBelow) // true