[JavaScript] for、forEach、for...of、for...in 的差別與比較

for、forEach、for...of、for...in 的差別與比較

寫在前面：本文不會寫太多的細節例子，畢竟這些基本知識還是比較簡單的。

• for 與 forEach

1、forEach 雖然是 for 循環的簡化版本，但是并不是說 forEach 就比 for 更好用，forEach 适用于循環次數未知，或者計算循環次數比較麻煩情況下使用效率更高，但是更為複雜的一些循環還是需要用到 for 循環效率更高。

2、forEach 不支援在循環中添加删除操作，因為在使用 forEach 循環的時候數組（集合）就已經被鎖定不能被修改。（改了也沒用）

var array=[];
array[0] = 1;
array[5] = 5;
console.log('foreach-------')
array.forEach(function(v, i) {
  v = 11;
  console.log(v);
})
console.log('foreach-------');
for(var j in array) {
  console.log(array[j])
}
foreach-------
11
11
foreach-------
1
5
           

3、在 for 循環中可以使用 continue，break 來控制循環和跳出循環，這個是 forEach 所不具備的。【在這種情況下，從性能的角度考慮，for 是要比 forEach 有優勢的。（一個長度為100的資料，你for循環到35的時候，實作了功能，達到了目的的話，這個時候可以 break 跳出循環的；使用 forEach 的話，是不能退出循環本身的。）】

4、是以沒有特殊情況我一般都用 for 循環，不會有坑，也沒覺得寫起來多麻煩，性能還最好，不用擔心相容性的問題( forEach 隻支援 IE9 及以上)。最主要的是，for有一個好處是可以break。

• for…in 作用在數組上【不推薦】

1、會跳過空位。

2、如果有原型屬性，原型屬性也會被通路

Array.prototype.test = function(){}
var array=[];
array[0] = 1;
array[5] = 5;
for(var i in array){
  console.log(i, array[i])
}
// 0 1
// 5 5
// test ƒ (){}
           

【會列印原型鍊上的屬性】

！！如果不想被通路原型

Array.prototype.test = function(){}
var array=[];
array[0] = 1;
array[5] = 5;
for(var i in array){
  if (array.hasOwnProperty(i) === true) { 
	console.log(i, array[i]) 
  }
}
// 0 1
// 5 5
           

【

hasOwnProperty()

方法會傳回一個布爾值，訓示對象自身屬性中是否具有指定的屬性】

所有繼承了

Object

的對象都會繼承到

hasOwnProperty

方法。這個方法可以用來檢測一個對象是否含有特定的自身屬性；和

in

運算符不同，該方法會忽略掉那些從原型鍊上繼承到的屬性。

• for…of

ES6 借鑒 C++、Java、C# 和 Python 語言，引入了

for...of

循環，作為周遊所有資料結構的統一的方法。

一個資料結構隻要部署了

Symbol.iterator

屬性，就被視為具有

iterator

接口，就可以用

for...of

循環周遊它的成員。也就是說，

for...of

循環内部調用的是資料結構的

Symbol.iterator

方法。

for...of

循環可以使用的範圍包括數組、Set 和 Map 結構、某些類似數組的對象（比如

arguments

對象、DOM NodeList 對象）、後文的 Generator 對象，以及字元串。

2、使用

for...of

作用在數組，或者類數組的對象上（比如 arguments 對象、DOM NodeList 對象）