JavaScript中for与forEach循环的三个区别【示例】
作者:admin 时间:2022-7-4 17:54:28 浏览:当你要迭代一个数组元素时，你或许出于习惯首先想到的是用for循环语句，其代码也相当简单，我们可看看以下示例：
var array = ['小明', '小杰', '小强', '小美']
for (var i = 0; i < array.length; i++) {
const item = array[i];
console.log(i, item);
}
现在，你有更多更简单的写法来实现这一结果，forEach语句就是其中之一。
相同的结果，使用 forEach 后更容易被阅读、理解。
array.forEach(function(item, i) {
console.log(i, item)
});不过实际上这两者还是略有差异，本篇就来介绍for与forEach循环的那些小差别。
for循环可能会产生全域变数
因为JS 作用域是属于函数作用域，而for循环在执行时使用 var 所建立的变量是属于在区块 {} 内，因此for循环运行时所定义的变量常常会是建立在全域的环境下。
以下范例来说，下列变量 i 就属于全域的变量。
for (var i = 0; i < array.length; i++) {
const item = array[i];
console.log(i, item);
}
console.log(i); // 4相对来说 forEach 使用回调函数就不容易踩到这个雷，不过for循环依然可以使用ES6 的 let, const 来解决作用域的问题。
有关回调函数的文章：
有关let、const的文章：
目前主流的文字编辑器，输入 for 后预设都会使用 let 来定义索引 i 的变量。
for (let i = 0; i < array.length; i++) {
const item = array[i];
console.log(i, item);
}
console.log(i) // 无法取得 ifor 可以被中断
虽然for循环目前的使用率较不如forEach，不过它可中断运行的方式在 forEach 中是没有的，如果循环中有必要停止运行，就可以使用for循环搭配break。
for (let i = 0; i < array.length; i++) {
const item = array[i];
if (i === 2) { // 执行到索引 2 就会被中断
break;
}
console.log(i, item);
}执行到索引 2 就会被中断，中断后的循环将不会继续运行。
并非所有数组都能使用forEach
JavaScript 中的数组依据原型的不同，也有另一种分支称为类数组（array-like），类数组中的原型方法与一般定义的数组就有所不同，其中的方法就可能不包含forEach。
函数中的 arguments 就属于类数组，它的方法就不包含 forEach 的方法，因此它无法直接运行forEach。
function fn() {
console.log(arguments);
// for 循环可以正常運行
for (let i = 0; i < arguments.length; i++) {
const item = arguments[i];
console.log(i, item);
}
// 錯誤：Uncaught TypeError: arguments.forEach is not a function
arguments.forEach(item => {
console.log(item);
});
}
fn('小明', '小杰', '小强, '小美');类数组可以直接使用for循环来运行它，如果要使用 forEach 的数组方法也是可行，只要将类数组透过ES6 的“展开” 语法转换为纯数组即可（[...]）。
如以下代码中就透过展开将 arguments 转变为纯数组arg，那么 arg 变量就可以使用 forEach 的阵列方法。
function fn() {
const arg = [...arguments];
arg.forEach(item => console.log(item))
}
fn('小明', '小杰', '小强', '小美');总结
本文通过示例，介绍了JavaScript中for与foreach循环的差异，我们在使用中需要了解两者的不同，从而选用更加合适的语句。
相关文章
- 站长推荐
