建议使用 for of 循环？分享 1 段优质 JS 代码片段！

本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 900+ 字，整篇阅读约需 1 分钟。

今天分享一段优质 JS 代码片段，展示了用 for of 对两种不同的数据结构（对象和数组）的遍历。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

const user = {
    name: 'Alice',
    age: 30,
    job: 'developer'
};
for (const [key, value] of Object.entries(user)) {
    console.log(`${key}: ${value}`);
}

const users = [
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 25 }
];
for (const { name, age } of users) {
    console.log(`${name} is ${age} years old`);
}

分享原因

这段代码只使用 for of 就有效的遍历了对象和数组，并借助解构赋值，轻松处理其中的数据。

当然，没有一种循环方式在所有情况下都是绝对最优的，需要根据具体的情况来选择最合适的循环方式。

推荐只使用 for of 配上解构赋值去遍历对象和数组，只是因为这种简洁的循环和数据处理方式，很值得我们去使用和学习！

代码解析

1. for (const [key, value] of Object.entries(user))

首先定义了一个名为 user 的对象，包含 name、age 和 job 三个属性。

Object.entries(user) 会返回一个数组，其中的每个元素都是一个包含对象属性名和对应属性值的数组。

for...of 循环遍历这个返回的数组。在每次循环中，通过解构将当前元素拆分为 key 和 value 两个变量。

2. for (const { name, age } of users)

定义了一个名为 users 的数组，其中包含两个对象，每个对象都有 name 和 age 属性。

for...of 循环直接遍历这个数组。

在每次循环中，通过对象解构从当前的数组元素（对象）中提取出 name 和 age 属性。

3. 循环方式的选择

总的来说，没有一种循环方式在所有情况下都是绝对最优的，需要根据具体的情况来选择最合适的循环方式。

关于数组：

如果需要精确控制循环流程，或者需要通过索引来操作数组，for 循环可能更合适。

如果只是简单地遍历数组并对每个元素进行操作，且不需要中断循环或获取索引，forEach 或 for...of 可能更方便，但更推荐使用 for...of 。

关于对象：

遍历对象自身的和继承的可枚举属性，用 for...in 。

只需遍历对象自身的可枚举属性，用 for ... of 。