当对象可以具有不同类型时，如何按键对对象数组进行分组答案

【问题标题】：How to group array of objects by key when object can have differnt types当对象可以具有不同类型时，如何按键对对象数组进行分组
【发布时间】：2021-10-08 22:29:52
【问题描述】：

我有一个这样的对象数组：

const input = [
    {
        "name" : "car",
        "sign" : "+",
        "options" : "benz"
    },
    {
        "name" : "bike",
        "sign" : "+",
        "options" : "pulsar"
    },
    {
        "name" : "bike",
        "sign" : "+",
        "options" : "enfield"
    },
    {
        "name" : "car",
        "sign" : "+",
        "options" : ["toyota","hyundai","benz"]
    },
    {
        "name" : "",
        "sign" : "",
        "options" : "" 
    },
    {
        "name" : "car",
        "sign" : "+",
        "options" : ["audi", "ford"]
    }
]

输入结构是这样的：每个对象都有3个键值对。

都可以为空
它可以有有效值：

一个。选项可以是字符串

b.也可以是数组

我不希望在输出中添加值为“”（空字符串）的对象，输出应该是这样的：

[
    {"car" : [ "benz", "toyota","hyundai", "audi", "ford"]},
    {"bike" : ["pulsar","enfield" ]}
]

当对象值可以是数组或字符串时，其他各种答案都没有显示如何处理，所以我正在写一个新问题。

我不确定是否必须使用 reduce 或 map。非常感谢任何帮助，在此先感谢。

【问题讨论】：

这能回答你的问题吗？ Group array items using object 其中大多数使用push() 来添加到累加器，但请查看concat() 以适合您的情况。（它接受字符串或数组作为参数）
不，在那个答案中，它们只有一个颜色字符串。但就我而言，正如我所提到的，“选项”键可以有一个字符串或字符串数组作为值。
你看我的评论了吗？ concat() 接受字符串或数组。
我试过了。当它遇到一个带有“”作为任何键值的对象时，它就会失败。

标签： javascript arrays typescript object javascript-objects

【解决方案1】：

这是一个相当标准的“分组依据”操作，按一个属性分组并将另一个属性累积到一个数组中。

为了容纳字符串和数组，您使用concat() 将options 值添加到累加器中。 Concat 接受单个值或值数组，并将后者展平到目标数组中。为避免重复，您可以使用 Set。下面的 sn-p 仅在 name 和 options 都为真时将元素添加到累加器。

const input = [
  { "name": "", "sign": "+", "options": "benz" }, // blank 'name' property
  { "name": "bike", "sign": "+", "options": "" }, // blank 'options' property
  { "name": "bike", "sign": "+", "options": "enfield" },
  { "name": "car", "sign": "+", "options": ["toyota", "hyundai"] },
  { "name": "car", "sign": "", "options": "ford" },
  { "name": "car", "sign": "+", "options": ["audi", "ford"] }]

const result = Object.values(
  input.reduce((acc, { name, options }) => {
    if (name && options) {
      const category = (acc[name] || (acc[name] = { [name]: [] }));
      category[name] = [...new Set(category[name].concat(options))];
    }
    return acc;
  }, {}));

console.log(result)

.as-console-wrapper { max-height: 100% !important; top: 0; }

或者，为了避免在每次迭代时创建新的 Set，您可以累积成一个 Set，然后映射 reduce() 调用的结果并将每个集合转换为一个数组。

const input = [
  { "name": "", "sign": "+", "options": "benz" }, // blank 'name' property
  { "name": "bike", "sign": "+", "options": "" }, // blank 'options' property
  { "name": "bike", "sign": "+", "options": "enfield" },
  { "name": "car", "sign": "+", "options": ["toyota", "hyundai"] },
  { "name": "car", "sign": "", "options": "ford" },
  { "name": "car", "sign": "+", "options": ["audi", "ford"] }]

const result = Object.entries(
  input.reduce((acc, { name, options }) => {
    if (name && options) {
      acc[name] || (acc[name] = new Set);
      [].concat(options).forEach(option => acc[name].add(option));
    }
    return acc;
  }, {}))
  .map(([name, options]) => ({ [name]: [...options] }));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

