数组映射迭代有什么问题

Question

下面的代码，不返回一个平面数组，非常混乱，需要一个深度嵌套的对象数组的平面数组

已附上jsfiddle链接https://jsfiddle.net/k6swuvox/

const arr = [{
  id: 1,
  name: 'XYZ 1'
}, {
  id: 2,
  name: 'XYZ 2',
  children: [{
    id: 5,
    name: 'XYZ 5'
  }, {
    id: 6,
    name: 'XYZ 6',
    age: 29,
    children: [{
      id: 7,
      name: 'XYZ 7'
    }, {
      id: 8,
      name: 'XYZ 8'
    }]
  }]
}, {
  id: 3,
  name: 'XYZ 3'
}, {
  id: 4,
  name: 'XYZ 4'
}]


const flats = data => data.map(e => {
  if (e.children) {
    return [...flats(e.children), e]
  } else {
    console.log("E", e);
    return e
  }
})

console.log(flats(arr));

Answer 1

使用您当前的代码，您有时会从回调中返回一个数组：

return [...flats(e.children),e]

你有时会返回一个普通的对象：

else {console.log("E",e);return e }

因此结果将是数组和普通对象的混合，而不是仅包含对象的数组。

改用flatMap，它将实现您正在寻找的扁平化。您还需要在返回之前从具有子项的项目中删除 .children 属性。

const arr=[{id:1,name:"XYZ 1"},{id:2,name:"XYZ 2",children:[{id:5,name:"XYZ 5"},{id:6,name:"XYZ 6",age:29,children:[{id:7,name:"XYZ 7"},{id:8,name:"XYZ 8"}]}]},{id:3,name:"XYZ 3"},{id:4,name:"XYZ 4"}];

const flats = data => data.flatMap(e=>{
  const { children, ...objWithoutChildren } = e;
  return children
    ? [...flats(children), objWithoutChildren]
    : e;
});

console.log(flats(arr));

Answer 2

这是一个使用object-scan的迭代解决方案

// const objectScan = require('object-scan');

const arr = [{ id: 1, name: 'XYZ 1' }, { id: 2, name: 'XYZ 2', children: [{ id: 5, name: 'XYZ 5' }, { id: 6, name: 'XYZ 6', age: 29, children: [{ id: 7, name: 'XYZ 7' }, { id: 8, name: 'XYZ 8' }] }] }, { id: 3, name: 'XYZ 3' }, { id: 4, name: 'XYZ 4' }];

const flatten = objectScan(['**(^children$).id'], {
  useArraySelector: false,
  rtn: 'parent',
  reverse: false,
  afterFn: (state) => {
    state.result = state.result.map(({ id, name }) => ({ id, name }));
  }
});

console.log(flatten(arr));
// => [ { id: 1, name: 'XYZ 1' }, { id: 2, name: 'XYZ 2' }, { id: 5, name: 'XYZ 5' }, { id: 6, name: 'XYZ 6' }, { id: 7, name: 'XYZ 7' }, { id: 8, name: 'XYZ 8' }, { id: 3, name: 'XYZ 3' }, { id: 4, name: 'XYZ 4' } ]

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

<script src="https://bundle.run/object-scan@15.0.0"></script>

免责声明：我是object-scan的作者

Answer 3

需要一个由深度嵌套的对象数组组成的平面数组

在这种情况下，我更喜欢recursive 来获得灵活且高深层次的数组。

const arr = [{id:1,name:'XYZ 1'},{id:2,name:'XYZ 2',children:[{id:5,name:'XYZ 5'},{id:6,name:'XYZ 6',age:29,children:[{id:7,name:'XYZ 7'},{id:8,name:'XYZ 8'}]}]},{id:3,name:'XYZ 3'},{id:4,name:'XYZ 4'}];

const recursive = (array) => array.reduce((acc, {children = [], ...others}) => {
  acc.push(others);
  if(children.length > 0) // Base recurisve here.
    acc = acc.concat(recursive(children));
  return acc;
}, []);

console.log(recursive(arr));

==> 这样一来，内容结构就会确保这样