JavaScript深度嵌套对象值更新：Lodash _.merge 实战指南-js教程-PHP中文网

JavaScript深度嵌套对象值更新：Lodash _.merge 实战指南

心靈之曲

发布： 2025-11-18 16:32:10

原创

512人浏览过

JavaScript深度嵌套对象值更新：Lodash _.merge 实战指南

本文深入探讨了在javascript中高效更新深度嵌套对象值的策略。针对原生方法在处理复杂结构时的局限性，文章详细介绍了如何利用流行的工具库lodash的`_.merge()`方法。通过具体的代码示例，演示了可变（原地修改）和不可变（创建新对象）两种更新模式，并提供了选择合适策略的专业指导，旨在帮助开发者更灵活、安全地管理复杂数据状态。

理解JavaScript深度嵌套对象更新的挑战

在JavaScript开发中，我们经常需要处理复杂的数据结构，例如多层嵌套的对象。当需要更新这些对象内部的某个深层属性时，直接赋值或简单的浅拷贝操作往往无法满足需求。例如，考虑以下一个表示房间状态的深度嵌套对象：

const data = {
  "room_1": {
    "fan": "on",
    "fan_state": 0,
    "light1": "on",
    "light2": "on",
    "light3": "off",
    "light4": "on"
  },
  "room_2": {
    "fan": "on",
    "fan_state": 2,
    "light1": "off",
    "light2": "on",
    "light3": "on",
    "light4": "off"
  },
  // ... 其他房间
};

登录后复制

如果我们需要根据一个局部更新对象 {"room_1":{"light1":"off"}} 来修改 data 对象中 room_1 的 light1 属性，直接使用 Object.assign() 或扩展运算符 ... 进行浅拷贝将无法实现深度合并。这些方法只会替换顶层属性，或者在遇到嵌套对象时直接覆盖整个嵌套对象，而非合并其内部属性。手动编写递归函数来实现深度合并虽然可行，但代码量大且容易出错，尤其是在处理各种数据类型（如数组、不同类型的对象）时。

解决方案：使用Lodash _.merge()

为了简化深度嵌套对象的更新操作，推荐使用成熟的JavaScript工具库Lodash。Lodash提供了许多实用的函数，其中 _.merge() 是专门用于深度合并对象的强大工具。它能够递归地合并源对象的自身及继承的可枚举属性到目标对象。如果遇到同名属性，且两者都是对象，则会递归合并；否则，源属性会覆盖目标属性。

1. 引入Lodash

在使用 _.merge() 之前，您需要将Lodash引入到项目中。可以通过CDN、npm或yarn进行安装和引用：

立即学习“Java免费学习笔记（深入）”；

通过CDN引入（适用于浏览器环境）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

登录后复制

通过npm或yarn安装（适用于Node.js或打包工具环境）：

npm install lodash
# 或者
yarn add lodash

登录后复制

然后在您的JavaScript文件中引入：

import _ from 'lodash';
// 或者
const _ = require('lodash');

登录后复制

2. 可变更新（Mutating Update）

可变更新是指直接修改原始目标对象。_.merge(object, [sources]) 函数会将 sources 对象的所有可枚举自身属性递归合并到 object 对象。

小绿鲸英文文献阅读器

英文文献阅读器，专注提高SCI阅读效率

352

查看详情

示例代码：

// 原始数据对象
const data = {
  "room_1": {
    "fan": "on",
    "fan_state": 0,
    "light1": "on",
    "light2": "on",
    "light3": "off",
    "light4": "on"
  },
  "room_2": {
    "fan": "on",
    "fan_state": 2,
    "light1": "off",
    "light2": "on",
    "light3": "on",
    "light4": "off"
  },
  "room_3": {
    "fan": "on",
    "fan_state": 2,
    "light1": "off",
    "light2": "on",
    "light3": "on",
    "light4": "off"
  },
  "room_4": {
    "fan": "on",
    "fan_state": 3,
    "light1": "off",
    "light2": "off",
    "light3": "off",
    "light4": "on"
  }
};

// 待更新的数据
const update = {
  "room_1": {
    "light1": "off"
  }
};

const mainMutable = () => {
  console.log("原始数据 room_1.light1:", data.room_1.light1); // 输出: on

  // 使用 _.merge() 进行可变更新，直接修改 data 对象
  _.merge(data, update);

  console.log("更新后数据 room_1.light1:", data.room_1.light1); // 输出: off
  console.log("更新后的完整数据:", data); // data.room_1.light1 已变为 "off"
};

mainMutable();

登录后复制

注意事项：

可变更新会直接改变作为第一个参数传入的 data 对象。
在某些框架（如React）中，直接修改状态对象可能会导致意想不到的行为或难以追踪的bug，因为它们通常依赖于不可变性来检测状态变化。因此，在这些场景下应谨慎使用可变更新。

3. 不可变更新（Immutable Update）

不可变更新是指在不修改原始对象的前提下，创建一个包含更新内容的新对象。这在函数式编程和许多现代JavaScript框架中是推荐的做法，因为它能提高代码的可预测性和可维护性。

要实现不可变更新，我们可以将一个空对象 {} 作为 _.merge() 的第一个参数，然后将原始对象和更新对象作为后续参数传入。这样，_.merge() 会将所有属性合并到这个新的空对象上，而原始对象保持不变。

示例代码：

// 原始数据对象（与上例相同）
const dataImmutable = {
  "room_1": {
    "fan": "on",
    "fan_state": 0,
    "light1": "on",
    "light2": "on",
    "light3": "off",
    "light4": "on"
  },
  "room_2": {
    "fan": "on",
    "fan_state": 2,
    "light1": "off",
    "light2": "on",
    "light3": "on",
    "light4": "off"
  },
  "room_3": {
    "fan": "on",
    "fan_state": 2,
    "light1": "off",
    "light2": "on",
    "light3": "on",
    "light4": "off"
  },
  "room_4": {
    "fan": "on",
    "fan_state": 3,
    "light1": "off",
    "light2": "off",
    "light3": "off",
    "light4": "on"
  }
};

// 待更新的数据
const updateImmutable = {
  "room_1": {
    "light1": "off"
  }
};

const mainImmutable = () => {
  console.log("原始数据 room_1.light1:", dataImmutable.room_1.light1); // 输出: on

  // 使用 _.merge() 进行不可变更新，创建一个新的对象 copy
  const copy = _.merge({}, dataImmutable, updateImmutable);

  console.log("原始数据 room_1.light1 (未改变):", dataImmutable.room_1.light1); // 输出: on
  console.log("拷贝对象 copy.room_1.light1 (已改变):", copy.room_1.light1);   // 输出: off
  console.log("拷贝后的完整数据:", copy);
  console.log("原始数据 (确认未改变):", dataImmutable);
};

mainImmutable();

登录后复制

最佳实践：