[].some & [].every & [].forEach & for循环

194 阅读1分钟

夜深人静,小酌一杯可乐,借着碳水的热量肝一篇总结javascript数组部分方法的文章。对比一下数组的some、every、forEach等方法。

通常我们遍历数组元素的方法有2种大方向

  • 命令式(for循环)
  • 函数式(数组方法)

for循环遍历

for循环的遍历能具体的分为3种:

  • for计数
  • for...in
  • for...of

以上遍历方式都有一个共同点, 能通过break关键字来提前终止遍历。

const name = ['jerry', 'tom', 'jack', 'alice']

for (let i = 0; i < name.length; i++) {
  console.log(name[i])
}

for (let i = 0; i < name.length; i++) {
  console.log(name[i])
  if (name[i] === 'tom') break  
  /* 不会打印 'jack' 'alice' */
}
const name = ['jerry', 'tom', 'jack', 'alice']

for (const i in name) {
  console.log(name[i])
}

for (const i in name) {
  console.log(name[i])
  if (name[i] === 'tom') break  
  /* 不会打印 'jack' 'alice' */  
}
const name = ['jerry', 'tom', 'jack', 'alice']

for(const i of name){
  console.log(i)
}

for(const i of name){
  console.log(i)
  if (i === 'tom') break  
  /* 不会打印 'jack' 'alice' */  
}

[].forEach

forEach() 方法对数组的每个元素执行一次给定的函数。

forEach 能够通过传入 callback 函数来遍历数组元素,但是无法使用 break return 或者其他方法中止遍历

const name = ['jerry', 'tom', 'jack', 'alice']

name.forEach(i => console.log(i))

[].every

every () 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

every的 callback 函数返回 false 等同于 for 循环的 break 关键字,也能达到提前中止遍历的目的。

const name = ['jerry', 'tom', 'jack', 'alice']

name.every(i => {
  console.log(i)
  if(i === 'tom') return false
  return true
})
/* 不会打印 'jack' 'alice' */  

\

[].some

some () 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

some的 callback 函数返回 true 等同于 for 循环的 break 关键字,也能达到提前中止遍历的目的。

const name = ['jerry', 'tom', 'jack', 'alice']

name.some(i => {
  console.log(i)
  if(i === 'tom') return true
})
/* 不会打印 'jack' 'alice' */

\

总结

当我们在对数组用函数式方式遍历时,但是又有提前中止遍历的需求, 可以使用some、every,forEach无法满足需求。