从数组和包含另一个数组的属性创建一个新数组

Question

我需要从数组和包含另一个数组的属性创建一个新数组：

bigArray = [
    {
     bigArrayID : 1,
     name: 'Xpto',
     children: [
         {childID:1,Name:'XptoChild1'},
         {childID:2,Name:'XptoChild2'},
     ]
    },
    {
     bigArrayID : 2,
     name: 'Foo',
     children: [
         {childID:3,Name:'FooChild1'},
         {childID:4,Name:'FooChild2'},
     ]
    },
    {
     bigArrayID : 3,
     name: 'Bar',
     children: [
         {childID:5,Name:'BarChild1'},
         {childID:6,Name:'BarChild2'},
     ]
    }
]

将 bigArray 转换为如下结果：

result = [
            {
             bigArrayID : 1,
             name: 'Xpto',
             children: [
                 {childID:1,Name:'XptoChild1'},
                 {childID:2,Name:'XptoChild2'},
             ]
            },
            {childID:1,Name:'XptoChild1'},
            {childID:2,Name:'XptoChild2'},
            {
             bigArrayID : 2,
             name: 'Foo',
             children: [
                 {childID:3,Name:'FooChild1'},
                 {childID:4,Name:'FooChild2'},
             ]
            },
            {childID:3,Name:'FooChild1'},
            {childID:4,Name:'FooChild2'},
            {
             bigArrayID : 3,
             name: 'Bar',
             children: [
                 {childID:5,Name:'BarChild1'},
                 {childID:6,Name:'BarChild2'},
             ]
            },
            {childID:5,Name:'BarChild1'},
            {childID:6,Name:'BarChild2'}
        ]

每个 children 必须是新数组中的一个元素。

我需要一个包含所有父亲和所有 child 的新数组 object。

我需要在新数组中将 child 作为你父亲的兄弟姐妹。

我想我需要使用 concat and/or 展开数组函数...

Answer 1

是的，你是对的，你可以在回调中使用 Array#reduce() and then Array#concat() 每个元素及其子元素到累加器：

const bigArray = [{"bigArrayID":1,"name":"Xpto","children":[{"childID":1,"Name":"XptoChild1"},{"childID":2,"Name":"XptoChild2"}]},{"bigArrayID":2,"name":"Foo","children":[{"childID":3,"Name":"FooChild1"},{"childID":4,"Name":"FooChild2"}]},{"bigArrayID":3,"name":"Bar","children":[{"childID":5,"Name":"BarChild1"},{"childID":6,"Name":"BarChild2"}]}]
const result = bigArray.reduce(
  (result, element) => result.concat(element, element.children),
  []
)

// stringify is simply to prevent side-effects
// of stack snippet console behavior
console.log(JSON.stringify(result, null, 2))

Answer 2

原创

var resultArray = bigArray.concat(bigArray.map(function(item) {
  return item.children;
})

有订单

var result = [];
for(var i = 0; i < bigArray.length; i++) {
  result.push(bigArray[i]);
  for( var y = 0; y < bigArray[i].children.length; y++) {
    result.push(bigArray[i].children[y]);
  }
}

具有函数式编程和顺序

var result = [];
bigArray.forEach(function(item) {
  result.push(item);
  item.forEach(result.push);
})

Answer 3

不确定我是否正确理解了你的问题，但在我看来你想要扁平化层次结构？如果顺序不是很重要，那么下面的解决方案可能会有所帮助

let childArray = [];
bigArray.forEach(x=> {
  childArray = [...childArray, x.children]
});

let answer = [...childArray,...bigArray];

这个想法是遍历所有的父亲，以获取他们所有的 children 并将所有 children 存储到一个数组中，然后将 children 与父亲合并为一个数组数组

Answer 4

Array#reduce变成Array#concat被称为Array#flatMap, which is currently stage-3. This is also known as #chain according to Fantasy Land Monad spec。

你可以这样使用它

const result =
  bigArray .flatMap
    (node => [ node, ...node.children ])

console.log (result)
// [ { bigArrayID: 1, name: 'Xpto', children: [ ... ] }
// , { childID: 1, name: 'XptoChild1' }
// , { childID: 2, name: 'XptoChild2' }
// , { bigArrayID: 2, name: 'Foo', children: [ ... ] }
// , { childID: 3, name: 'FooChild1' }
// , { childID: 4, name: 'FooChild2' }
// , { bigArrayID: 3, name: 'Bar', children: [ ... ] }
// , { childID: 5, name: 'BarChild1' }
// , { childID: 6, name: 'BarChild2' }
// ]

如果您的环境中没有它，您可以轻松地对其进行 polyfill

Array.prototype.flatMap = function (f)
  { return this.reduce
      ( (acc, x) =>
          acc .concat (f (x))
      , []
      )
  }

运行下面是您浏览器中程序的完整演示

Array.prototype.flatMap = function (f)
  { return this.reduce
      ( (acc, x) =>
          acc .concat (f (x))
      , []
      )
  }

const bigArray =
  [ { bigArrayID: 1
    , name: "Xpto"
    , children:
        [ { childID: 1, name: "XptoChild1" }
        , { childID: 2, name: "XptoChild2" }
        ]
    }
  , { bigArrayID: 2
    , name: "Foo"
    , children:
        [ { childID: 3, name: "FooChild1" }
        , { childID: 4, name: "FooChild2" }
        ]
    }
  , { bigArrayID: 3
    , name: "Bar"
    , children:
      [ { childID: 5, name: "BarChild1" }
      , { childID: 6, name: "BarChild2" }
      ]
    }
  ]

const result =
  bigArray .flatMap
    (node => [ node, ...node.children ])

console.log (result)
// [ { bigArrayID: 1, name: 'Xpto', children: [ ... ] }
// , { childID: 1, name: 'XptoChild1' }
// , { childID: 2, name: 'XptoChild2' }
// , { bigArrayID: 2, name: 'Foo', children: [ ... ] }
// , { childID: 3, name: 'FooChild1' }
// , { childID: 4, name: 'FooChild2' }
// , { bigArrayID: 3, name: 'Bar', children: [ ... ] }
// , { childID: 5, name: 'BarChild1' }
// , { childID: 6, name: 'BarChild2' }
// ]

如果你想要像 Array#map 和 Array#reduce 和 Array#filter 提供的索引和上下文切换，你也可以添加它们

Array.prototype.flatMap = function (f, context)
  { return this.reduce
      ( (acc, x, i) =>
          acc .concat (f .call (context, x, i, this))
      , []
      )
  }

从数组和包含另一个数组的属性创建一个新数组

create a new array from array and your property that contains another array

javascript

arrays

functional-programming

concat

object

从数组和包含另一个数组的 属性 创建一个新数组

create a new array from array and your property that contains another array

javascript

arrays

functional-programming

concat

object

从数组和包含另一个数组的属性创建一个新数组