如何将带有数组的对象转换为数组答案

【问题标题】：How to convert an object with arrays into an array如何将带有数组的对象转换为数组
【发布时间】：2022-01-04 20:08:43
【问题描述】：

我在将包含数组的对象缩减为简单数组时遇到问题。我有一个返回狗列表及其价格的后端。 api返回数据的方式似乎很难使用，我正在努力将对象转换为数组。我试过把它变成一个数组并减少它。

这是一个例子 - 我想转换以下对象：

const a = {
    dogs: [{
            "id": "dog1",
            "priceRange": [
                "low",
                "high"
            ],
            "vaccinated": true,
        },
        {
            "id": "dog2",
            "priceRange": [
                "low",
                "high"
            ],
            "vaccinated": false,
        }
    ],
    "cost": [{
            "id": "low",
            "cost": 200,
        },
        {
            "id": "mid",
            "cost": 400,
        },
        {
            "id": "high",
            "cost": 600,
        }
    ]
};

进入这个数组：

const reducedArray = [{
        "id": "dog1",
        "priceRange": [{
                "id": "low",
                "cost": 200,
            },
            {
                "id": "high",
                "cost": 600,
            }
        ],
        "vaccinated": true,
    },
    {
        "id": "dog2",
        "priceRange": [{
                "id": "low",
                "cost": 200,
            },
            {
                "id": "high",
                "cost": 600,
            }
        ],
        "vaccinated": false,
    }
]

我不确定

【问题讨论】：

标签： javascript arrays reduce

【解决方案1】：

使用Array#reduce，迭代a.cost，同时更新Map，其中键是id，值是对象
使用Array#map，迭代a.dogs并使用另一个Array#map迭代设置地图中的priceRannge项目

const a = {
  "dogs": [ { "id": "dog1", "priceRange": [  "low", "high" ], "vaccinated": true }, { "id": "dog2", "priceRange": [ "low", "high" ], "vaccinated": false } ],
  "cost": [ { "id": "low", "cost": 200 }, { "id": "mid", "cost": 400 }, { "id": "high", "cost": 600 } ]
};

const costMap = a.cost.reduce((map, cost) => 
  map.set(cost.id, cost)
, new Map);

const reducedArray = a.dogs.map(dog => ({
  ...dog, 
  priceRange: dog.priceRange.map(range => {
    const { id, cost } = costMap.get(range) || {};
    return { id, cost};
  })
}));

console.log(reducedArray);

【讨论】：

【解决方案2】：

您需要先遍历 a.dogs 数组，然后在每次迭代中遍历 priceRange 数组并在 a.cost 数组中找到其对应的值，然后返回该值而不是字符串 low 或 high。

a.dogs.map(dog => ({
    ...dog,
  priceRange: dog.priceRange.map(priceRange => a.cost.find(cost => cost.id === priceRange))
}))

【讨论】：