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

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>

---