likes
comments
collection
share

JS数组遍历方式 小小总结一下

作者站长头像
站长
· 阅读数 10

start

  • 写这篇文章的起因是，很早之前，我老大哥 review 了一下我的代码。看完之后他给我点评了一句。

    番茄，你写的有关遍历的代码全是 forEach 一把梭

  • 有一些历史原因吧，反正归根到底就是自己掌握知识不熟练，今天再给自己一个机会，复习一下。

1. for

基础的 for 循环方式

2. forEach

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

  • 返回值：undefined;
  • forEach() 本身不会修改原数组,但是 callback 中可能会修改;
  • forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过;
  • 除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。
  • 使用 promise 或 async 函数作为 forEach() 等类似方法的 callback 参数，最好对造成的执行顺序影响多加考虑
  • forEach() 遍历的范围在第一次调用 callback 前就会确定。

3. map

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

  • 返回一个新数组，不修改原数组

  • map 函数返回值为： callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组

    4. filter

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

  • filter 不会改变原数组，它返回过滤后的新数组。

5. some

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

  • 数组一项满足条件，就返回 true。
  • 返回 true 会停止执行。
  • some() 遍历的范围在第一次调用 callback 前就会确定。

6. every

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

  • 若收到一个空数组，此方法在任何情况下都会返回 true。
  • 当所有的元素都符合条件才会返回 true

7. find

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

8. findIndex

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

9. reduce

const array = [15, 16, 17, 18, 19]

function reducer(previous, current, index, array) {
  const returns = previous + current
  console.log(`previous: ${previous}, current: ${current}, index: ${index}, returns: ${returns}`)
  return returns
}

array.reduce(reducer, '12')
  • 两个参数： 回调函数;初始值(选填)
  • 回调函数的参数 1.上次执行的返回值；2.当前循环的项；3.索引；4.数组

10. for in

遍历的是数组的索引（即对象的 key）

11. for of

for of 遍历的是数组元素值

  • 推荐在遍历对象的时候使用 for in ,在遍历数组的时候使用 for of 。
  • for in 循环出的是 key（并且 key 的类型是 string）,for of 循环出的是 value。
  • for of 是 es6 引新引入的特性，修复了 es5 引入的 for in 的不足。
  • for of 不能循环普通的对象，需要通过 Object.keys 搭配使用。

12. while && do while

while

var n = 0
var x = 0

while (n < 3) {
  n++
  x += n
}

do while

do statement
while (condition)

创建一个执行指定语句的循环，直到 condition 值为 false。在执行 statement 后检测 condition，所以指定的 statement 至少执行一次。

总结

上来这么多前端八股文，这谁顶得住哦。

深呼吸一下，和我一起简单的捋一下，其实很简单。

我写这篇文章就是希望自己以后在遇到需要遍历的场景的时候，有更多的选择，知道优缺点，选择最合适的方式去遍历。

例如：

  1. 想修改数组的每一项并得到一个新数组 ==> map(新数组)
  2. 想过滤数组中符合条件项的数组 ==> filter(新数组)
  3. 想判断数组是否有符合条件的项 ==> some(布尔值)
  4. 想判断数组是否都符合某一个条件 ==> every(布尔值)
  5. 遍历所有的项 ==> forEach(undefined)
  6. 找到符合某一条件的元素 find (元素)
  7. 找到符合某一条件的元素索引 findIndex(索引)
  8. for while do while for of 随个人喜好使用
  9. reduce 函数比较特殊，重点记住它的传参即可

end

  • 仅为个人复习整理
  • 其实我自己写一遍下来，对这些方法的掌握程度还是有很大提升。互勉