JS中的for循环

在项目中，我们常常会遇到需要循环去处理数据的地方，常用的循环方式有for，for...in，for...of，forEach。这三个有什么区别嘞？下面就简单的了解一下相关的用法与区别。

一、for循环

        for循环是根据数组的长度去确定循环次数的，而对象是没有长度这个属性的，所以，for循环不能用来遍历对象，可以用来遍历数组和字符串。

var arr = [1,2,3,4,5,6]

var obj={
    name:"小陈",
    age:20,
}

var str="你好，JavaScript"

//for循环遍历数组

for (let index = 0; index < arr.length; index++) console.log(arr[index]);


//for循环不能用于遍历对象，对象没有length属性

//for循环遍历字符串
for (let index = 0; index < str.length; index++) console.log(str[index]);

二、for...in循环

         for...in循环也是JS常用的循环方式，可以用来遍历数组、对象、字符串，特别适合遍历对象，用于遍历属性的键名。

var arr = [1,2,3,4,5,6]

var obj={
    name:"小陈",
    age:20,
}

var str="你好，JavaScript"

//for...in循环数组
for (const i in arr) {
    console.log(arr[i]);
}

//for...in循环对象
for (const key in obj) {
    //Object.hasOwnProperty用于用来判断一个属性是定义在对象本身而不是继承自原型链。call()改变this指向
    if (Object.hasOwnProperty.call(obj, key)) {
        const element = obj[key];
        console.log(element);
    }
}

//for...in循环字符串
for (const i in str) {
    console.log(str[i]);
}

三、for...of循环

        for...of循环直接用来遍历属性值，不是遍历键名和下标

var arr = [1,2,3,4,5,6]

var obj={
    name:"小陈",
    age:20,
}

var str="你好，JavaScript"

//for...of遍历数组,直接遍历的数组的属性值，而不是下标
for (const key of arr) {
    console.log(key);
}

//for...of遍历对象会报错
for (const key of obj) {
    console.log(key);
}

//for...of遍历字符,直接遍历的字符的属性值，而不是下标
for (const key of str) {
    console.log(key);
}

 四、forEach循环

        只能用于遍历数组。

var arr = [1,2,3,4,5,6]

var obj={
    name:"小陈",
    age:20,
}

var str="你好，JavaScript"

//forEach循环数组，三个参数分别为：属性值、对应的下标、数据源
arr.forEach((item,index,arr)=>{
    console.log(item,index,arr);
})

//forEach不能用于遍历对象，对象上面没有这个方法
obj.forEach((item,index,arr)=>{
    console.log(item,index,arr);
})

//forEach不能用于遍历字符串，字符串上面没有这个方法
str.forEach((item,index,arr)=>{
    console.log(item,index,arr);
})

五、遍历对象

        为防止上面的内容产生误导，啊啊啊，那怎么遍历对象呀，只有用for...in么？他看起来好麻烦，就没用类似于forEach的方法么？答案肯定是有的。所以，就整理一下简单的遍历对象的方法，防止大家产生遍历对象只能用for...in的错误概念

var obj={
    name:"小陈",
    age:20,
}

//遍历键名，输出键名组成的数组
console.log(Object.keys(obj));
//遍历键值，输出键值组成的数组
console.log(Object.values(obj));

六、总结

• for循环遍历数据的长度，根据下标获取到对应元素，不能遍历对象（对象没有长度这个属性）
• for...in循环对于对象来说，遍历对象的键名，对于数组和字符串来说，遍历属性的长度，一般用于遍历对象
• for...of直接遍历数据的属性值，遍历对象会报错。
• forEach循环只能用于遍历数组，三个参数分别为属性值、属性值下标、数据源