如何遍历JavaScript中嵌套的对象？person对象嵌套address场景示例

实现方法 #

你只需要在遍历的时候加一层类型判断，如果当前值是对象类型（排除null、数组等特殊情况），就对该值做二次遍历即可，两种常用实现方式如下：

方式1：通用递归遍历（支持任意深度的嵌套对象展开）

适合嵌套层级不固定的场景，代码如下：

let obj = {
  name: 'John Doe',
  age: 23,
  gender: 'Male',
  address: {
    street: 'SampleStreetName',
    province: 'SampleProvinceName',
    city: 'SampleCityName',
  },
};

// 递归打印对象所有键值对
function printFlatObj(targetObj) {
  Object.keys(targetObj).forEach(key => {
    const val = targetObj[key];
    // 仅展开普通对象，排除null、数组、函数等其他引用类型
    if (typeof val === 'object' && val !== null && !Array.isArray(val) && typeof val !== 'function') {
      printFlatObj(val);
    } else {
      console.log(`${key}: ${val}`);
    }
  })
}

printFlatObj(obj);

方式2：单层展开（仅针对当前固定结构的person对象）

如果你确定只有address一层嵌套，不需要处理更深层级，代码可以更简单：

Object.keys(obj).forEach(key => {
  const val = obj[key];
  if (key === 'address') {
    // 单独遍历address内部的键值对
    Object.keys(val).forEach(addrKey => console.log(`${addrKey}: ${val[addrKey]}`));
    return;
  }
  console.log(`${key}: ${val}`);
})

两种方式运行后都能得到你期望的输出效果。

内容的提问来源于stack exchange，提问作者J.Wujeck