根据更改的属性数量创建对象数组答案

【问题标题】：Create object array according to changing number of properties根据更改的属性数量创建对象数组
【发布时间】：2018-12-31 09:53:07
【问题描述】：

我想根据一个类别的属性数量来处理数组。

我使用可用属性创建了一个数组（array_a），并根据属性（array_colors，array_sizes）对该数组值进行分组。例如现在我有两个数组'array_colors'和'array_sizes'，所以在我的代码中我循环它们并创建了一个对象数组（array_b）。但我的问题是我想处理动态数量的属性。

var array_a = [
   {
  "color":{
     "id":2,
     "name":"Green"
   }
   },
   {
  "color":{
     "id":3,
     "name":"Yellow"
   }
   },
   {
  "size":{
     "id":5,
     "name":"16"
   }
   },
   {
  "size":{
     "id":6,
     "name":"17"
   }
   },
   {
  "size":{
     "id":7,
     "name":"18"
  }
  }
];
array_colors = array_a.filter(function(myObject) {
    return myObject.hasOwnProperty('color');
  });

array_sizes = array_a.filter(function(myObject) {
 return myObject.hasOwnProperty('size');
 });

array_b = [];

for(var i = 0; i < array_colors.length; i++) {
for (var j = 0; j < array_sizes.length; j++) {
array_b.push( {
  "is_available":true,
  "qty":0,
  "price":0,
  "color":array_colors[i],
  "size":array_sizes[j]
});
}
}


array_b = [  
  {  
  "is_available":true,
  "qty":0,
  "price":0,
  "color":{  
     "id":2,
     "name":"Green"
      },
  "size":{  
     "id":5,
     "name":"16",
     "text":"16"
      }
   },
   {  
  "is_available":true,
  "qty":0,
  "price":0,
  "color":{  
     "id":2,
     "name":"Green"
      },
  "size":{  
     "id":6,
     "name":"17",
     "text":"17"
      }
   },
   {  
  "is_available":true,
  "qty":0,
  "price":0,
  "color":{  
     "id":2,
     "name":"Green"
      },
  "size":{  
     "id":7,
     "name":"18",
     "text":"18"
      }
   },
   {  
  "is_available":true,
  "qty":0,
  "price":0,
  "color":{  
     "id":3,
     "name":"Yellow"
      },
  "size":{  
     "id":5,
     "name":"16",
     "text":"16"
      }
   },
   {  
  "is_available":true,
  "qty":0,
  "price":0,
  "color":{  
     "id":3,
     "name":"Yellow"
      },
  "size":{  
     "id":6,
     "name":"17",
     "text":"17"
       }
   },
   {  
  "is_available":true,
  "qty":0,
  "price":0,
  "color":{  
     "id":3,
     "name":"Yellow"
      },
  "size":{  
     "id":7,
     "name":"18",
     "text":"18"
      }
   }
]

我预期的数组如上。我想动态处理颜色、大小等属性。

【问题讨论】：

您确定这是您的预期输出吗？ 'red' 不在您的输入中（而且您在 pushing 到 array_b 的对象中似乎没有很多属性？）
对不起，我不明白你的意思
你说你的预期输出是array_b = [ {'color':'red','size':16}, {'color':'red','size':17}, {'color':'green','size':16}, {'color':'green','size':17} ] ，但是'color':'red'从哪里来？ 'red' 不在脚本中的任何其他位置，为什么它会神奇地出现在输出中？此外，green 在您的输入中是大写的，当您将其转换为array_b 时，您是否想要在颜色上调用toLowerCase？
您的预期输出也不包含除color 和size 之外的任何属性，但您的.push 尝试有一个具有is_available、qty 和@987654336 的对象@。您的输出中是否真的期望这些属性？请澄清您的问题
对不起，我错误地输入了“红色”。顺便说一句，我得到了答案。感谢您的关心

标签： javascript vue.js lodash

【解决方案1】：

使用_.mergeWith()，您可以将属性合并到单个对象，其中属性名称作为键，每个键的值数组。然后使用_.flatMap()（或Array.flatMap()：

const array_a = [{"color":{"id":2,"name":"Green"}},{"color":{"id":3,"name":"Yellow"}},{"size":{"id":5,"name":"16"}},{"size":{"id":6,"name":"17"}},{"size":{"id":7,"name":"18"}}];

const getAllCombinations = _.flow([
  arr => _.mergeWith({}, ...arr, (o, s) => _.isArray(o) ? [...o, s.name] : [s.name]),
  props => _.reduce(props, (r, values, k) =>
    _.isEmpty(r) ?
    values.map(v => ({
      is_available: true,
      qty: 0,
      price: 0,
      [k]: v,
    })) :
    _.flatMap(r, o => values.map(v => ({
      ...o,
      [k]: v
    }))), [])
]);



console.log(getAllCombinations(array_a));

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：

不客气 :) 别忘了accept。