为什么使用数组迭代中的“for”是个坏主意？

在前端开发中，我们经常需要对数组进行迭代操作，以获取其中的数据或者进行一些计算。通常我们会选择使用 for 循环来完成这个任务，但实际上，这种做法往往存在着一些问题。

问题所在

1. 繁琐的语法

使用 for 循环迭代数组时，我们需要手动维护一个循环变量和数组长度，代码看起来非常冗长：

const array = [1, 2, 3]
for (let i = 0; i < array.length; i++) {
  // do something with array[i]
}

而且这种写法还容易出错，例如如果我们在循环过程中修改了数组长度，那么就会导致循环出错。

2. 不易维护性

如果在多个地方都使用 for 循环来迭代数组，那么每次修改数组操作时，都需要修改所有相关的 for 循环代码，这样不仅容易出错，也不利于维护。

3. 没有语义化

使用 for 循环来迭代数组时，代码缺乏语义化，难以表达出我们要做什么事情。

解决方案

1. 使用高阶函数

为了解决以上问题，我们可以使用高阶函数来迭代数组。高阶函数是指那些接受一个或多个函数作为参数，并返回一个新函数的函数。在 JavaScript 中，常见的高阶函数有 map、filter、reduce 等。

这种方式代码更加简洁易懂，例如：

const array = [1, 2, 3]
array.forEach(item => {
  // do something with item
})

2. 使用 for...of 循环

ES6 引入了一种新的循环语法 for...of，它可以遍历可迭代对象（包括数组、字符串、Map 等），具有语义化强、代码简洁等优点。

const array = [1, 2, 3]
for (const item of array) {
  // do something with item
}

总结

因此，在前端开发中，如果需要迭代数组，我们建议使用高阶函数或者 for...of 循环来实现，避免使用繁琐的 for 循环。这样不仅能让代码更加简洁易懂，还能提高代码的可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/7259