面試官：有了 for 循環(huán) 為什么還要 forEach ？

來源：juejin.cn/post/7018097650687803422

• 本質(zhì)區(qū)別
• for循環(huán)和forEach的語法區(qū)別
• for循環(huán)和forEach的性能區(qū)別

js中那么多循環(huán)，for for...in for...of forEach，有些循環(huán)感覺上是大同小異今天我們討論下for循環(huán)和forEach的差異。我們從幾個維度展開討論：

1. for循環(huán)和forEach的本質(zhì)區(qū)別。
2. for循環(huán)和forEach的語法區(qū)別。
3. for循環(huán)和forEach的性能區(qū)別。

本質(zhì)區(qū)別

for循環(huán)是js提出時就有的循環(huán)方法。forEach是ES5提出的，掛載在可迭代對象原型上的方法，例如Array Set Map。forEach是一個迭代器，負(fù)責(zé)遍歷可迭代對象。那么遍歷 ，迭代 ，可迭代對象 分別是什么呢。

遍歷 ：指的對數(shù)據(jù)結(jié)構(gòu)的每一個成員進(jìn)行有規(guī)律的且為一次訪問的行為。

迭代 ：迭代是遞歸的一種特殊形式，是迭代器提供的一種方法，默認(rèn)情況下是按照一定順序逐個 訪問數(shù)據(jù)結(jié)構(gòu)成員。迭代也是一種遍歷行為。

可迭代對象 ：ES6中引入了 iterable 類型，Array Set Map String arguments NodeList 都屬于 iterable，他們特點就是都擁有 [Symbol.iterator] 方法，包含他的對象被認(rèn)為是可迭代的 iterable。

在了解這些后就知道 forEach 其實是一個迭代器，他與 for 循環(huán)本質(zhì)上的區(qū)別是 forEach 是負(fù)責(zé)遍歷（Array Set Map）可迭代對象的，而 for 循環(huán)是一種循環(huán)機(jī)制，只是能通過它遍歷出數(shù)組。

再來聊聊究竟什么是迭代器 ，還記得之前提到的 Generator 生成器，當(dāng)它被調(diào)用時就會生成一個迭代器對象（Iterator Object），它有一個 .next()方法，每次調(diào)用返回一個對象{value:value,done:Boolean}，value返回的是 yield 后的返回值，當(dāng) yield 結(jié)束，done變?yōu)?true，通過不斷調(diào)用并依次的迭代訪問內(nèi)部的值。

迭代器 是一種特殊對象。ES6規(guī)范中它的標(biāo)志是返回對象的 next() 方法，迭代行為判斷在 done 之中。在不暴露內(nèi)部表示的情況下，迭代器實現(xiàn)了遍歷。看代碼

let?arr?=?[1,?2,?3,?4]??//?可迭代對象
let?iterator?=?arr[Symbol.iterator]()??//?調(diào)用?Symbol.iterator?后生成了迭代器對象
console.log(iterator.next());?//?{value:?1,?done:?false}??訪問迭代器對象的next方法
console.log(iterator.next());?//?{value:?2,?done:?false}
console.log(iterator.next());?//?{value:?3,?done:?false}
console.log(iterator.next());?//?{value:?4,?done:?false}
console.log(iterator.next());?//?{value:?undefined,?done:?true}

我們看到了。只要是可迭代對象，調(diào)用內(nèi)部的 Symbol.iterator 都會提供一個迭代器，并根據(jù)迭代器返回的next 方法來訪問內(nèi)部，這也是 for...of 的實現(xiàn)原理。

let?arr?=?[1,?2,?3,?4]
for?(const?item?of?arr)?{
????console.log(item);?//?1?2?3?4?
}

把調(diào)用 next 方法返回對象的 value 值并保存在 item 中，直到 value 為 undefined跳出循環(huán)，所有可迭代對象可供for...of消費。再來看看其他可迭代對象：

function?num(params)?{
????console.log(arguments);?//?Arguments(6)?[1,?2,?3,?4,?callee:??,?Symbol(Symbol.iterator):??]
????let?iterator?=?arguments[Symbol.iterator]()
????console.log(iterator.next());?//?{value:?1,?done:?false}
????console.log(iterator.next());?//?{value:?2,?done:?false}
????console.log(iterator.next());?//?{value:?3,?done:?false}
????console.log(iterator.next());?//?{value:?4,?done:?false}
????console.log(iterator.next());?//?{value:?undefined,?done:?true}
}
num(1,?2,?3,?4)

