面試官：有了 for 循環(huán) 為什么還要 forEach ？
來(lái)源：juejin.cn/post/7018097650687803422
本質(zhì)區(qū)別 for循環(huán)和forEach的語(yǔ)法區(qū)別for循環(huán)和forEach的性能區(qū)別
js中那么多循環(huán)，for?for...in?for...of?forEach，有些循環(huán)感覺(jué)上是大同小異今天我們討論下for循環(huán)和forEach的差異。我們從幾個(gè)維度展開(kāi)討論：
for循環(huán)和forEach的本質(zhì)區(qū)別。for循環(huán)和forEach的語(yǔ)法區(qū)別。for循環(huán)和forEach的性能區(qū)別。
本質(zhì)區(qū)別
for循環(huán)是js提出時(shí)就有的循環(huán)方法。forEach是ES5提出的，掛載在可迭代對(duì)象原型上的方法，例如Array?Set?Map。forEach是一個(gè)迭代器，負(fù)責(zé)遍歷可迭代對(duì)象。那么遍歷?，迭代?，可迭代對(duì)象?分別是什么呢。
遍歷?：指的對(duì)數(shù)據(jù)結(jié)構(gòu)的每一個(gè)成員進(jìn)行有規(guī)律的且為一次訪問(wèn)的行為。
迭代?：迭代是遞歸的一種特殊形式，是迭代器提供的一種方法，默認(rèn)情況下是按照一定順序逐個(gè)?訪問(wèn)數(shù)據(jù)結(jié)構(gòu)成員。迭代也是一種遍歷行為。
可迭代對(duì)象?：ES6中引入了?iterable?類(lèi)型，Array?Set?Map?String?arguments?NodeList?都屬于?iterable，他們特點(diǎn)就是都擁有?[Symbol.iterator]?方法，包含他的對(duì)象被認(rèn)為是可迭代的?iterable。
在了解這些后就知道?forEach?其實(shí)是一個(gè)迭代器，他與?for?循環(huán)本質(zhì)上的區(qū)別是?forEach?是負(fù)責(zé)遍歷（Array?Set?Map）可迭代對(duì)象的，而?for?循環(huán)是一種循環(huán)機(jī)制，只是能通過(guò)它遍歷出數(shù)組。
再來(lái)聊聊究竟什么是迭代器?，還記得之前提到的 Generator 生成器，當(dāng)它被調(diào)用時(shí)就會(huì)生成一個(gè)迭代器對(duì)象（Iterator Object），它有一個(gè)?.next()方法，每次調(diào)用返回一個(gè)對(duì)象{value:value,done:Boolean}，value返回的是?yield?后的返回值，當(dāng)?yield?結(jié)束，done變?yōu)?true，通過(guò)不斷調(diào)用并依次的迭代訪問(wèn)內(nèi)部的值。
迭代器?是一種特殊對(duì)象。ES6規(guī)范中它的標(biāo)志是返回對(duì)象的?next()?方法，迭代行為判斷在?done?之中。在不暴露內(nèi)部表示的情況下，迭代器實(shí)現(xiàn)了遍歷?？创a
let?arr?=?[1,?2,?3,?4]??//?可迭代對(duì)象
let?iterator?=?arr[Symbol.iterator]()??//?調(diào)用?Symbol.iterator?后生成了迭代器對(duì)象
console.log(iterator.next());?//?{value:?1,?done:?false}??訪問(wèn)迭代器對(duì)象的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}
我們看到了。只要是可迭代對(duì)象，調(diào)用內(nèi)部的?Symbol.iterator?都會(huì)提供一個(gè)迭代器，并根據(jù)迭代器返回的next?方法來(lái)訪問(wèn)內(nèi)部，這也是?for...of?的實(shí)現(xiàn)原理。
let?arr?=?[1,?2,?3,?4]
for?(const?item?of?arr)?{
????console.log(item);?//?1?2?3?4?
}
把調(diào)用?next?方法返回對(duì)象的?value?值并保存在?item?中，直到?value?為?undefined跳出循環(huán)，所有可迭代對(duì)象可供for...of消費(fèi)。再來(lái)看看其他可迭代對(duì)象：
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}
所以我們也能很直觀的看到可迭代對(duì)象中的?Symbol.iterator?屬性被調(diào)用時(shí)都能生成迭代器，而?forEach?也是生成一個(gè)迭代器，在內(nèi)部的回調(diào)函數(shù)中傳遞出每個(gè)元素的值。
（感興趣的同學(xué)可以搜下?forEach?源碼，?Array?Set?Map?實(shí)例上都掛載著?forEach，但網(wǎng)上的答案大多數(shù)是通過(guò)?length?判斷長(zhǎng)度， 利用for循環(huán)機(jī)制實(shí)現(xiàn)的。但在?Set?Map?上使用會(huì)報(bào)錯(cuò)，所以我認(rèn)為是調(diào)用的迭代器，不斷調(diào)用?next，傳參到回調(diào)函數(shù)。由于網(wǎng)上沒(méi)查到答案也不妄下斷言了，有答案的人可以評(píng)論區(qū)留言）
for循環(huán)和forEach的語(yǔ)法區(qū)別
了解了本質(zhì)區(qū)別，在應(yīng)用過(guò)程中，他們到底有什么語(yǔ)法區(qū)別呢？
forEach?的參數(shù)。forEach?的中斷。forEach?刪除自身元素，index不可被重置。for?循環(huán)可以控制循環(huán)起點(diǎn)。
forEach?的參數(shù)
我們真正了解?forEach?的完整傳參內(nèi)容嗎？它大概是這樣：
arr.forEach((self,index,arr)?=>{},this)
self：?數(shù)組當(dāng)前遍歷的元素，默認(rèn)從左往右依次獲取數(shù)組元素。
index：?數(shù)組當(dāng)前元素的索引，第一個(gè)元素索引為0，依次類(lèi)推。
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?實(shí)現(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?對(duì)函數(shù)進(jìn)行中斷或跳出循環(huán)的操作，我們?cè)?for循環(huán)中會(huì)用到一些中斷行為，對(duì)于優(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;?//報(bào)錯(cuò)
????};
});
arr.forEach((self,index)?=>?{
????console.log(self);
????if?(self?===?2)?{
????????continue;?//報(bào)錯(cuò)
????};
});
如果我一定要在?forEach?中跳出循環(huán)呢？其實(shí)是有辦法的，借助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?并不會(huì)報(bào)錯(cuò)，但是不會(huì)生效
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?中我們無(wú)法控制?index?的值，它只會(huì)無(wú)腦的自增直至大于數(shù)組的?length?跳出循環(huán)。所以也無(wú)法刪除自身進(jìn)行index重置，先看一個(gè)簡(jiǎn)單例子：
let?arr?=?[1,2,3,4]
arr.forEach((item,?index)?=>?{??
????console.log(item);?//?1?2?3?4??
????index++;
});
index不會(huì)隨著函數(shù)體內(nèi)部對(duì)它的增減而發(fā)生變化。在實(shí)際開(kāi)發(fā)中，遍歷數(shù)組同時(shí)刪除某項(xiàng)的操作十分常見(jiàn)，在使用forEach刪除時(shí)要注意。
for?循環(huán)可以控制循環(huán)起點(diǎn)
如上文提到的?forEach?的循環(huán)起點(diǎ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ù)組遍歷并刪除滋生的操作就可以寫(xiě)成
let?arr?=?[1,?2,?1],
????i?=?0,
????length?=?arr.length;
for?(;?i?????//?刪除數(shù)組中所有的1
????if?(arr[i]?===?1)?{
????????arr.splice(i,?1);
????????//重置i，否則i會(huì)跳一位
????????i--;
????};
};
console.log(arr);?//?[2]
//等價(jià)于
var?arr1?=?arr.filter(index?=>?index?!==?1);
console.log(arr1)?//?[2]
for循環(huán)和forEach的性能區(qū)別
在性能對(duì)比方面我們加入一個(gè)?map?迭代器，它與?filter?一樣都是生成新數(shù)組。我們對(duì)比?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)沒(méi)有額外的函數(shù)調(diào)用棧和上下文，所以它的實(shí)現(xiàn)最為簡(jiǎn)單。forEach：對(duì)于forEach來(lái)說(shuō)，它的函數(shù)簽名中包含了參數(shù)和上下文，所以性能會(huì)低于?for?循環(huán)。map：map?最慢的原因是因?yàn)?map?會(huì)返回一個(gè)新的數(shù)組，數(shù)組的創(chuàng)建和賦值會(huì)導(dǎo)致分配內(nèi)存空間，因此會(huì)帶來(lái)較大的性能開(kāi)銷(xiāo)。
如果將map嵌套在一個(gè)循環(huán)中，便會(huì)帶來(lái)更多不必要的內(nèi)存消耗。當(dāng)大家使用迭代器遍歷一個(gè)數(shù)組時(shí)，如果不需要返回一個(gè)新數(shù)組卻使用?map?是違背設(shè)計(jì)初衷的。在我前端合作開(kāi)發(fā)時(shí)見(jiàn)過(guò)很多人只是為了遍歷數(shù)組而用?map?的：
let?data?=?[];
let?data2?=?[1,2,3];
data2.map(item=>data.push(item));
寫(xiě)在最后：這是面試遇到的一個(gè)問(wèn)題，當(dāng)時(shí)只知道語(yǔ)法區(qū)別。并沒(méi)有從可迭代對(duì)象?，迭代器，生成器?和性能方面?，多角度進(jìn)一步區(qū)分兩者的異同，也希望能把一個(gè)簡(jiǎn)單的問(wèn)題從多角度展開(kāi)細(xì)講，讓大家正在搞懂搞透徹。