技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

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)
});

不过实际上这两者还是略有差异,本篇就来介绍forforEach循环的那些小差别。

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) // 无法取得 i

for 可以被中断

虽然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中forforeach循环的差异,我们在使用中需要了解两者的不同,从而选用更加合适的语句。

相关文章

标签: for  forEach  forEach方法  for循环  
x
x
  • 站长推荐