JavaScript如何遍历嵌套树形对象仅修改className属性对应值？

现有代码的问题 #

1. 没有对属性名做判断，所有属性值都会被传入的修改函数处理，自然所有值都被追加了内容
2. children是数组格式，你直接把数组传给了依赖Object.fromEntries的递归函数，Object.fromEntries只能接收键值对数组，处理普通对象数组会返回错误结构
3. Object.entries本身没有第二个参数，你传入的fn在这里不会生效

实现代码 #

我们可以用递归遍历嵌套节点结构，只修改className属性，同时处理子节点数组：

const addYesToClassName = (node) => {
  // 复制节点避免修改原对象
  const processedNode = {...node};
  // 仅当存在className属性时追加内容
  if (processedNode.className) {
    processedNode.className += ' YES';
  }
  // 存在children数组时递归处理每一个子节点
  if (Array.isArray(processedNode.children)) {
    processedNode.children = processedNode.children.map(addYesToClassName);
  }
  return processedNode;
}

// 调用示例，obj为你给出的原始对象
const result = addYesToClassName(obj);

如果不需要保留原对象，可以直接修改原对象减少内存开销：

const addYesToClassName = (node) => {
  if (node.className) node.className += ' YES';
  if (Array.isArray(node.children)) node.children.forEach(addYesToClassName);
  return node;
}

内容的提问来源于stack exchange，提问作者sundowatch