在实际应用中,我们经常用到循环遍历数组/对象,接下来谈谈各个循环的区别以及各个循环的应用;
目录
for循环 ( ex: for(let i = 0; i < n; i++ ) )
for...in循环 ( ex:for(key in Object) )
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的内置方法,有些很实用并且开发中经常用到