let?set?=?new?Set('1234')
set.forEach(item?=>?{
????console.log(item);?//?1?2?3?4
})
let?iterator?=?set[Symbol.iterator]()
console.log(iterator.next());?//?{value:?1,?done:?false}
console.log(iterator.next());?//?{value:?2,?done:?false}
console.log(iterator.next());?//?{value:?3,?done:?false}
console.log(iterator.next());?//?{value:?4,?done:?false}
console.log(iterator.next());?//?{value:?undefined,?done:?true}

所以我們也能很直觀的看到可迭代對象中的 Symbol.iterator 屬性被調(diào)用時都能生成迭代器，而 forEach 也是生成一個迭代器，在內(nèi)部的回調(diào)函數(shù)中傳遞出每個元素的值。

（感興趣的同學(xué)可以搜下 forEach 源碼， Array Set Map 實例上都掛載著 forEach，但網(wǎng)上的答案大多數(shù)是通過 length 判斷長度， 利用for循環(huán)機(jī)制實現(xiàn)的。但在 Set Map 上使用會報錯，所以我認(rèn)為是調(diào)用的迭代器，不斷調(diào)用 next，傳參到回調(diào)函數(shù)。由于網(wǎng)上沒查到答案也不妄下斷言了，有答案的人可以評論區(qū)留言）

for循環(huán)和forEach的語法區(qū)別

了解了本質(zhì)區(qū)別，在應(yīng)用過程中，他們到底有什么語法區(qū)別呢？

1. forEach 的參數(shù)。
2. forEach 的中斷。
3. forEach 刪除自身元素，index不可被重置。
4. for 循環(huán)可以控制循環(huán)起點。

forEach 的參數(shù)

我們真正了解 forEach 的完整傳參內(nèi)容嗎？它大概是這樣：

arr.forEach((self,index,arr)?=>{},this)

self： 數(shù)組當(dāng)前遍歷的元素，默認(rèn)從左往右依次獲取數(shù)組元素。

index： 數(shù)組當(dāng)前元素的索引，第一個元素索引為0，依次類推。

arr： 當(dāng)前遍歷的數(shù)組。

this： 回調(diào)函數(shù)中this指向。

let?arr?=?[1,?2,?3,?4];
let?person?=?{
????name:?'技術(shù)直男星辰'
};
arr.forEach(function?(self,?index,?arr)?{
????console.log(`當(dāng)前元素為${self}索引為${index},屬于數(shù)組${arr}`);
????console.log(this.name+='真帥');
},?person)

我們可以利用 arr 實現(xiàn)數(shù)組去重：

let?arr1?=?[1,?2,?1,?3,?1];
let?arr2?=?[];
arr1.forEach(function?(self,?index,?arr)?{
????arr.indexOf(self)?===?index???arr2.push(self)?:?null;
});
console.log(arr2);???//?[1,2,3]

forEach 的中斷

在js中有break return continue 對函數(shù)進(jìn)行中斷或跳出循環(huán)的操作，我們在 for循環(huán)中會用到一些中斷行為，對于優(yōu)化數(shù)組遍歷查找是很好的，但由于forEach屬于迭代器，只能按序依次遍歷完成，所以不支持上述的中斷行為。

let?arr?=?[1,?2,?3,?4],
????i?=?0,
????length?=?arr.length;
for?(;?i?????console.log(arr[i]);?//1,2
????if?(arr[i]?===?2)?{
????????break;
????};
};

arr.forEach((self,index)?=>?{
????console.log(self);
????if?(self?===?2)?{
????????break;?//報錯
????};
});

arr.forEach((self,index)?=>?{
????console.log(self);
????if?(self?===?2)?{
????????continue;?//報錯
????};
});

如果我一定要在 forEach 中跳出循環(huán)呢？其實是有辦法的，借助try/catch：

try?{
????var?arr?=?[1,?2,?3,?4];
????arr.forEach(function?(item,?index)?{
????????//跳出條件
????????if?(item?===?3)?{
????????????throw?new?Error("LoopTerminates");
????????}
????????//do?something
????????console.log(item);
????});
}?catch?(e)?{
????if?(e.message?!==?"LoopTerminates")?throw?e;
};

若遇到 return 并不會報錯，但是不會生效

let?arr?=?[1,?2,?3,?4];function?find(array,?num)?{???????array.forEach((self,?index)?=>?{???????????????if?(self?===?num)?{?????????????????return?index;??????????????};???????});};let?index?=?find(arr,?2);//?undefined

