在 ES6 中使用递归 reduce 转换所有子对象

Question

我正在尝试创建一组化简器以更改嵌套列表中所有对象的属性。

输入负载如下所示：

const payload = [
  {
    name: "Peter",
    children: [
      {
        name: "Sarah",
        children: [
          {
            name: "Sophie",
            children: [
              {
                name: "Chris"
              }
            ]
          }
        ]
      }
    ]
  }
];

我现在想更改所有元素和子元素的name 属性。

const mapJustNickname = elem => {
  return {
    ...elem,
    nickname: elem.name + "y"
  };
};

如何在所有子元素上递归使用这个 map 函数？

我找到了一种方法，将递归放在同一个映射函数中。

const mapToNickname = (elem) => {
    return {
    nickname: elem.name +'y',
    children: elem.children && elem.children.map(mapToNickname)
  }
}

console.log(payload.map(mapToNickname));

但我希望将名称的映射与递归分开（出于使映射函数尽可能简单的原因）并能够稍后将它们链接起来。是否有可能使用两个减速器然后将它们链接在一起？

Answer 1

让我们从严格定义数据结构开始：

data Person = Person { name :: String, nickname :: Maybe String }

data Tree a = Tree { value :: a, children :: Forest a }

type Forest a = [Tree a]

type FamilyTree = Tree Person

type FamilyForest = Forest Person

现在，我们可以创建mapTree 和mapForest 函数：

const mapTree = (mapping, { children=[], ...value }) => ({
    ...mapping(value),
    children: mapForest(mapping, children)
});

const mapForest = (mapping, forest) => forest.map(tree => mapTree(mapping, tree));

// Usage:

const payload = [
  {
    name: "Peter",
    children: [
      {
        name: "Sarah",
        children: [
          {
            name: "Sophie",
            children: [
              {
                name: "Chris"
              }
            ]
          }
        ]
      }
    ]
  }
];

const mapping = ({ name }) => ({ name, nickname: name + "y" });

const result = mapForest(mapping, payload);

console.log(result);

希望对您有所帮助。

Answer 2

创建一个映射项目的递归映射函数，它是子项（如果存在）。现在您可以为recursiveMap 提供您想要的任何转换器功能，并且转换器不需要处理树的递归性质。

const recursiveMap = childrenKey => transformer => arr => {
  const inner = (arr = []) =>
    arr.map(({ [childrenKey]: children, ...rest }) => ({
      ...transformer(rest),
      ...children && { [childrenKey]: inner(children) }
    }));
    
  return inner(arr);
};

const mapNickname = recursiveMap('children')(({ name, ...rest }) => ({
  name,
  nickname: `${name}y`,
  ...rest
}));

const payload = [{"name":"Peter","children":[{"name":"Sarah","children":[{"name":"Sophie","children":[{"name":"Chris"}]}]}]}];

const result = mapNickname(payload);

console.log(result)