全文共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学习与发展的干货
如转载，请后台留言，遵守转载规范