JavaScript 对象怎么遍历

在日常写网页的过程中，我们经常会碰到这样的场景：手里有一个“用户信息小本本”，里面存着姓名、手机号、地址这些零散信息，要把这些信息一条条整理出来或者修改，就需要用到“遍历”——也就是把里面的内容逐个找出来。在JavaScript里，这个“用户信息小本本”就是对象，那怎么遍历它呢？咱们用生活里的例子一步步说清楚。

先搞懂：JavaScript对象是什么？

不用想复杂的定义，你就把它当成一个“带标签的收纳盒”。比如你要存自己的早餐清单，把每个食物和对应的数量对应起来，就能这么写：

`javascript

const breakfast = {

包子: 2,

豆浆: 1,

鸡蛋: 1

};

`

这里的“包子”“豆浆”叫属性名，2、1这些数字叫属性值，整个收纳盒就是对象。遍历这个对象，就是把“包子”“豆浆”这些标签，还有对应的数量，一个个拿出来看。

最常用的遍历：for...in 循环

这是咱们平时用得最多的遍历方式，就像你把收纳盒的盖子打开，一个个摸里面的标签。它的语法特别简单，直接给代码例子：

`javascript

// 遍历早餐对象的所有属性名

for (let key in breakfast) {

console.log(我今天吃了${key}，数量是${breakfast[key]});

}

`

运行之后会输出三行内容：“我今天吃了包子，数量是2”“我今天吃了豆浆，数量是1”“我今天吃了鸡蛋，数量是1”，刚好把所有内容都扫了一遍。

这里要提一个小注意点：如果对象里有“藏起来的属性”（比如程序员后来加的特殊属性），for...in也会扫到，不过平时咱们用的普通对象很少碰到这种情况，不用太担心。

只拿属性值：Object.values() 方法

有时候我们不需要看标签，只关心每个属性对应的内容，就像你收拾早餐的时候，只需要把包子、豆浆这些食物拿出来装袋，不用管它们的标签。这时候用Object.values()就很方便：

`javascript

const foodList = Object.values(breakfast);

console.log(foodList); // 输出：[2, 1, 1]

`

得到的是一个纯数组，里面全是属性值，直接用数组的方法处理就行，比如要算总食物数，直接用reduce就搞定，比循环一个个加简单多了。

只拿属性名：Object.keys() 方法

反过来，如果我们只需要标签，比如要打印“早餐清单：包子、豆浆、鸡蛋”，就用Object.keys()，它会把所有属性名打包成一个数组：

`javascript

const foodNames = Object.keys(breakfast);

console.log(foodNames); // 输出：["包子", "豆浆", "鸡蛋"]

`

拿到这个数组后，用join方法就能把它们拼成一句通顺的话，比如foodNames.join('、')，结果就是“包子、豆浆、鸡蛋”，做列表标题特别好用。

同时拿属性名和值：Object.entries() 方法

要是想把标签和内容配对用，比如做一个表格，每一行是“食物：数量”，那就用Object.entries()，它会把每个属性打包成一个小数组，第一个元素是属性名，第二个是属性值，所有小数组再组成一个大数组：

`javascript

const foodEntries = Object.entries(breakfast);

console.log(foodEntries);

// 输出：[["包子", 2], ["豆浆", 1], ["鸡蛋", 1]]

`

然后用forEach循环这个大数组，就能轻松生成表格行：

`javascript

foodEntries.forEach(([name, count]) => {

console.log(<tr><td>${name}</td><td>${count}</td></tr>);

});

`

这样就能直接贴到网页的表格里，不用自己手动拼接字符串，不容易出错。

选哪种遍历方式？看你的需求

如果只是想简单扫一遍所有内容，用for...in就行；只需要值就选Object.values()，只需要名就选Object.keys()，要名值配对就用Object.entries()，不用死记硬背，碰到对应需求选对应方法就好——毕竟编程就是解决问题，选顺手的方式最重要。