[JavaScript] 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 对象）