由于您似乎不能在此处使用 ES6 迭代器，因此可以选择仅使用 Array#includes() 检查以避免重复。

const input = [
  { "name": "", "sign": "+", "options": "benz" }, // blank 'name' property
  { "name": "bike", "sign": "+", "options": "" }, // blank 'options' property
  { "name": "bike", "sign": "+", "options": "enfield" },
  { "name": "car", "sign": "+", "options": ["toyota", "hyundai"] },
  { "name": "car", "sign": "", "options": "ford" },
  { "name": "car", "sign": "+", "options": ["audi", "ford"] }]

const result = Object.values(
  input.reduce((acc, { name, options }) => {
    if (name && options) {
      const category = (acc[name] || (acc[name] = { [name]: [] }));
      [].concat(options).forEach(option => {
        if (!category[name].includes(option)) category[name].push(option)
      });
    }
    return acc;
  }, {}));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

ES3

var input = [
  { "name": "", "sign": "+", "options": "benz" },
  { "name": "bike", "sign": "+", "options": "" },
  { "name": "bike", "sign": "+", "options": "enfield" },
  { "name": "car", "sign": "+", "options": ["toyota", "hyundai"] },
  { "name": "car", "sign": "", "options": "ford" },
  { "name": "car", "sign": "+", "options": ["audi", "ford"] }
];

var temp = {};

for (var i = 0; i < input.length; i++) {
  var name_ = input[i].name;
  var options_ = input[i].options;

  if (name_ !== undefined && name_ !== "" && options_ !== undefined && options_ !== "") {

    if (!temp.hasOwnProperty(name_)) {
      temp[name_] = {};
      temp[name_][name_] = [];
    }

    var options_ = [].concat(options_);

    for (var j = 0; j < options_.length; j++) {
      if (!temp[name_][name_].includes(options_[j])) {
        temp[name_][name_].push(options_[j]);
      }
    }

  }
}

var result = [];

for (var key_ in temp) {
  if (temp.hasOwnProperty(key_)) {
    result.push(temp[key_]);
  }
}

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

