如何在 JavaScript 中遍历对象：深入指南，逐一理解遍历技巧

2024-03-07 09:37:59

在 JavaScript 的世界里，对象就像一个个容器，里面装着各种各样的数据，包括简单的数字、字符串，也可能装着其他的“容器”——也就是成员对象。如何把这些数据，尤其是藏在“容器”里的“容器”里的数据，都找出来呢？这就是我们要探讨的——遍历包含成员对象的对象。

方法一：`for...in` 循环

for...in 循环就像一把万能钥匙，可以打开对象的所有“抽屉”（可枚举属性），包括从“祖先”那里继承来的“抽屉”。

const myObject = {
  name: "小明",
  age: 18,
  address: {
    city: "北京",
    street: "长安街"
  }
};

for (let key in myObject) {
  console.log(key + ": " + myObject[key]);
}

这段代码会依次打印出 myObject 的所有属性名和属性值，包括 address 对象的 city 和 street。

方法二：`Object.keys()` 方法

Object.keys() 方法就像一份清单，列出了对象所有“抽屉”的名称（可枚举属性名）。拿到这份清单后，我们就可以逐个打开“抽屉”了。

const keys = Object.keys(myObject);

for (let i = 0; i < keys.length; i++) {
  let key = keys[i];
  console.log(key + ": " + myObject[key]);
}

这段代码的效果和 for...in 循环一样，也会打印出 myObject 的所有属性名和属性值。

方法三：`Object.values()` 方法

Object.values() 方法则直接列出了所有“抽屉”里的东西（可枚举属性值），我们可以直接查看这些东西，而不用关心“抽屉”叫什么名字。

const values = Object.values(myObject);

for (let i = 0; i < values.length; i++) {
  console.log(values[i]);
}

这段代码会依次打印出 myObject 的所有属性值，包括 address 对象本身。

方法四：递归

如果对象里还有对象，对象里还有对象，就像一个俄罗斯套娃，那就需要用到递归了。递归就像剥洋葱，一层一层地剥开，直到找到最里面的东西。

function exploreObject(obj) {
  for (let key in obj) {
    if (typeof obj[key] === 'object') {
      exploreObject(obj[key]); 
    } else {
      console.log(key + ": " + obj[key]);
    }
  }
}

exploreObject(myObject);