如何通過合并相同屬性的值來組合兩個物件？

如果屬性相同而不是覆寫，有沒有一種方法可以通過嵌套值來組合兩個物件？例如：

const obj1 = {a:10,b:13}
const obj2 = {a:84,c:70}

desired result : 
combinedObject = {a:{0:10,1:84}, b:13, c:70}

uj5u.com熱心網友回復：

const obj1 = { a: 10, b: 13 }
const obj2 = { a: 84, c: 70, d: 40 }

function foo(obj1, obj2) {

    const newObject = {}
    for (const key in { ...obj1, ...obj2 }) {
        const element1 = obj1[key];
        const element2 = obj2[key];
        if (element1 && element2)
            newObject[key] = [element1, element2]
        else if (element1)
            newObject[key] = element1
        else if (element2)
            newObject[key] = element2
    }
    return newObject
}
console.log(foo(obj1, obj2))

uj5u.com熱心網友回復：

這里有兩種解決方案，第一種，將鍵的值合并到一個具有相同鍵名的物件中。第二種，如您所提，提出一種合并它們的方法，但是維護每個鍵的索引有點復雜，但仍然是可能的。

兩個選項的結果看起來像這樣

// Option 1
{ a: [ 10, 11, 84 ], b: [ 13, 12 ], c: 70, d: 50 }

// Option 2
{
  a: { '0': 10, '1': 11, '2': 84 },
  b: { '0': 13, '1': 12 },
  c: 70,
  d: 50
}

這是如何實作的

const obj1 = { a: { 0: 10, 1: 11 }, b: 13 }
const obj2 = { a: 84, b: 12, c: 70, d: 50 }
const allKeys = Object.keys({ ...obj1, ...obj2 });

const merged1 = {};
for (const key of allKeys) {
    const isObj1Object = typeof obj1[key] === 'object';
    const isObj2Object = typeof obj2[key] === 'object';
    if (obj1[key] && obj2[key]) {
        merged1[key] = [
            ...(isObj1Object ? Object.values(obj1[key]) : [obj1[key]]),
            ...(isObj2Object ? Object.values(obj2[key]) : [obj2[key]]),
        ];
    } else if (obj1[key] || obj2[key]) {
        merged1[key] = obj1[key] || obj2[key];
    }
}

console.log(merged1);

const merged2 = {};
for (const key of allKeys) {
    if (obj1[key] && obj2[key]) {
        const isObj1Object = typeof obj1[key] === 'object';
        const isObj2Object = typeof obj2[key] === 'object';
        merged2[key] = {
            ...(
                isObj1Object
                    ? Object.values(obj1[key]).reduce((acc, v, i) => {
                        acc[Object.keys(obj2[key]).length   i] = v;
                        return acc;
                    }, {})
                    : (
                        isObj2Object
                            ? { [Object.keys(obj2[key]).length]: obj1[key] }
                            : { 0: obj1[key] }
                    )
            ),
            ...(
                isObj2Object
                    ? Object.values(obj2[key]).reduce((acc, v, i) => {
                        acc[Object.keys(obj1[key]).length   i] = v;
                        return acc;
                    }, {})
                    : (
                        isObj1Object
                            ? { [Object.keys(obj1[key]).length]: obj2[key] }
                            : { 1: obj2[key] })
            ),
        };
    } else if (obj1[key] || obj2[key]) {
        merged2[key] = obj1[key] || obj2[key];
    }
}

console.log(merged2);

你可以在這里測驗不同的選項Playground

如果您想在沒有任何級別限制的情況下進行深度合并，則必須更新代碼以使用遞回方法。

uj5u.com熱心網友回復：

您必須遵循物件定義的規則

const obj1 = {a:10,b:13}
const obj2 = {a:84,c:70}
//it can be like this
combinedObject = {a:[10,84], b:13, c:70}
// you can access to that value like this 
let value = combinedObject.a[0];

最后，您可以使用此代碼進行組合

    const obj1 = { a: 10, b: 13 };
    const obj2 = { a: 84, c: 70 };
    const props = Object.getOwnPropertyNames(obj2);
    let combinedObject = { ...obj1 };
    for (let i = 0; i < props.length; i  ) {
      if (combinedObject[props[i]])
        combinedObject[props[i]] = [combinedObject[props[i]], obj2[props[i]]];
      else combinedObject[props[i]] = obj2[props[i]];
    }
    //result :{a:[10,84], b:13, c:70}

如你所愿

const obj1 = { a: 10, b: 13 };
    const obj2 = { a: 84, c: 70 };
    const props = Object.getOwnPropertyNames(obj2);
    let combinedObject = { ...obj1 };
    for (let i = 0; i < props.length; i  ) {
      if (combinedObject[props[i]])
        combinedObject[props[i]] = {0:combinedObject[props[i]], 1:obj2[props[i]]};
      else combinedObject[props[i]] = obj2[props[i]];
    }
    console.log(combinedObject);
//result :{a:{0:10,1:84}, b:13, c:70}

標籤：javascript 反应 目的 ecmascript-6

上一篇：用另一個陣列中的值重命名JS物件中的鍵

下一篇：JSON-簡單。修改和使用復雜物件