我在 ??模块解析失败：使用这些加载器处理了意外的令牌文件：* ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js * ./node_modules/babel-loader/lib/index.js 你可以需要一个额外的加载器来处理这些加载器的结果。 | }) => { | if (name) { > (acc[name] ??= { | [name]: [] | })[name].push(...[].concat(options));
编辑提供||短路而不是逻辑无效分配。
但是数组值会有重复值。例如，如果 2 个对象中有“benz”，那么结果将有两次“benz”{“car”：[“benz”，“benz”]。如何摆脱这些重复的itensm
使用 Set 进行编辑以避免重复
Type 'Set' 不是数组类型或字符串类型。使用编译器选项“--downlevelIteration”来允许迭代器的迭代。 TS2569 56 |如果（名称 && 选项）{ 57 |常量类别 = (acc[name] || (acc[name] = { [name]: [] }));类别[名称] = [...新设置（类别[名称].concat（选项））]； | ^

【解决方案2】：

您可以使用 reduce 函数添加您想要的条件。

const input = [
    {
        "name": "car",
        "sign": "+",
        "options": "benz"
    },
    {
        "name": "bike",
        "sign": "+",
        "options": "pulsar"
    },
    {
        "name": "bike",
        "sign": "+",
        "options": "enfield"
    },
    {
        "name": "bike",
        "sign": "+",
        "options": "enfield"
    },
    {
        "name": "car",
        "sign": "+",
        "options": ["toyota", "hyundai"]
    },
    {
        "name": "",
        "sign": "",
        "options": ""
    },
    {
        "name": "car",
        "sign": "+",
        "options": ["audi", "ford"]
    }
]

let grouped = input.reduce(function (r, a) {
    if (a.name !== "") {
        r[a.name] = r[a.name] || [];
        if (Array.isArray(a.options)) {
            r[a.name] = Array.from( new Set (r[a.name].concat(a.options)))
        } else {
            r[a.name].push(a.options)
            r[a.name] = Array.from( new Set (r[a.name]));
        }

    }
    return r;
}, {});
let mapped = Object.entries(grouped).map(([key, value])=>{return{[key]:value}})

console.log(mapped)

【讨论】：

关闭，OP 正在寻找一个对象数组。
但是数组值会有重复值。例如，如果 2 个对象中有“benz”，那么结果将有两次“benz”{“car”：[“benz”，“benz”]。如何摆脱这些重复的项目
@ChaitraD 使用 Set() 编辑以避免重复。
@pilchard 你完全正确。如何在不使用另一个映射的情况下创建一个对象数组来重写 reduce 函数？
@ChaitraD 我再次编辑了答案以添加地图功能，因此输出与您发布的相同。

【解决方案3】：

首先将输入转换为映射，以便您可以在某个键值对中包含所有内容：

input.forEach((e)=>{
if(!(e["name"] in tempMap)){
    tempMap[e["name"]] = []
}
if(typeof e["options"] == typeof 'test'){
        tempMap[e["name"]].push(e["options"])
}else
    tempMap[e["name"]].push(...e["options"])
})

然后将其转换为您喜欢的任何形式

output = []
Object.keys(tempMap).forEach((e)=>{
    obj = {}
    obj[e] = tempMap[e]
    if(e != '')
        output.push(obj)
})

【讨论】：

【解决方案4】：

您可以使用reduce 来满足您的要求。看看这个-

const input=[{name:"car",sign:"+",options:"benz"},{name:"bike",sign:"+",options:"pulsar"},{name:"bike",sign:"+",options:"enfield"},{name:"car",sign:"+",options:["toyota","hyundai"]},{name:"",sign:"",options:""},{name:"car",sign:"+",options:["audi","ford","benz"]}];

const result = input.reduce((acc, {name, options}) => {
    // Check if the name is not empty
    if (name) {
    
      // Initialize the object key with empty array if not already initialized
      acc[name] ||= [];
      
      // Check if the options is an array then push the array using spread operation
      // Otherwise directly push the string.
      if (Array.isArray(options)) {
        acc[name].push(...options);
      } else {
        acc[name].push(options);
      }
    }
  return acc;
}, {});

// Convert the object into array of objects.
// This is redundant I believe. If you use the `result` object
// that would be more accessible for you.
const output = Object.entries(result).map(([key, value]) => {
  // Use Set to remove duplicate entries from the value array.
  return Object.fromEntries([[key, [...new Set(value)]]]);
});

console.log(output);

// If you don't need the array of object as output then the result object is enough for you.
// You can access the car and bike object easily in this case.
console.log(result);

.as-console-wrapper{min-height: 100%!important; top: 0}

【讨论】：

如何处理输出中的重复值？例如，如果 2 个对象中有“benz”，那么结果将有两次“benz”{“car”：[“benz”，“benz”]。如何摆脱这些重复的项目
好点，OP 改变了他的问题并且没有提到重复的条目。顺便说一句，我已经更新了我的答案。是 Set 来救我们的。

【解决方案5】：

我已经做到了……

const input = 
  [ { name: 'car',  sign: '+', options: 'benz'                 } 
  , { name: 'bike', sign: '+', options: 'pulsar'               } 
  , { name: 'bike', sign: '+', options: 'enfield'              } 
  , { name: 'bike', sign: '+', options: 'enfield'              } 
  , { name: 'car',  sign: '+', options: [ 'toyota', 'hyundai'] } 
  , { name: '',     sign: '',  options: ''                     } 
  , { name: 'car',  sign: '+', options: [ 'audi', 'ford']      } 
  ] 

const result = Object.entries( input.reduce((a,{name,options})=>
  {
  if (name)
    (a[name] = a[name] ?? []).push(...[options].flat() )
  return a
  }, {})
  ).map(([k,v])=>({[k]:[...new Set(v)]})) // remove duplicates

console.log( result )

.as-console-wrapper { max-height: 100% !important; top: 0 }
.as-console-row::after { display: none !important; }

【讨论】：