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. 结论

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

相关推荐
持梦远方8 分钟前
C 语言基础入门:基本数据类型与运算符详解
c语言·开发语言·c++
abigale0313 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
zzywxc78725 分钟前
AI 正在深度重构软件开发的底层逻辑和全生命周期,从技术演进、流程重构和未来趋势三个维度进行系统性分析
java·大数据·开发语言·人工智能·spring
专注API从业者33 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile36 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399739 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊44 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火44 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
DES 仿真实践家2 小时前
【Day 11-N22】Python类(3)——Python的继承性、多继承、方法重写
开发语言·笔记·python
Code Warrior3 小时前
【每日算法】专题五_位运算
开发语言·c++