卡卡網(wǎng)

當(dāng)你要迭代一個(gè)數(shù)組元素時(shí)，你或許出于習(xí)慣首先想到的是用for循環(huán)語(yǔ)句，其代碼也相當(dāng)簡(jiǎn)單，我們可看看以下示例：

var array = ['小明', '小杰', '小強(qiáng)', '小美']
for (var i = 0; i < array.length; i++) {
  const item = array[i];
  console.log(i, item);
}

現(xiàn)在，你有更多更簡(jiǎn)單的寫(xiě)法來(lái)實(shí)現(xiàn)這一結(jié)果，forEach語(yǔ)句就是其中之一。

相同的結(jié)果，使用 forEach 后更容易被閱讀、理解。

array.forEach(function(item, i) {
  console.log(i, item)
});

不過(guò)實(shí)際上這兩者還是略有差異，本篇就來(lái)介紹for與forEach循環(huán)的那些小差別。

for循環(huán)可能會(huì)產(chǎn)生全域變數(shù)

因?yàn)镴S 作用域是屬于函數(shù)作用域，而for循環(huán)在執(zhí)行時(shí)使用 var 所建立的變量是屬于在區(qū)塊 {} 內(nèi)，因此for循環(huán)運(yùn)行時(shí)所定義的變量常常會(huì)是建立在全域的環(huán)境下。

以下范例來(lái)說(shuō)，下列變量 i 就屬于全域的變量。

for (var i = 0; i < array.length; i++) {
  const item = array[i];
  console.log(i, item);
}
console.log(i); // 4

相對(duì)來(lái)說(shuō) forEach 使用回調(diào)函數(shù)就不容易踩到這個(gè)雷，不過(guò)for循環(huán)依然可以使用ES6 的 let, const 來(lái)解決作用域的問(wèn)題。

有關(guān)回調(diào)函數(shù)的文章：

• 什么是JavaScript回調(diào)函數(shù)以及如何使用它們
• 5示例分析了解JavaScript回調(diào)函數(shù)(callback function)

有關(guān)let、const的文章：

• 實(shí)例詳解何時(shí)使用JS中的let、var和const
• 實(shí)例詳解區(qū)別JS三種聲明方式：var,let,const

目前主流的文字編輯器，輸入 for 后預(yù)設(shè)都會(huì)使用 let 來(lái)定義索引 i 的變量。

for (let i = 0; i < array.length; i++) {
  const item = array[i];
  console.log(i, item);
}
console.log(i) // 無(wú)法取得 i

for 可以被中斷

雖然for循環(huán)目前的使用率較不如forEach，不過(guò)它可中斷運(yùn)行的方式在 forEach 中是沒(méi)有的，如果循環(huán)中有必要停止運(yùn)行，就可以使用for循環(huán)搭配break。

for (let i = 0; i < array.length; i++) {
  const item = array[i];
  if (i === 2) { // 執(zhí)行到索引 2 就會(huì)被中斷
    break;
  }
  console.log(i, item);
}

執(zhí)行到索引 2 就會(huì)被中斷，中斷后的循環(huán)將不會(huì)繼續(xù)運(yùn)行。

并非所有數(shù)組都能使用forEach

JavaScript 中的數(shù)組依據(jù)原型的不同，也有另一種分支稱(chēng)為類(lèi)數(shù)組（array-like），類(lèi)數(shù)組中的原型方法與一般定義的數(shù)組就有所不同，其中的方法就可能不包含forEach。

函數(shù)中的 arguments 就屬于類(lèi)數(shù)組，它的方法就不包含 forEach 的方法，因此它無(wú)法直接運(yùn)行forEach。

function fn() {
  console.log(arguments);
  // for 循環(huán)可以正常運(yùn)行
  for (let i = 0; i < arguments.length; i++) {
    const item = arguments[i];
    console.log(i, item);
  }

  // 錯(cuò)誤：Uncaught TypeError: arguments.forEach is not a function
  arguments.forEach(item => {
    console.log(item);
  });
}

fn('小明', '小杰', '小強(qiáng), '小美');

類(lèi)數(shù)組可以直接使用for循環(huán)來(lái)運(yùn)行它，如果要使用 forEach 的數(shù)組方法也是可行，只要將類(lèi)數(shù)組透過(guò)ES6 的“展開(kāi)” 語(yǔ)法轉(zhuǎn)換為純數(shù)組即可（[...]）。

如以下代碼中就透過(guò)展開(kāi)將 arguments 轉(zhuǎn)變?yōu)榧償?shù)組arg，那么 arg 變量就可以使用 forEach 的陣列方法。

function fn() {
  const arg = [...arguments];
  arg.forEach(item => console.log(item))
}

fn('小明', '小杰', '小強(qiáng)', '小美');

總結(jié)

本文通過(guò)示例，介紹了JavaScript中for與foreach循環(huán)的差異，我們?cè)谑褂弥行枰私鈨烧叩牟煌?，從而選用更加合適的語(yǔ)句。

相關(guān)文章

• 實(shí)測(cè)速度比較：JS中的for、for...of和forEach循環(huán)
• JS中不兼容IE瀏覽器的循環(huán)語(yǔ)句有哪些？for..of等
• JS: forEach和for不同的功能表現(xiàn)【實(shí)例】

標(biāo)簽: for  forEach  forEach方法  for循環(huán)