停止使用For循环来迭代数组，这里有更好的方法

全文共1979字，预计学习时长6分钟

图源：Unsplash  

For循环语句是把双刃剑。

它在我心中占有特殊的位置。

长期以来，我一直依赖它来摆脱while循环。

然而不可避免地，这会导致我忘记增加计数器变量。使用for循环来迭代数组的标准语法已经深深印入脑海：For i = 0，i < length，i++…

 

在教授编程时，我总是用已知迭代次数时使用for循环来区分while和for循环。其原因在于所有的循环语法都是预置好的——这样可以减少错误（尤其是对初学者而言），并使得在六个月后重新查看代码时可以更轻松地浏览。

 

在编写JavaScript代码时，我已开始远离了钟爱的迭代结构，转而使用.forEach（）方法，你也应该这样做。与公式化的for循环相比，.forEach（）方法进一步减少了开销，甚至能更清晰地传递代码的意图。这是因为方法的名称总是出现在描述块（block）的口述句中：对于数组中的每个元素，执行某些操作。

图源：Unsplash  

什么是.forEach()方法？

.forEach()作为数组类的内置方法被引入ECMAScript 2015（也称作ES6）。

 

根据Mozilla文档，该方法将回调作为参数。简单地说，回调是会对数组中的每个元素执行的函数。当需要对每个元素执行相同操作（该操作适合用函数实现）时，使用.forEach（）是最适合的。该函数有一个必需的参数，即当前值，以及分别用于索引，基本数组和已分配的this值的三个可选参数。

 

一个基本示例

为了演示.forEach（）方法的基本用法，定义一个整数数组并将每个值的平方打印到控制台。

 

let nums= [1,2,3,4,5];nums.forEach(function(n) {
   console.log(n ** 2); // 1, 4, 9, 16,25
});

包含索引

如果还想输出索引值该怎么办呢？可以在函数定义中包含第二个可选参数。

 

let nums= [1,2,3,4,5];nums.forEach(function(n,i) {
   console.log("i: " + n ** 2);
});
/*
  0: 1
  1: 4
  2: 9
  3: 16
  4: 25
*/

用.forEach()存储值

如果不想输出所有内容，而是将结果存储在新变量中该怎么办呢？

 

let nums= [1,2,3,4,5];
let result = nums.forEach(function(n) {
   return(n ** 2);
});
console.log(result); // undefined

正如上面的代码段所示，.forEach()方法没有返回值。事实上，使用.map()方法才是正确答案。不过，如果一定要通过.forEach()方法实现，可以手动为新数组赋值。

 

let nums= [1,2,3,4,5];
let result = [];
nums.forEach(function(n) {
   result.push(n**2);
});
console.log(result); // [1,4,9,16,25];

压缩回调函数

如果想进一步压缩代码，可以考虑将回调函数替换为箭头函数。

 

let nums= [1,2,3,4,5];

nums.forEach((n) => {
   console.log(n**2);
});

事实上，如果只使用值（没有可选参数），可以不要n两边的括号；如果循环只是单个语句，完全可以不要大括号{}。

 

let nums= [1,2,3,4,5];nums.forEach(n => console.log(n**2));

图源：Unsplash  

.forEach()有什么缺陷吗？

答案是肯定的，在选择编写代码方式时总需要进行一些权衡。一个潜在的缺点（实际上并不是缺点，只是为了鼓励更好的实践）是，无法像for循环一样修改每个索引中的原始值：

 

let nums= [1,2,3,4,5];for(let i=0; i<nums.length; i++) {
   nums[i] = nums[i] ** 2;
}console.log(nums); // [1,4,9,16,25]

更新：ES6中引入的for ... of循环旨在将.forEach（）替换为更简单且具有更高性能的标准。多谢分享此信息的读者，不胜感激！

推荐阅读专题

留言 点赞 发个朋友圈

我们一起分享AI学习与发展的干货

编译组：林柯秀、贺宇

相关链接：

https://medium.com/better-programming/stop-using-for-loops-to-iterate-over-arrays-5c46940e79d1

如需转载，请后台留言，遵守转载规范

推荐文章阅读

ACL2018论文集50篇解读

EMNLP2017论文集28篇论文解读

2018年AI三大顶会中国学术成果全链接

ACL2017 论文集：34篇解读干货全在这里

10篇AAAI2017经典论文回顾

长按识别二维码可添加关注

读芯君爱你