js中的for、for...in、for...of循环的区别和使用场景

在实际应用中，我们经常用到循环遍历数组/对象，接下来谈谈各个循环的区别以及各个循环的应用；

目录

for循环 ( ex: for(let i = 0; i < n; i++ ) )

for...in循环 ( ex:for(key in Object) )

for...of循环

小结

---

for循环 ( ex: for(let i = 0; i < n; i++ ) )

最常见通用的书写方式，可用于遍历数组/对象中的元素/键值，举个🌰:

遍历数组，实际开发：ul、select的子孩子标签可以用数组遍历的方式得到，优化代码(但是我们用Array的内置方法map更多一点)

let arr = [1, 2, 3]
let str = []
for ( let i = 0; i < arr.length; i++ ){
    console.log(arr[i]);    //1 2 3

}

遍历对象，一般在实际应用中很少使用这种方法，从下面示例中就可以看出，有点复杂，通常想提取对象中某属性的值用Object的静态方法就够用了；

let obj = {
    name:'Tom',
    age:18,
};

for (let i = 0; i < Object.keys(obj).length; i++ ){
    console.log(Object.keys(obj)[i]);   
    console.log(obj[Object.keys(obj)[i]]);    
}

// name Tom age 18

for...in循环 ( ex:for(key in Object) )

用于对象的遍历，最好不要用此语法遍历数组，遇到元素是字符串会出错；实际开发for和for...in都用，for相对多一点

Object：对象

key:对象中的属性名(键名)

let obj = {
    name:'Tom',
    age:18,
};


for ( key in obj){
    console.log(key, obj[key], obj.age, obj['name']);
}


// name Tom 18 Tom
// age 18 18 18

注意：循环中的key的基本类型是String，直接用obj.key取值是不行的，会打印undefined，对象支持数组取值的方式。

for...of循环

for...of 循环是 ECMAScript 6 (ES6) 中引入的迭代语句，用于遍历可迭代对象（如数组、字符串、Map、Set、生成器对象、NodeList等）不可迭代Object对象。如果是取值操作可以用，这种我目前用的还不多(ps:刚刚看直播王楚钦爆冷好难受嘤嘤嘤>O<)

let str = "Hello";
let arr = [1, 2, 3]
for (let char of str) {
    console.log(char);
}
// H e l l o

for (let char of arr) {
    console.log(char);
}
// 1 2 3

const myMap = new Map([
    [1, "one"],
    [2, "two"],
    [3, "three"],
]);

for (let char of myMap) {
    console.log(char);
}


// [1, one] [2, two] [3, three]

小结

• 遍历数组：for、 for...of 、(数组内置方法)forEach 、map(最常用) 、reduce
• 遍历对象:for...in

根据不同的需求灵活用不同的方法，大家可以在MDN上看看Array和Object的内置方法，有些很实用并且开发中经常用到