在 Javascript lodash 中合并两个对象时保留键的顺序答案

【问题标题】：Preserve order of keys when merging two objects in Javascript lodash在 Javascript lodash 中合并两个对象时保留键的顺序
【发布时间】：2017-07-21 06:21:37
【问题描述】：

我有两个对象 x 和 y

var x = { 1: 1, 2: 2, hi: "hi" };
var y = { hello: "hello", coffee: "coffee" };

我想将它们合并为一个。

_.extend(y, x);

我希望 y 中的所有键都先出现，然后是 x 中的键。但是，这就是我得到的结果

{1: 1, 2: 2, hello: "hello", coffee: "coffee", hi: "hi"}

首先出现数字键，然后是 y 和 x 键。

我们如何让 y 中的所有键首先跟随 x 中的键？

【问题讨论】：

对象没有诸如键顺序之类的东西。只有数组可以！
键在对象中没有排序，它们不应该是。如果您想要提取信息的特定顺序，您必须定义该顺序。
这里的问题是没有“现有订单”。 你有什么用例需要这个功能？如果您对此进行解释，我们或许可以推荐合适的语言结构。
var x = {1: { p: 1, value: 1}, 2: {p: 3, value: 2}, 3: {p:2, value: 3}}.. .这几行有什么？
我看到我们有一个XY problem 的案例。

标签： javascript lodash

【解决方案1】：

如前所述，对象没有顺序。尽管大多数浏览器确实尊重顺序，所以如果你说的是非关键的东西，你可能能够逃脱信任浏览器的行为（即使它不是规范 - 规范没有顺序)。

更规范的方法是使用数组，例如：

var x = { 1: 1, 2: 2, hi: "hi" };
var y = { hello: "hello", coffee: "coffee" };

var a = [];

_.mapValues(x, function(v, k) {
  a.push({ key: k, value: v });
});
_.mapValues(y, function(v, k) {
  a.push({ key: k, value: v });
})

// ES6 (no lodash):
var a = [
    ...x.map((value, key) => ({ key, value })),
    ...y.map((value, key) => ({ key, value })),
];

http://codepen.io/cjke/pen/BWjPOO?editors=0010

如果出于某种奇怪的原因，您无法更改下拉菜单，您可以使用对象方式进行更改（但请参阅开头的免责声明）：

var x = { 1: 1, 2: 2, hi: "hi" };
var y = { hello: "hello", coffee: "coffee" };

var a = {};

_.mapValues(x, function(v, k) {
  a[k] = v;
});
_.mapValues(y, function(v, k) {
  a[k] = v;
})

http://codepen.io/cjke/pen/BWjPqO?editors=0010

【讨论】：

【解决方案2】：

我不确定 lodash 是否是此解决方案的要求，但我读到您在 react 中使用此代码，因此 JSX 也可以在那里工作。我注意到键名与值相同。所以我认为我们可以删除其中一个。我选择将继承的键替换为函数生成的数字键。 concat 创建顺序，分配数字键的 forEach 维护该顺序。那里可能有更雄辩的解决方案，但我希望这会有所帮助！

var x = { 1: 1, 2: 2, hi: "hi" };
var y = { hello: "hello", coffee: "coffee" };

function createObj(obj1, obj2) {
  let result = {};
  const arr = [...Object.values(obj2).concat(Object.values(obj1))];
  arr.forEach((v, i) => {
    result[i] = v;
  })
  return result
}

createObj(x, y)

【讨论】：