如何在 JavaScript 中遍历任意深度的对象

有时我们会发现我们需要遍历一个对象，并在某个任意深度对其执行一些操作。虽然这看起来很困难，但我们可以利用递归、可变性和对象引用来快速完成任务。

示例：深层占位符替换

const user = {
  name: 'IU',
  hobby: ['eat', 'sleep', '[placeholder]'],
  friend: {
    name: 'UI',
    hobby: ['eat', 'sleep', 'laugh', '[placeholder]'],
    friend: {
      name: 'Lay',
      hobby: ['dance', 'vocal', '[placeholder]']
    }
  }
}

分析

• 创建一个以对象作为参数的函数。
• 对于该对象中的每个键，如果该键是 string，则执行占位符替换
• 如果键是 object，则将该键返回给初始化函数进行递归！

JavaScript 实现如下

const replacePlaceholder = (obj) => {
  for (let key in obj) {
    if (typeof obj[key] === 'string') obj[key] = obj[key].replace('[placeholder]', 'rap')
    if (typeof obj[key] === 'object') replacePlaceholder(obj[key])
  }
}

replacePlaceholder(user)
console.log(JSON.stringify(user, null, 2))
/*
{
  "name": "IU",
  "hobby": [
    "eat",
    "sleep",
    "rap"
  ],
  "friend": {
    "name": "UI",
    "hobby": [
      "eat",
      "sleep",
      "laugh",
      "rap"
    ],
    "friend": {
      "name": "Lay",
      "hobby": [
        "dance",
        "vocal",
        "rap"
      ]
    }
  }
}
*/

可以看到，我们实现了占位符替换。值得注意的是，我们没有从 replacePlaceholder 函数返回任何东西，而是沿状态树往下执行改变了输入对象！

如果这不是您期望的行为，您可以考虑实现深拷贝，首先拷贝对象，然后对拷贝进行突变。