有条件地创建对象字段的简单方法？

Question

我正在开发一个严重依赖数据输入的应用程序，因此我必须使用必需和非必需数据构建不同类型的对象，非必需数据块是我的问题，因为这会导致很多额外的代码，我想知道是否有办法避免这种情况。

这里我有一个有 6 个字段的表单（它只是一个例子，但我在应用程序的许多其他地方都有相同的情况），其中 2 个是必需的，其余的不是，我写了这个函数来处理对象创建：

  const handleAddSupplier = (e) => {
    e.preventDefault();
    const formData = e.target.elements;

    const supplierData = {
      name: formData.name.value,
      companyId: formData.companyId.value,
      ...((formData.country.value || formData.city.value || formData.postalCode.value || formData.street.value) && {
        address: {
          ...(formData.country.value && { country: formData.country.value }),
          ...(formData.city.value && { city: formData.city.value }),
          ...(formData.postalCode.value && { postalCode: formData.postalCode.value }),
          ...(formData.street.value && { street: formData.street.value }),
        },
      }),
    };

    console.log(supplierData);
  };

它有效，但在我看来它的代码太多，我怀疑有更简单的方法来做到这一点。

必须创建的对象的“签名”是：

{
  name: "",
  companyId: "",
  address: {
    country: "",
    city: "",
    postalCode: "",
    street: ""
  }
}

地址对象及其字段是完全可选的，因此如果没有地址字段可用（即用户只输入必填字段而没有其他字段），则根本不应创建地址对象，甚至不应创建为空对象.

我的代码有效，我只是想看看是否还有其他更简单的方法。

编辑：我对对象进行了一些解构，并为自己节省了一些写作，但是，如果我有 10 个非必填字段，我是否有条件地“或”所有 10 个字段呢？

const { name, companyId, country, city, postalCode, street } = e.target.elements;

const supplierData = {
  name: name.value,
  companyId: companyId.value,
  ...((country.value || city.value || postalCode.value || street.value) && {
    address: {
      ...(country.value && { country: country.value }),
      ...(city.value && { city: city.value }),
      ...(postalCode.value && { postalCode: postalCode.value }),
      ...(street.value && { street: street.value }),
    },
  }),
};

或者写同样的东西的另一种方式：

const {
  name: { value: name },
  companyId: { value: companyId },
  country: { value: country },
  city: { value: city },
  postalCode: { value: postalCode },
  street: { value: street },
} = e.target.elements;

const supplierData = {
  name: name,
  companyId: companyId,
  ...((country || city || postalCode || street) && {
    address: {
      ...(country && { country }),
      ...(city && { city }),
      ...(postalCode && { postalCode }),
      ...(street && { street }),
    },
  }),
};

所以这就引出了一个问题，这只是一个“选择你的毒药”的场景吗？例如，最后一个场景，您在创建对象之前编写代码来解构和命名属性，然后在对象内，代码更简单易读？

这让我想到另一个问题，我正在寻找的优化，是否值得研究，或者坚持这些场景中的任何一个都可以？

Answer 1

你可以在循环中检查它们

function process(e) {
  let obj = {}
  for(let item of e.target.elements){
    if(item.value) obj[item.name]=item.value //should do proper check if it's can have valid falsy value, I leave it here for simplicity
  }
  console.log(obj)
}

<form onsubmit="process(event);return false;">
  <div>
    <label for=a>A: </label>
    <input type=text name=a>
  </div>
  <div>
    <label for=b>B: </label>
    <input type=text name=b>
  </div>
  <div>
    <button type="submit">OK</button>
  </div>
</form>