如何从多个嵌套值创建项目数组？

问题描述

我尝试使用的数组采用以下格式（数组中可能有更多或更少的对象）：

this.selected_sum_version 可以有多个组：

this.selected_sum_version.sum_item_groups = [
    {
        "id": 1,"name": "GROUP 1","version_id": 1,"sum_items": [
            {
                "id": 1,"type": "formula","sum_item_group_id": 1,"formula": {
                    "id": 1,"name": "Formula NAME","sum_item_id": 1
                },"summary_text_Box": null,"grid": null,"chart": null
            },{
                "id": 4,"order": 2,"type": "text_Box","formula": null,"text_Box": {
                    "id": 1,"name": "Wei","sum_item_id": 4
                },{
                "id": 5,"order": 3,"text_Box": {
                    "id": 2,"name": "Lan","sum_item_id": 5
                },"chart": null
            }
        ]
    },{
        "id": 4,"name": "GROUP 2","sum_items": [
            {
                "id": 7,"order": 1,"sum_item_group_id": 4,"text_Box": {
                    "id": 4,"name": "JFM","sum_item_id": 7
                },{
        "id": 5,"name": "GROUP 3","sum_items": [
            {
                "id": 6,"sum_item_group_id": 5,"text_Box": {
                    "id": 3,"name": "JC","sum_item_id": 6
                },"chart": null
            }
        ]
    }
]

this.selected_sum_version.sum_item_groups 数组中的每个对象都有一个“类型”，而“类型”只能是 4 种不同的内容：网格、图表、公式和文本框。

我需要创建一个新数组，从 newArray = [] of ALL 开始，每个对象的名称取决于类型。使用上面的示例，newArray 将是：

this.newArray = ['Formula NAME','Wei','Lan','JFM','JC'].

根据 this.selected_sum_version.sum_item_groups 中的“类型”，“公式、文本框、网格或图表”之一将不会为空，并且将具有 id、名称和 sum_item_id。我需要 newArray 是所有这些名称的数组。

我在下面编写的代码适用于该目的，但是编写的效率不高。有没有更直接、更简洁的写法？

var emptyArray = [];

this.selected_sum_version.sum_item_group.forEach(element => {
        elementtwo.sum_items.forEach(elementthree => {
            if (elementthree.type === 'formula') {
                newArray.push(elementthree.formula.name);
            } else if(elementthree.type === 'grid') {
                newArray.push(elementthree.grid.name);
            } else if(elementthree.type === 'chart') {
                newArray.push(elementthree.chart.name);
            } else if(elementthree.type === 'text_Box') {
                newArray.push(elementthree.text_Box.name);
            } 
        });
});

解决方法

我没有测试下面的代码，但看起来你可以直接使用 type 中的值，而不是先检查值。

this.selected_sum_version.sum_item_group.forEach(element => {
        elementtwo.sum_items.forEach(elementthree => {
                newArray.push(elementthree[elementthree.type].name);
        });
});

,

这并不比您的方式更有效，但代码会更简洁一些。

var emptyArray = [];
var types = new Set(['formula','grid','chart','text_box']);

this.selected_sum_version.sum_item_group.forEach(element => {
  elementtwo.sum_items.forEach(el => {
    if (types.has(el.type)) {
      newArray.push(el[el.type].name);
    }
  }
}

编辑：此答案假定您不想添加到数组中的类型。如果您想添加名称而不考虑类型，则不需要 set 或 types.has 检查。

,

这是使用 reduce、map、Nullish coalescing operator 和 optional chaining 的简洁代码实现这一目标的最佳方法

const result = sum_item_groups.map(({ sum_items }) =>
  sum_items.map(
    (obj) =>
      obj.formula?.name ??
      obj.text_box?.name ??
      obj.grid?.name ??
      obj.chart?.name
  )
);

console.log(result.flat());

const sum_item_groups = [
  {
    id: 1,name: "GROUP 1",version_id: 1,sum_items: [
      {
        id: 1,type: "formula",sum_item_group_id: 1,formula: {
          id: 1,name: "Formula NAME",sum_item_id: 1,},summary_text_box: null,grid: null,chart: null,{
        id: 4,order: 2,type: "text_box",formula: null,text_box: {
          id: 1,name: "Wei",sum_item_id: 4,{
        id: 5,order: 3,text_box: {
          id: 2,name: "Lan",sum_item_id: 5,],{
    id: 4,name: "GROUP 2",sum_items: [
      {
        id: 7,order: 1,sum_item_group_id: 4,text_box: {
          id: 4,name: "JFM",sum_item_id: 7,{
    id: 5,name: "GROUP 3",sum_items: [
      {
        id: 6,sum_item_group_id: 5,text_box: {
          id: 3,name: "JC",sum_item_id: 6,];

const result = sum_item_groups.map(({ sum_items }) =>
  sum_items.map(
    (obj) =>
      obj.formula?.name ??
      obj.text_box?.name ??
      obj.grid?.name ??
      obj.chart?.name
  )
);

console.log(result.flat());

或

const result = sum_item_groups.reduce((acc,{ sum_items }) => {
  const values = sum_items.map((obj) => {
    return ( obj.formula?.name ?? obj.text_box?.name ?? obj.grid?.name ?? obj.chart?.name);
  });
  return [...acc,...values];
},[]);

console.log(result);

const sum_item_groups = [
  {
    id: 1,];

const result = sum_item_groups.reduce((acc,[]);

console.log(result);