Javascript - 平面图的解决方法答案

【问题标题】：Javascript - Workaround for flatmapJavascript - 平面图的解决方法
【发布时间】：2020-07-18 06:26:03
【问题描述】：

所以我一直在寻找一些平面地图的解决方法，因为它在 IE 上不起作用，我找到了这个：但我真的不明白为什么它会起作用

var gadjets = [
  {computers:['asus', 'hp'],
  sellphones:['Galaxy', 'Nokia']
  },

  {computers:['dell', 'insys'],
  sellphones:['iphone', 'samsung']
  }
];

const getValues = gadjets.reduce((acc, gadjet) => acc.concat(gadjet[computers]), []) // instead of gadjets.flatMap(gadjet=> gadjet[computers])

此代码返回：

['asus','hp','dell','insys']

但它不应该返回吗：

['asus','hp'],['dell', 'insys']

【问题讨论】：

你正在使用 concat 而不是 push 这就是为什么它是普通数组（只是连接）
你可以找到 flatMap 的 polyfills。 core-js 中有一个（目前对维护者来说有点束缚），es-shims project 中有一个，...
@PranavCBalan - 以上想要 concat.
“但它不应该返回” 那是什么？您已经展示了两个不同的值，但它们周围没有容器。
@T.J.Crowder ：是的，但他很困惑为什么输出是普通数组而不是嵌套的

标签： javascript arrays ecmascript-6 flatmap

【解决方案1】：

这是因为reduce 将你给它的元素加起来。比如下面的代码：

let arr = [1,2,3,4,5];
console.log(arr.reduce((before, value)=>before+value));

此代码获取每个value 并将其添加到before。然后它将附加值传递给reduce 的下一次迭代，在before 变量中。

在您的代码中，您将一个数组传递给 before，或者在您的情况下为 acc，并从 gadgets['computers'] 连接（合并）一个新数组并返回该数组。这会从对象数组中创建一个计算机列表。

更多关于reducehere的信息。

【讨论】：

【解决方案2】：

如果您希望输出为数组数组。尝试这个：

var gadjets = [
  { computers: ["asus", "hp"], sellphones: ["Galaxy", "Nokia"] },
  { computers: ["dell", "insys"], sellphones: ["iphone", "samsung"] }
];
const groupBy = key => {
  let res = gadjets.reduce((objectsByKeyValue, obj) => {
               let arr = [];
               arr.push(obj[key]);
               return objectsByKeyValue.concat(arr);
        }, []);
   return res;
};
console.log(groupBy("computers"));

【讨论】：

【解决方案3】：

但它不应该返回

我不确定你想在那里向我们展示什么，但如果你的意思是

[['asus','hp'],['dell', 'insys']]

那么不，不应该。 concat 将您传递给它的数组展平（单层）：

const a = [].concat(['asus','hp'], ['dell', 'insys']);
console.log(a); // ["asus", "hp", "dell", "insys"]

所以acc.concat(gadjet[computers]) 将这些computers 数组中的每一个展平成一个新数组，这是reduce 的累加结果。

【讨论】：