forEach 刪除自身元素，index不可被重置

在 forEach 中我們無法控制 index 的值，它只會無腦的自增直至大于數(shù)組的 length 跳出循環(huán)。所以也無法刪除自身進(jìn)行index重置，先看一個簡單例子：

let?arr?=?[1,2,3,4]
arr.forEach((item,?index)?=>?{??
????console.log(item);?//?1?2?3?4??
????index++;
});

index不會隨著函數(shù)體內(nèi)部對它的增減而發(fā)生變化。在實際開發(fā)中，遍歷數(shù)組同時刪除某項的操作十分常見，在使用forEach刪除時要注意。

for 循環(huán)可以控制循環(huán)起點

如上文提到的 forEach 的循環(huán)起點只能為0不能進(jìn)行人為干預(yù)，而for循環(huán)不同：

let?arr?=?[1,?2,?3,?4],
????i?=?1,
????length?=?arr.length;

for?(;?i?????console.log(arr[i])?//?2?3?4
};

那之前的數(shù)組遍歷并刪除滋生的操作就可以寫成

let?arr?=?[1,?2,?1],
????i?=?0,
????length?=?arr.length;

for?(;?i?????//?刪除數(shù)組中所有的1
????if?(arr[i]?===?1)?{
????????arr.splice(i,?1);
????????//重置i，否則i會跳一位
????????i--;
????};
};
console.log(arr);?//?[2]
//等價于
var?arr1?=?arr.filter(index?=>?index?!==?1);
console.log(arr1)?//?[2]

for循環(huán)和forEach的性能區(qū)別

在性能對比方面我們加入一個 map 迭代器，它與 filter 一樣都是生成新數(shù)組。我們對比 for forEach map 的性能在瀏覽器環(huán)境中都是什么樣的：

性能比較 ：for > forEach > map 在chrome 62 和 Node.js v9.1.0環(huán)境下：for 循環(huán)比 forEach 快1倍，forEach 比 map 快20%左右。

原因分析 for：for循環(huán)沒有額外的函數(shù)調(diào)用棧和上下文，所以它的實現(xiàn)最為簡單。forEach：對于forEach來說，它的函數(shù)簽名中包含了參數(shù)和上下文，所以性能會低于 for 循環(huán)。map：map 最慢的原因是因為 map 會返回一個新的數(shù)組，數(shù)組的創(chuàng)建和賦值會導(dǎo)致分配內(nèi)存空間，因此會帶來較大的性能開銷。

如果將map嵌套在一個循環(huán)中，便會帶來更多不必要的內(nèi)存消耗。當(dāng)大家使用迭代器遍歷一個數(shù)組時，如果不需要返回一個新數(shù)組卻使用 map 是違背設(shè)計初衷的。在我前端合作開發(fā)時見過很多人只是為了遍歷數(shù)組而用 map 的：

let?data?=?[];
let?data2?=?[1,2,3];
data2.map(item=>data.push(item));

寫在最后：這是面試遇到的一個問題，當(dāng)時只知道語法區(qū)別。并沒有從可迭代對象 ，迭代器，生成器 和性能方面 ，多角度進(jìn)一步區(qū)分兩者的異同，也希望能把一個簡單的問題從多角度展開細(xì)講，讓大家正在搞懂搞透徹。

1.?PacVim：一個學(xué)習(xí)vim命令的游戲，再也不怕記不住了！
2.?100 行代碼透徹解析 RPC 原理
3.?阿里專家：如何畫出優(yōu)秀的架構(gòu)圖？
4.?從 Kafka 看時間輪算法設(shè)計
最近面試BAT，整理一份面試資料《Java面試BATJ通關(guān)手冊》，覆蓋了Java核心技術(shù)、JVM、Java并發(fā)、SSM、微服務(wù)、數(shù)據(jù)庫、數(shù)據(jù)結(jié)構(gòu)等等。
獲取方式：點“在看”，關(guān)注公眾號并回復(fù)?Java?領(lǐng)取，更多內(nèi)容陸續(xù)奉上。
PS：因公眾號平臺更改了推送規(guī)則，如果不想錯過內(nèi)容，記得讀完點一下“在看”，加個“星標(biāo)”，這樣每次新文章推送才會第一時間出現(xiàn)在你的訂閱列表里。
點“在看”支持小哈呀，謝謝啦??！