本文探讨了如何高效地遍历并修改javascript中具有不确定深度嵌套结构的对象的特定属性。针对需要将所有子对象及孙子对象的`active`属性统一设置为`false`的场景，我们介绍了一种利用`json.parse`结合其`reviver`函数参数的巧妙方法。这种方法避免了复杂的递归逻辑，以简洁的代码实现了对深层嵌套对象属性的批量修改，同时生成了一个新的修改后的对象副本。
在JavaScript开发中，我们经常会遇到需要处理深层嵌套数据结构的情况，例如树形菜单、组织架构或配置对象。这些对象通常包含一个或多个子级数组，每个子级又可能包含自己的子级，深度不确定。一个常见的需求是，需要遍历整个结构，并对所有层级的特定属性进行统一修改。例如，将所有对象中的active（或ative）属性设置为false。
挑战：处理不确定深度的嵌套对象
传统的遍历方法，如使用for...of、forEach或map，在面对不确定深度的嵌套对象时，通常需要编写递归函数。虽然递归是解决这类问题的有效手段，但其实现可能相对复杂，尤其是在需要处理多种条件或避免无限循环时。
考虑以下示例对象结构：
const obj = {
name: 'obj1',
ative: true, // 注意这里的拼写是 'ative'
children: [
{
name: 'obj2',
ative: true,
children: [
{
name: 'Obj23',
ative: true,
children: [] // 深度不确定
}
]
},
{
name: 'obj3',
children: [
{
name: 'Obj32',
ative: true,
children: []
}
]
}
]
};我们的目标是将所有层级中名为ative的属性值都设置为false。
解决方案：利用 JSON.parse 和 Reviver 函数
JavaScript提供了一个强大而简洁的方法来解决这个问题，那就是结合使用JSON.stringify()和JSON.parse()的reviver（复原器）函数。
- JSON.stringify()： 这个方法将JavaScript值转换为JSON字符串。它能够对对象进行深拷贝，但会忽略函数、undefined、Symbol值。
- JSON.parse()： 这个方法解析JSON字符串，将其转换为JavaScript值或对象。它接受第二个可选参数——reviver函数。
reviver函数在JSON.parse()解析过程中，会为每个键值对调用。它的作用是在值被返回之前，对其进行转换。函数的签名是 (key, value)，它应该返回转换后的值。如果返回 undefined，则该键值对将从结果对象中删除。
实现步骤
我们将原始对象首先通过JSON.stringify()转换为JSON字符串，然后使用JSON.parse()解析这个字符串，并在解析过程中通过reviver函数修改ative属性。
const obj = {
name: 'obj1',
ative: true,
children: [{
name: 'obj2',
ative: true,
children: [{
name: 'Obj23',
ative: true,
children: []
}]
},
{
name: 'obj3',
children: [{
name: 'Obj32',
ative: true,
children: []
}]
}]
};
// 使用 JSON.parse 和 reviver 函数进行属性修改
const result = JSON.parse(JSON.stringify(obj), (key, value) => {
// 如果当前键是 'ative'，则返回 false
if (key === 'ative') {
return false;
}
// 否则，返回原始值
return value;
});
console.log(result);代码解析
- JSON.stringify(obj)：这一步将原始的obj对象序列化为一个JSON字符串。这实际上创建了原始对象的一个“快照”或深拷贝。
- JSON.parse(..., (key, value) => ...)：这一步解析JSON字符串，并在这个过程中应用reviver函数。
- reviver函数 (key, value) => key === 'ative' ? false : value：
- JSON.parse在构建最终对象时，会从最内层到最外层，逐一处理所有的键值对（包括数组元素）。
- 对于每一个键值对，reviver函数都会被调用，传入当前的key和value。
- 如果当前的key是 'ative'，函数会返回 false。这意味着在解析过程中，所有名为ative的属性都会被强制设置为false。
- 如果key不是 'ative'，函数会返回原始的value，保持其他属性不变。
通过这种方式，JSON.parse在重建JavaScript对象时，会自动遍历所有层级，并根据reviver函数的逻辑修改相应的属性。
示例输出
{
"name": "obj1",
"ative": false,
"children": [
{
"name": "obj2",
"ative": false,
"children": [
{
"name": "Obj23",
"ative": false,
"children": []
}
]
},
{
"name": "obj3",
"children": [
{
"name": "Obj32",
"ative": false,
"children": []
}
]
}
]
}可以看到，所有层级中的ative属性都被成功地修改为了false。
注意事项与适用场景
- JSON兼容性： 这种方法仅适用于可以完全被JSON序列化和反序列化的数据。如果你的对象包含函数、undefined值、Symbol值、Date对象（会被转换为ISO字符串）或其他非JSON标准类型，它们在JSON.stringify()过程中可能会丢失或被转换，导致数据不完整。
- 性能考虑： 对于非常庞大或极其复杂的对象，JSON.stringify()和JSON.parse()的字符串转换和解析过程可能会带来一定的性能开销。在对性能要求极高的场景下，可能需要评估其适用性。
- 创建新对象： 此方法会创建一个全新的对象副本，原始对象不会被修改。这在很多情况下是一个优点，因为它避免了副作用，保持了数据的不可变性。
- 替代方案： 如果数据包含非JSON兼容类型，或者需要原地修改对象而不是创建副本，那么编写一个自定义的递归遍历函数仍然是更灵活的选择。
总结
利用JSON.parse的reviver函数是处理深层嵌套JavaScript对象属性修改的一种简洁而强大的技术。它通过巧妙地结合序列化和反序列化过程，提供了一种优雅的方式来遍历和转换对象结构，特别适用于需要对JSON兼容数据进行批量、深层属性修改的场景。理解其工作原理和限制，能够帮助开发者在合适的场景下选择最有效的解决方案。
