【JavaScript】for循环整理：forEach、for in、 for of的区别使用

数组 forEach

• 遍历数组，并让每一项执行一个函数；
• 参数函数第一个形参代表当前的值；第二个形参代表当前的序号；第三个形参代表数组本身；

不能使用break退出循环，不能使用return返回到外层

var arr = [1,2,3,4];//forEach执行四次
//仅用于数组，内部不能使用break,continue
arr.forEach((value,key,arr)=>{
    if(value ==="a") return;//不能返回到上层，只能跳过下面语句继续执行循环
    console.log(value);
    console.log(key);
    console.log(arr);
});

对象 for in （ES5）

• 作用于数组时，循环出来的key是一个String，不是数字

for(let key in arr){
    console.log(key);//数组下标
    console.log(arr[key]);//值
    console.log(typeof key);//string
}

• 作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性,数组原型链上的属性都能被访问到

let arr = ["a","b","c","d"];
arr.name = "nameval";
Array.prototype.title = "titleval";

for(let key in arr){
    console.log(key);//0,1,2,3,name,title
    console.log(arr[key]);//a,b,c,d,nameval,titleval
    console.log(typeof key);//string
}

• 遍历对象

let Obj = {
    a: 1,
    b: 2
};
Obj.name = 3;
Obj.type = 4;
Object.prototype.title = "objtitle";

for (let key in Obj) {
    console.log(key);//对象属性名称a,b,name,type,title
    console.log(Obj[key]);//值1,2,3,4,objtitle
}

数组 for of （ES6）

• 循环出来的是value
• 可以正确的响应break，continue，return语句
• for-of主要用于数组、大部分类数组对象(即可迭代对象)

let arr = ["a", "b", "c", "d"];
arr.name = "arrname";
Array.prototype.title = "arrtitle";

for (let value of arr) {
    console.log(value);//a,b,c,d
}

let Oarr = "history";
for (let value of Oarr) {
    console.log(value);//h,i,s,t,o,r,y
}

注意:for-of循环不支持普通对象,但是如果你想迭代一个对象的属性,可以使用for-in循环(这也是它的本职工作)或者内建的Object.keys()方法

var student={
    name:'wujunchuan',
    age:22,
    locate:{
    country:'china',
    city:'xiamen',
    school:'XMUT'
    }
}
for(var key of Object.keys(student)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+student[key]);
}

//或者直接使用for-in
for(var prop in  student){
  console.log(prop+': '+student[prop]);
}

for...of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray，arguments 对象等等)上创建一个迭代循环，对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩.

for of只可以循环可迭代对象的可迭代属性，不可迭代属性在循环中被忽略了。

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}