如何合并具有空字串值的物件？

我正在努力合并 2 個物件。它們都有嵌套物件，任意鍵的值可以是空字串。

const obj1 = { name: "Arthur", lastName: "King", address: {
  street: "",
  city: "Some city",
  zip: "26772",
}};

const obj2 = { name: "", lastName: "", address: {
  street: "Some street",
  city: "",
  zip: "",
}};

Object.assign和傳播運算子不作業，因為他們正在做淺合并，這不是我的情況，即使我單獨合并嵌套物件。

問題是合并 2 個具有空字串值的物件無法按預期作業，因為 Javascript 將空字串視為不喜歡undefinedor的值null。

const merged = {...obj1, ...obj2, address: {...obj1.address, ...obj2.address}}

The result will be

{
    "name": "",
    "lastName": "",
    "address": {
        "street": "Some street",
        "city": "",
        "zip": ""
    }
}

期望的結果可能是下面的結果，但不知何故它不會忽略空值并將它們視為一個值。

{
    "name": "",
    "lastName": "",
    "address": {
        "street": "Some street",
        "city": "Some city",
        "zip": "26772"
    }
}

一種解決方法可能是從物件中洗掉所有空字串值，然后進行合并，但恕我直言，這完全是矯枉過正。

uj5u.com熱心網友回復：

您可以通過獲取條目并檢查值是否為物件來擴大新物件，然后將合并的嵌套物件作為值。

此方法僅適用于相同的物件結構。

const
    merge = (a, b) => Object.fromEntries(Object
        .entries(a)
        .map(([k, v]) =>  [k, v && typeof v === 'object'
            ? merge(v, b[k])
            : v || b[k]
        ])
    ),
    obj1 = { name: "Arthur", lastName: "King", address: { street: "", city: "Some city", zip: "26772" } },
    obj2 = { name: "", lastName: "", address: { street: "Some street", city: "", zip: "" } },
    merged = merge(obj1, obj2);

console.log(merged);

.as-console-wrapper { max-height: 100% !important; top: 0; }

uj5u.com熱心網友回復：

const obj1 = { name: "Arthur", lastName: "King", address: {
  street: "",
  city: "Some city",
  zip: "26772",
}};

const obj2 = { name: "", lastName: "", address: {
  street: "Some street",
  city: "",
  zip: "",
}};

// ===

function mergeObject (a, b) {
  const merged = {};
  
  Object.entries(a).forEach(([key, aValue]) => {
    const bValue = b[key];
    let mergedValue = null;
    
    if (typeof aValue === 'object') {
      mergedValue = mergeObject(aValue, bValue);
    }
    
    if (typeof aValue !== 'object') {
      const isAValueEmpty = aValue === '' || aValue === undefined || aValue === null;
      
      mergedValue = isAValueEmpty ? bValue : aValue;
    }
    
    merged[key] = mergedValue;
  });
  
  return merged;
}

console.log(mergeObject(obj1, obj2));

這里的想法是您有一種特定型別的“為空”，它與默認值不匹配。因此，我們創建了一個自定義函式來使用該條件，然后根據需要使用對該函式的遞回呼叫。

物件沒有最簡單的方法來使用myObject.map()類似陣列對其進行迭代，但是由于您知道您期望的結構，我們可以假設它Object.entries(myObject)會得到您期望的結果。

uj5u.com熱心網友回復：

您可以遞回地合并專案。請注意，下面的代碼段尚不支持陣列，因為您沒有陣列。如果您也想支持陣列，請告訴我。

function merge(main, secondary, deeper) {
    let primary = deeper ? JSON.parse(JSON.stringify(main)) : main;
    for (let sKey in secondary) {
        if (!primary[sKey]) primary[sKey] = secondary[sKey];
        else {
            if (typeof secondary === "object") {
                merge(primary[sKey], secondary[sKey], deeper);
            } else {
                if ([undefined, null, ""].indexOf(primary[sKey]) >= 0) primary[sKey] = secondary[sKey];
            }
        }
    }
    return primary;
}

const obj1 = { name: "Arthur", lastName: "King", address: {
  street: "",
  city: "Some city",
  zip: "26772",
}};

const obj2 = { name: "", lastName: "", address: {
  street: "Some street",
  city: "",
  zip: "",
}};

console.log(merge(obj1, obj2));

標籤：javascript 反应 ecmascript-6

上一篇：我需要確定一組使用X個模塊的用戶

下一篇：使用Javascript根據HTML表格的選定行動態計算每列的總數