JavaScript 将两个多维数组合并为唯一数组答案

【问题标题】：JavaScript merging two multidimensional arrays into unique arraysJavaScript 将两个多维数组合并为唯一数组
【发布时间】：2020-10-11 13:08:06
【问题描述】：

我正在尝试对如下所示的数据进行排序：

{
    "Params": [
        ["section", "North"],
        ["monitor", "Single Monitor"],
        ["section", "North"],
        ["monitor", "Dual Monitor"]
    ]
}

变成这样的东西：

{
    "section": [
        "North"
    ],
    "monitor": [
        "Single Monitor",
        "Dual Monitor"
    ]
}

但是我目前遇到了问题，我尝试了一些不同的方法，例如将数组串联在一起循环，甚至使用 lodash 的 uniq 函数，但每次我得到一个不想要的结果。

提前感谢您的帮助

【问题讨论】：

“我尝试了几种不同的方法...” - 请添加您最有希望的方法，我们会尽力帮助您。

标签： javascript ecmascript-6 merge lodash unique

【解决方案1】：

您可以使用array.reduce 聚合您的数组数组：

let obj = {
    "Params": [
        ["section", "North"],
        ["monitor", "Single Monitor"],
        ["section", "North"],
        ["monitor", "Dual Monitor"]
    ]
}

let result = obj.Params.reduce((acc,cur) => {
   let [key,value] = cur;
   if(!acc[key]){
      acc[key] = [];
   }
   if(!acc[key].includes(value)){
      acc[key].push(value);
   }
   return acc;
}, {});

console.log(result);

【讨论】：

为什么find 是单个值？ includes 会更好。

【解决方案2】：

你可以将reduce()方法转为groupBy函数如下

let obj = {
  "Params": [
    ["section", "North"],
    ["monitor", "Single Monitor"],
    ["section", "North"],
    ["monitor", "Dual Monitor"]
  ]
};

const res = obj.Params.reduce((acc, [key, val]) => {
  acc[key] = acc[key] || [];
  if (!acc[key].includes(val)) {
    acc[key].push(val);
  }
  return acc;
}, {});
console.log(res);

【讨论】：

【解决方案3】：

您可以使用_.groupBy() 和_.head()（每对的第一项）对项目进行分组。然后使用_.mapValues() 迭代每个组，映射它以获取_.last() 项，并使用_.uniq() 获取唯一值：

const data = {"Params":[["section","North"],["monitor","Single Monitor"],["section","North"],["monitor","Dual Monitor"]]};

const result = _.mapValues(
  _.groupBy(data.Params, _.head), // group by the first item
  g => _.uniq(_.map(g, _.last)) // map each group to the last item, and get unique values
);

console.log(result);

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

使用 lodash lodash/fp，您可以使用 _.flow() 生成一个执行相同操作的函数：

const { flow, groupBy, head, mapValues, map, last, uniq } = _;

const fn = flow(
  groupBy(head),
  mapValues(flow(
    map(last),
    uniq
  ))
);

const data = {"Params":[["section","North"],["monitor","Single Monitor"],["section","North"],["monitor","Dual Monitor"]]};

const result = fn(data.Params);

console.log(result);

&lt;script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)'&gt;&lt;/script&gt;

【讨论】：

【解决方案4】：

这里需要做的操作数。您可以使用reduce 对关键数据进行分组。由于您只有键值对数组格式，所以在 reduce 中我用[k,v] 解构了它，表示键和值。然后为了删除重复值，我使用了Set。

var data={
    "Params": [
        ["section", "North"],
        ["monitor", "Single Monitor"],
        ["section", "North"],
        ["monitor", "Dual Monitor"]
    ]
};

var result = data.Params.reduce((a,[k, v])=>(a[k] = [...(a[k] || []), v], a[k] = [...new Set(a[k])], a),{});

console.log(result);

【讨论】：