js的for in 和 for of的详解

for...infor...of 是 JavaScript 中的两种循环结构,它们用于不同的场景,适用于不同的数据类型。下面将详细介绍它们的用法、区别以及适用场景。

1. for...in 循环

for...in 用于遍历对象的可枚举属性(包括继承的属性)。

语法
javascript 复制代码
for (const key in object) { // 执行代码块 }
示例
javascript 复制代码
const person = { name: 'Alice', age: 25, city: 'New York' }; 
for (const key in person) { 

console.log(key, person[key]) // 输出属性名和对应的值

 }
注意事项
  • for...in 遍历对象时,会遍历其原型链上的可枚举属性。
  • 遍历数组时,虽然可以使用 for...in,但不推荐,因为它会返回数组的索引(字符串形式),可能会导致意外结果。
  • 可以使用 hasOwnProperty() 方法来过滤掉继承的属性。

2. for...of 循环

for...of 用于遍历可迭代对象(如数组、字符串、Map、Set等),直接获取元素的值。

语法
javascript 复制代码
for (const value of iterable) { // 执行代码块 }
示例
javascript 复制代码
const numbers = [1, 2, 3, 4, 5];
 for (const number of numbers) {

 console.log(number); // 输出数组中的每个元素 

}
注意事项
  • for...of 不能用于对象的遍历,只有可迭代对象(如数组、字符串、Map、Set)才能使用。
  • 对于字符串,for...of 会按字符进行遍历。
  • 它不会遍历数组的索引,而是直接访问元素的值,避免了 for...in 可能带来的问题。

3. 总结对比

特性 for...in for...of
遍历对象类型 对象的可枚举属性 可迭代对象(数组、字符串等)
结果 属性名(key) 属性值(value)
遍历方式 包括原型链上的可枚举属性 仅遍历对象本身的元素
不推荐用于 数组(可能导致意外结果) 对象
使用场景 遍历对象的属性 遍历数组、字符串等可迭代对象

4. 使用场景

  • for...in: 当你需要访问对象的属性时,例如处理配置对象、字典或简单的键值对。

    javascript 复制代码
    const settings = { volume: 10, brightness: 70 };
     for (const key in settings) { 
    
    console.log(`${key}: ${settings[key]}`);
    
     }
  • for...of: 当你需要遍历数组或其他可迭代对象的元素时,特别是在处理列表或序列时更为简洁和直观。

    javascript 复制代码
    const fruits = ['apple', 'banana', 'cherry'];
     for (const fruit of fruits) {
    
     console.log(fruit); 
    
    }

5. 结论

在选择使用时,考虑你需要遍历的对象类型和目的,选择最合适的循环结构可以提高代码的可读性和性能。

相关推荐
心情好的小球藻2 分钟前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
群联云防护小杜10 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
惜.己14 分钟前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json
Y40900120 分钟前
C语言转Java语言,相同与相异之处
java·c语言·开发语言·笔记
DanB2423 分钟前
html复习
javascript·microsoft·html
汉得数字平台28 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹35 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
古月-一个C++方向的小白6 小时前
C++11之lambda表达式与包装器
开发语言·c++
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss