JS数组四种for循环写法

前言

---

前端开发中经常涉及到数组的相关操作：去重、过滤、求和、数据二次处理等等。都需要我们对数组进行循环。为了满足各种需求，JS除了提供最简单的for循环，在ES6和后续版本中也新增的诸如：map、filter、some、reduce等实用的方法。

各个方法都有他们的应用场景，过分追求性能，往往会忽略语义和可读性。

冷静地分析一下，如果只谈性能，显然是 for > forEach > map

为什么 for 的性能比较好？读一下 forEach 和 map 的规范就知道了。

至于foreach和map，map 会返回一个等长数组，forEach 不会，所以 forEach 大于 map。

但是哪个更快，和哪个更合适，并不应该划等号：

如果需要将数组按照某种规则映射为另一个数组            ☞   map

如果需要进行简单的遍历                                                ☞   forEach 或者 for of

如果需要对迭代器进行遍历                                            ☞   for of

如果需要过滤出符合条件的项                                         ☞  filter

如果需要先按照规则映射为新数组，再根据条件过滤     ☞   map + filter。

但是遇到明确强调性能的场景，依旧是推荐使用for，for的性能应该是毋庸置疑的。

for循环的四种写法

---

const persons = ['1', '2', '3', '4', '5', '6']
// 方法一
for (let i = 0; i < persons.length; i++) {
  console.log(persons[i])
}
// 方法二
for (let i = 0, len = persons.length; i < len; i++) {
  console.log(persons[i])
}
// 方法三
for (let i = 0, person; person = persons[i]; i++) {
  console.log(person)
}
// 方法四
for (let i = persons.length; i--;) {
  console.log(persons[i])
}

• 第一种方法是最常见的方式，不解释。

• 第二种方法是将persons.length缓存到变量len中,这样每次循环时就不会再读取数组的长度。

• 第三种方式是将取值与判断合并，通过不停的枚举每一项来循环，直到枚举到空值则循环结束。执行顺序是：

  • 第一步：先声明索引i = 0和变量person
  • 第二步：取出数组的第i项persons[i]赋值给变量person并判断是否为Truthy
  • 第三步：执行循环体，打印person
  • 第四步：i++。

    当第二步中person的值不再是Truthy时，循环结束。方法三甚至可以这样写

    for (let i = 0, person; person = persons[i++];) {
      console.log(person)
    }
    复制代码

• 第四种方法是倒序循环。执行的顺序是：

  • 第一步：获取数组长度，赋值给变量i
  • 第二步：判断i是否大于0并执行i--
  • 第三步：执行循环体，打印persons[i]，此时的i已经-1了

    从后向前，直到i === 0为止。这种方式不仅去除了每次循环中读取数组长度的操作,而且只创建了一个变量i。