使用Javascript或Lodash更新嵌套数组中的对象属性

在 JavaScript 中，更新嵌套数组中的对象属性可以通过多种方法实现，包括原生 JavaScript 和使用 Lodash 库。以下是一些示例，展示如何使用这两种方法来更新嵌套数组中的对象属性。

示例数据

假设我们有以下嵌套数组：

const data = [
  {
    id: 1,
    name: 'John',
    children: [
      { id: 2, name: 'Jane' },
      { id: 3, name: 'Jack' }
    ]
  },
  {
    id: 4,
    name: 'Doe',
    children: [
      { id: 5, name: 'Jill' },
      { id: 6, name: 'James' }
    ]
  }
];

我们希望更新 id 为 3 的对象的 name 属性。

方法 1：使用原生 JavaScript

使用递归函数来遍历嵌套数组并更新目标对象的属性。

function updateNestedArray(arr, targetId, newName) {
  for (let item of arr) {
    if (item.id === targetId) {
      item.name = newName;
      return true; // 找到并更新后返回
    }
    if (item.children) {
      const found = updateNestedArray(item.children, targetId, newName);
      if (found) return true; // 如果在子数组中找到并更新，返回
    }
  }
  return false; // 未找到目标对象
}

updateNestedArray(data, 3, 'Jackson');
console.log(JSON.stringify(data, null, 2));

方法 2：使用 Lodash

Lodash 提供了一些有用的工具函数，可以简化嵌套结构的处理。我们可以使用 _.cloneDeep 和 _.set 来实现这一点。

首先，确保你已经安装了 Lodash：

npm install lodash

然后，你可以使用 Lodash 来更新嵌套数组中的对象属性：

const _ = require('lodash');

function updateNestedArrayWithLodash(arr, targetId, newName) {
  const clonedArr = _.cloneDeep(arr); // 深拷贝数组，避免修改原数组
  const stack = [...clonedArr];

  while (stack.length) {
    const item = stack.pop();
    if (item.id === targetId) {
      item.name = newName;
      break;
    }
    if (item.children) {
      stack.push(...item.children);
    }
  }

  return clonedArr;
}

const updatedData = updateNestedArrayWithLodash(data, 3, 'Jackson');
console.log(JSON.stringify(updatedData, null, 2));

解释

方法 1：使用原生 JavaScript：
- 定义一个递归函数 updateNestedArray，遍历数组中的每个对象。
- 如果找到目标对象（通过 id 匹配），更新其 name 属性并返回。
- 如果对象有 children 属性，递归调用函数处理子数组。
方法 2：使用 Lodash：
- 使用 _.cloneDeep 深拷贝数组，避免直接修改原数组。
- 使用栈（stack）来遍历嵌套数组。
- 如果找到目标对象（通过 id 匹配），更新其 name 属性并退出循环。