Question

我想为以下转换找到一个很好的优雅解决方案。如何以最简单的方式使用函数库Ramda来实现最佳效果？

const data = [
  {
    id: 'a',
  },
  {
    id: 'b',
    routes: [
      {
        id: 'c',
      },
      {
        id: 'd',
        routes: [
          {
            id: 'e',
          }
        ]
      }
    ]
  }
];

const expected = [
  {
    id: 'a',
  },
  {
    id: 'b',
  },
  {
    id: 'c',
  },
  {
    id: 'd',
  },
  {
    id: 'e',
  }
];

Answer 1

这是一个使用reduce和递归的vanilla JS解决方案：

＆＃13;

const data = [
  {
    id: 'a',
  },
  {
    id: 'b',
    routes: [
      {
        id: 'c',
      },
      {
        id: 'd',
        routes: [
          {
            id: 'e',
          }
        ]
      }
    ]
  }
];

const transform = arr => arr.reduce((a, { id, routes }) => (
  [...a, { id }, ...transform(routes || [])]
), []);
console.log(transform(data));

＆＃13;

或者，不是每次都创建新数组，而是简单地推送到现有数组：

＆＃13;

const data = [{
    id: 'a',
  },
  {
    id: 'b',
    routes: [{
        id: 'c',
      },
      {
        id: 'd',
        routes: [{
          id: 'e',
        }]
      }
    ]
  }
];

const transform = (arr, pushTo = []) => arr.reduce((a, { id, routes }) => {
  a.push({ id });
  if (routes) transform(routes, a);
  return a;
}, pushTo);
console.log(transform(data));

＆＃13;

使用嵌套属性的变量而不是routes硬编码：

＆＃13;

const data = [{
    id: 'a',
  },
  {
    id: 'b',
    routes: [{
        id: 'c',
      },
      {
        id: 'd',
        routes: [{
          id: 'e',
        }]
      }
    ]
  }
];

const transform = (arr, prop, pushTo = []) => arr.reduce((a, item) => {
  const nested = item[prop];
  a.push({ id: item.id });
  if (nested) transform(nested, prop, a);
  return a;
}, pushTo);
console.log(transform(data, 'routes'));

＆＃13;

Answer 2

JS中没有太多传播的解决方案

function getFlat(array = []) {
    return array.reduce((r, { id, routes }) => r.concat({ id }, getFlat(routes)), []);
}

const data = [{ id: 'a', }, { id: 'b', routes: [{ id: 'c', }, { id: 'd', routes: [{ id: 'e', }] }] }];

console.log(getFlat(data));

.as-console-wrapper { max-height: 100% !important; top: 0; }

使用对象的rest参数获取对象的所有属性，exept routes返回。

function getFlat(array = []) {
    return array.reduce((r, { routes, ...o }) => r.concat(o, getFlat(routes)), []);
}

const data = [{ id: 'a', foo: 1 }, { id: 'b', routes: [{ id: 'c' }, { id: 'd', routes: [{ id: 'e', bar: 2 }] }] }];

console.log(getFlat(data));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

此处其他建议的替代方法是使用R.chain展平每组嵌套路线。

const fn = R.chain(({routes = [], ...rest}) => [{...rest}, ...fn(routes)])

一旦Array.prototype.flatMap变得容易获得，这种方法也可以用普通的JS实现。

const fn = (xs = []) => xs.flatMap(({routes, ...rest}) => [{...rest}, ...fn(routes)])

我该如何改变这个？

3 个答案: