从对象数组中获取单个属性数组

Question

我有这个对象数组，我想把所有controls从这个到另一个数组：

this.formModel = {
    sections: [
        {
            title: 'Section 01',
            controls: [
                new FormControlInput({
                    key: 'name 01',
                    label: 'Name 01'
                }),
                new FormControlSelect({
                    key: 'abc',
                    label: 'Abc'
                })
            ]
        },
        {
            title: 'Section 02',
            controls: [
                new FormControlInput({
                    key: 'name 02',
                    label: 'Name 02'
                })
            ]
        }
    ]
};

我正在使用map，但我没有得到单个数组，我得到的是数组数组：

this.formModel.sections.map(function (x) { return x.controls; })

获取此信息：

[
     {
        [{
            key: 'name 01',
            label: 'Name 01'
        },
        {
            key: 'abc',
            label: 'Abc'
        }]
     },
     {
        [{
            key: 'name 02',
            label: 'Name 02'
        }]
     }
]

我想要的是：

[
    {
        key: 'name 01',
        label: 'Name 01'
    },
    {
        key: 'abc',
        label: 'Abc'
    },
    {
        key: 'name 02',
        label: 'Name 02'
    }       
]

Answer 1

您只需在映射后展平数组：

var obj = {
  sections: [{
      title: 'Section 01',
      controls: [
        { key: 'name 01', label: 'Name 01' },
        { key: 'abc', label: 'Abc' }
      ]
    }, {
      title: 'Section 02',
      controls: [
        { key: 'name 02', label: 'Name 02' }
      ]
    }
  ]
};

var mapped = obj.sections.map(function (x) { return x.controls; });
var flattened = [].concat.apply([], mapped);
console.log(flattened);

简化您的示例：

// This is your structure:
var sections= [{
      controls: [{}, {}] // C1
    }, {
      controls: [{}]     // C2
    }
];

// With the map, grabbing each `controls` property, and using that as an entry in your array:
var mapped = sections.map(function (x) { return x.controls; });
console.log(mapped);
// [[{},{}],[{}]]
//  ^ C1    ^ C2

// We need to remove that extra layer of arrays:
var flattened = [].concat.apply([], mapped);
console.log(flattened);

Answer 2

您可以使用reduce展平层次结构

formModel.sections
  .map(x =>  x.controls)
  .reduce((prev, current) => prev.concat(current), [])

Answer 3

使用reduce代替map：

let formModel = {
    sections: [
        {
            title: 'Section 01',
            controls: [
                {
                    key: 'name 01',
                    label: 'Name 01'
                },
                {
                    key: 'abc',
                    label: 'Abc'
                }
            ]
        },
        {
            title: 'Section 02',
            controls: [
                {
                    key: 'name 02',
                    label: 'Name 02'
                }
            ]
        }
    ]
};

let result = formModel.sections.reduce((res, section) => {
	return res = res.concat(section.controls); 
}, []);

console.log(result);