使用 JSON.parse 与 reviver 函数深度修改嵌套对象属性

本文探讨了如何在javascript中高效地处理具有未知深度嵌套的对象结构，并批量修改其内部属性。我们将重点介绍一种利用 `json.parse` 的 `reviver` 函数进行深度遍历和属性转换的简洁方法，该方法无需手动递归，即可实现对所有层级指定属性的统一设置，并分析其优缺点及适用场景。

深度嵌套对象属性修改的挑战

在前端开发中，我们经常会遇到结构复杂、层级不定的数据对象，例如树形结构、菜单配置或文件系统表示等。这类对象通常包含 children 属性，其内部又可能嵌套相同结构的对象。当需要对所有层级中的某个特定属性（例如 ative 状态）进行统一修改时，传统的循环（如 forEach、map）或手动递归方法可能会变得复杂且冗长，尤其是在对象深度未知的情况下。

例如，考虑以下对象结构，其中 ative 属性可能在任何层级出现，并且 children 数组的深度是可变的：

const obj = {
  name: 'obj1',
  ative: true,
  children: [
    {
      name: 'obj2',
      ative: true,
      children: [
        {
          name: 'Obj23',
          ative: true,
          children: [] // 可能是空数组，表示没有子节点
        }
      ]
    },
    {
      name: 'obj3',
      children: [ // 注意：此对象本身没有 ative 属性
        {
          name: 'Obj32',
          ative: true,
          children: []
        }
      ]
    }
  ]
};

我们的目标是遍历 obj 及其所有子孙节点，将所有存在的 ative 属性设置为 false。

利用 JSON.parse 与 reviver 函数进行深度转换

JavaScript 的 JSON 对象提供了一个非常强大的机制来实现对深层对象的转换：JSON.parse() 方法的第二个参数——reviver 函数。reviver 函数允许我们在解析JSON字符串时，对每个键值对进行检查和转换。

工作原理

1. JSON.stringify(obj): 首先，我们将原始对象 obj 转换为其JSON字符串表示。这一步实际上创建了一个原始对象的深拷贝，因为JSON字符串不包含引用。

2. JSON.parse(jsonString, reviver): 接着，我们使用 JSON.parse 将JSON字符串解析回JavaScript对象。在解析过程中，reviver 函数会为JSON字符串中遇到的每一个键值对（包括嵌套对象和数组中的元素）被调用。

   

   图改改

   在线修改图片文字

   455

   查看详情

   reviver 函数的签名是 function(key, value)，它接收当前处理的键 (key) 和值 (value) 作为参数。该函数的返回值将替换原始值：

   • 如果 reviver 返回 value，则该键值对保持不变。
   • 如果 reviver 返回一个不同的值，则该键值对的值将被替换为新的返回值。
   • 如果 reviver 返回 undefined，则该键值对将从结果对象中删除。

示例代码

针对上述问题，我们可以这样使用 JSON.parse 和 reviver 来将所有 ative 属性设置为 false：

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: []
        }]
    }]
};

const result = JSON.parse(JSON.stringify(obj), (key, value) => {
    // 如果当前键是 'ative'，则将其值设置为 false
    if (key === 'ative') {
        return false;
    }
    // 否则，返回原始值，保持不变
    return value;
});

console.log(result);

运行上述代码，result 对象将是 obj 的一个深拷贝，但其中所有名为 ative 的属性都已被设置为 false：

/* console.log(result) 的输出 */
{
  name: 'obj1',
  ative: false, // 已被修改
  children: [
    {
      name: 'obj2',
      ative: false, // 已被修改
      children: [
        {
          name: 'Obj23',
          ative: false, // 已被修改
          children: []
        }
      ]
    },
    {
      name: 'obj3',
      children: [
        {
          name: 'Obj32',
          ative: false, // 已被修改
          children: []
        }
      ]
    }
  ]
}

代码解析

• JSON.stringify(obj): 将原始 obj 转换为JSON字符串。
• (key, value) => key === 'ative' ? false : value: 这是一个箭头函数，作为 reviver 传递给 JSON.parse。
  • 它会检查每个键。如果 key 等于字符串 'ative'，那么它就返回 false。
  • 对于所有其他键，它返回原始的 value，不做任何修改。
  • 这种机制确保了只有目标属性被修改，而其他属性和结构保持不变。

注意事项与局限性

虽然 JSON.parse 结合 reviver 提供了一种简洁的解决方案，但它并非适用于所有场景。在使用时需要注意以下几点：

1. 数据类型限制：JSON.stringify 无法正确处理所有JavaScript数据类型。它会：
   • 忽略函数（function）、undefined 和 Symbol 值。
   • 将 Date 对象转换为ISO格式的字符串。
   • 将 RegExp 和 Error 对象转换为 {}。
   • 如果对象包含循环引用，JSON.stringify 将抛出错误。 因此，如果你的对象包含这些特殊类型或循环引用，此方法可能不适用。
2. 性能开销：对于非常庞大的对象，先将其转换为字符串再解析回对象可能会比直接的递归遍历消耗更多的CPU和内存资源。在对性能要求极高的场景下，传统的递归方法可能更为高效。
3. 深拷贝特性：此方法总是会生成一个全新的深拷贝对象。这意味着原始对象不会被修改。如果你的需求是原地修改原始对象，那么你需要采用其他方法（如递归遍历）。
4. 键的匹配：reviver 函数只根据键名进行匹配。如果你的需求是根据键值、数据类型或更复杂的逻辑进行判断和修改，reviver 仍然能够胜任，只需在回调函数中添加相应的判断逻辑即可。

总结

利用 JSON.parse 与 reviver 函数是处理深度嵌套对象并批量修改特定属性的一种优雅且高效的方法。它通过将对象序列化再反序列化的过程，巧妙地利用了 reviver 的回调机制，避免了手动编写复杂的递归逻辑。然而，开发者在使用此方法时，必须充分了解其对数据类型的限制以及性能影响，并根据具体需求权衡选择。对于结构相对简单、不含特殊数据类型且需要深拷贝并转换的场景，这无疑是一个极佳的解决方案。

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