ReactJS：Immutable.js：合并两个 Json 对象

Question

我正在使用 React、Redux 和不可变的。我试图合并两个 Json 对象，数据和预期结果如下，

obj1 = 
{id: 1, first_name: "abc", surname: "def", children: ["kid1", "kid2"]}

obj2 = 
{first_name: "abc", surname: "def", email: "abc.def@gmail.com", mobile: ""}

mergedObj = {id: 1, first_name: "abc", surname: "def", email: "abc.def@gmail.com", Mobile: "",  children: ["kid1", "kid2"]}

如果数据在 obj1 上不可用，则应从 obj2 中获取。

我尝试使用不可变合并，如下所述，

import Immutable, {merge} from "immutable";
const mergedObj = merge(Immutable.fromJS(obj2), Immutable.fromJS(obj1));
console.log(mergedObj)

结果与 obj2 相同，本质上，合并没有发生，

{first_name: "abc", surname: "def", email: "abc.def@gmail.com", mobile: ""}

Answer 1

您可以使用 javascript 扩展运算符进行合并，这是在 ES6 之后引入的。

var obj1 = {id: 1, first_name: "abc", surname: "def", children: ["kid1", "kid2"]}

var obj2 = {first_name: "abc", surname: "def", email: "abc.def@gmail.com", mobile: ""}

var mergedObj = {...obj1,...obj2};

Answer 2

文档似乎表明您正在正确使用 immutable.merge()。

遗憾的是，这一功能似乎已损坏，正如 their live example.

上所见

我建议提交一个 issue/pull-request 来解决这个问题，但似乎 immutable is now essentially unmaintained -- 该仓库有 26 个打开的拉取请求，并且 none 被合并到上个月。

无论如何，我会说这可以用 ES6+ JS 做的很好。 在那之前，不可变是一种必须具备的东西，因为 JS 没有提供足够的工具-该范例的开箱即用。

如果这是一个选项（或者即使不是，以下也会按预期工作），考虑@AlwinJose 关于使用 spread syntax for object literals 的建议，自 ES2018 起可用：

var mergedObj = {...obj1,...obj2};

（执行浅合并，就像Object.assign）

Answer 3

如果您从 POJO 开始并希望以 POJO 结束，我建议使用上面提到的对象扩展语法（或 Object.assign）。在那种情况下不需要使用 Immutable。

如果你想使用 Immutable，并且你知道 obj1 和 obj2 是对象，你可以改为调用 Map(obj2).merge(obj1)，这绝对有效。（基于我们代码库中的广泛使用。）

否则，文档声称您可以使用 POJO 调用 Immutable.merge，因此您使用 Immutable.merge(obj2, obj1) 可能会更好，而忽略对 Immutable.fromJS.[=17= 的调用]

Answer 4

示例数据=

        const json1 = [
            {id: 1, test: 1},
            {id: 2, test: 2},
            {id: 3, test: 3},
            {id: 4, test: 4},
            {id: 5, test: 5}
        ];

        const json2 = [
            {id: 3, test: 6},
            {id: 4, test: 7},
            {id: 5, test: 8},
            {id: 6, test: 9},
            {id: 7, test: 10}
        ];

示例 1=


        const finalData1 = json1.concat(json2).reduce(function (index, obj) {
            index[obj.id] = Object.assign({}, obj, index[obj.id]);
            return index;
        }, []).filter(function (res, obj) {
            return obj;
        });

示例 2=

        let hashData = new Map();

        json1.concat(json2).forEach(function (obj) {
            hashData.set(obj.id, Object.assign(hashData.get(obj.id) || {}, obj))
        });

        const finalData2 = Array.from(hashData.values());

我推荐第二个例子，它更快。

ReactJS：Immutable.js：合并两个 Json 对象

ReactJS : Immutable.js : merge two Json objects

javascript

reactjs

immutable.js