拆分对象属性值并在拆分时创建新的对象数组答案

【问题标题】：Split object propery values and create new array of object if they split拆分对象属性值并在拆分时创建新的对象数组
【发布时间】：2022-12-04 21:43:56
【问题描述】：

我有这样的对象。我在后端使用查询获取此对象，然后使用 qs 字符串库进行转换。

{ 
color: 'red,white',
size: 'xl', 
manufacturer: 'adidas,nike' 
}

我想要对象数组，棱镜贴图过滤需要什么

  const filterList = [
    {filter: "color", value: "red"},
    {filter: "color", value: "white"}, 
    {filter: "size", value: "xl"},
    {filter: "manufacturer", value: "adidas"},
    {filter: "manufacturer", value: "nike"},
  ];

我该如何处理？谢谢回复

【问题讨论】：

标签： javascript arrays object javascript-objects qstring

【解决方案1】：

要从原始对象创建所需的对象数组，您可以使用 Object.entries() 方法获取键值对数组，然后使用 Array.map() 迭代键值对并创建对象数组。

这是一个例子：

const obj = { 
  color: 'red,white',
  size: 'xl', 
  manufacturer: 'adidas,nike' 
};

const filterList = Object.entries(obj).map(([filter, value]) => {
  return value.split(",").map(v => ({ filter, value: v }));
}).flat();

console.log(filterList);

这将输出以下数组：

[
  {filter: "color", value: "red"},
  {filter: "color", value: "white"}, 
  {filter: "size", value: "xl"},
  {filter: "manufacturer", value: "adidas"},
  {filter: "manufacturer", value: "nike"},
]

【讨论】：

【解决方案2】：

这样的事情会做到这一点：

const data = {
  color: "red,white",
  size: "xl",
  manufacturer: "adidas,nike",
};

const result = [];
// color
let str = data.color.split(",");
str.forEach((element, index) => {
  result.push({ filter: "color", value: str[index] });
});

console.log(result);

并对尺寸和制造商做同样的事情。

【讨论】：

【解决方案3】：

像这样？

function transform(filters) {
  return Object.entries(filters).reduce((acc, [filter, commaSeparatedValues]) => {
    commaSeparatedValues.split(",").forEach(value => {
      acc.push({
        filter,
        value
      })
    });
    return acc;
  }, [])
}

const sample = {
  color: "red,white",
  size: "xl",
  manufacturer: "adidas,nike",
};

const transformed = transform(sample);
console.log(transformed);

【讨论】：