使用JSON.parse和Reviver函数递归修改嵌套对象属性

本文探讨了如何高效地遍历并修改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（复原器）函数。

1. JSON.stringify()： 这个方法将JavaScript值转换为JSON字符串。它能够对对象进行深拷贝，但会忽略函数、undefined、Symbol值。
2. JSON.parse()： 这个方法解析JSON字符串，将其转换为JavaScript值或对象。它接受第二个可选参数——reviver函数。

reviver函数在JSON.parse()解析过程中，会为每个键值对调用。它的作用是在值被返回之前，对其进行转换。函数的签名是 (key, value)，它应该返回转换后的值。如果返回 undefined，则该键值对将从结果对象中删除。

图改改

在线修改图片文字

455

查看详情

实现步骤

我们将原始对象首先通过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);

代码解析

1. JSON.stringify(obj)：这一步将原始的obj对象序列化为一个JSON字符串。这实际上创建了原始对象的一个“快照”或深拷贝。
2. JSON.parse(..., (key, value) => ...)：这一步解析JSON字符串，并在这个过程中应用reviver函数。
3. 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。

注意事项与适用场景

1. JSON兼容性： 这种方法仅适用于可以完全被JSON序列化和反序列化的数据。如果你的对象包含函数、undefined值、Symbol值、Date对象（会被转换为ISO字符串）或其他非JSON标准类型，它们在JSON.stringify()过程中可能会丢失或被转换，导致数据不完整。
2. 性能考虑： 对于非常庞大或极其复杂的对象，JSON.stringify()和JSON.parse()的字符串转换和解析过程可能会带来一定的性能开销。在对性能要求极高的场景下，可能需要评估其适用性。
3. 创建新对象： 此方法会创建一个全新的对象副本，原始对象不会被修改。这在很多情况下是一个优点，因为它避免了副作用，保持了数据的不可变性。
4. 替代方案： 如果数据包含非JSON兼容类型，或者需要原地修改对象而不是创建副本，那么编写一个自定义的递归遍历函数仍然是更灵活的选择。

总结

利用JSON.parse的reviver函数是处理深层嵌套JavaScript对象属性修改的一种简洁而强大的技术。它通过巧妙地结合序列化和反序列化过程，提供了一种优雅的方式来遍历和转换对象结构，特别适用于需要对JSON兼容数据进行批量、深层属性修改的场景。理解其工作原理和限制，能够帮助开发者在合适的场景下选择最有效的解决方案。

以上就是使用JSON.parse和Reviver函数递归修改嵌套对象属性的详细内容，更多请关注php中文网其它相关文章！