javascript - 有更好的方法向对象添加可选值吗？

目前我正在使用类似这样的方式进行可选的添加

  ...(!!providerId && { providerId }),
  ...(!!practiceId && { practiceId }),

有没有某种简写逻辑可以优雅地替代这个逻辑，就像

 yield createRemarkRequest.post(PATIENT_REMARK, {
  patientId,
  ?providerId,
  ?practiceId,
  noteTypeCode,
  note,
})

答案＃1

你正在做的事情是可以的（假设你不需要包含 0 或 "" 等；如果需要的话，你就需要用别的方法，而不是 !! 检查）。它依赖于 Boolean 对象上没有自有的、可枚举的属性，但没关系，确实没有。:-) 我在一些代码里确实这样做过，不过不常见。

但直接明确表达可能会更清楚：

const appropriateNameHere = {
    patientId,
    noteTypeCode,
    note,
};
if (providerId) {
    appropriateNameHere.providerId = providerId;
}
if (practiceId) {
    appropriateNameHere.practiceId = practiceId;
}
yield createRemarkRequest.post(PATIENT_REMARK, appropriateNameHere);

（这也让调试变得更容易一些。）

或者如果 createRemarkRequest.post 忽略 undefined 属性值，你可以这样做：

yield createRemarkRequest.post(PATIENT_REMARK, {
    patientId,
    providerId: providerId ? providerId : undefined,
    practiceId: practiceId ? practiceId : undefined,
    noteTypeCode,
    note,
});

答案＃2

关键是使用变量 || undefined

yield createRemarkRequest.post(PATIENT_REMARK, {
  patientId,
  providerId: providerId || undefined,
  practiceId: practiceId || undefined,
  noteTypeCode,
  note,
})

请注意，该条件在值为空数组或空对象时不起作用。例如：

const resultValueOption3 = {
    propZero: propZero || undefined,
    propNull: propNull || undefined,
    propEmptyArray: propEmptyArray || undefined,
    propEmptyObject: propEmptyObject || undefined,
    propEmptyString: propEmptyString || undefined,
    propFalse: propFalse || undefined,
    propTrue: propTrue || undefined,
  };

result: {"propEmptyArray":[],"propEmptyObject":{},"propTrue":true}

最后，我编写了包含多种组合的完整代码，结果如下：

export function Question11() {

  const propZero = 0;
  const propNull = null;
  const propEmptyArray = [];
  const propEmptyObject = {};
  const propEmptyString = "";
  const propFalse = false;
  const propTrue = true;

  const resultValueOption1 = {
    propZero: propZero ?? null,
    propNull: propNull ?? null,
    propEmptyArray: propEmptyArray ?? null,
    propEmptyObject: propEmptyObject ?? null,
    propEmptyString: propEmptyString ?? null,
    propFalse: propFalse ?? null,
    propTrue: propTrue ?? null,
  };

  const resultValueOption2 = {
    propZero: propZero ?? undefined,
    propNull: propNull ?? undefined,
    propEmptyArray: propEmptyArray ?? undefined,
    propEmptyObject: propEmptyObject ?? undefined,
    propEmptyString: propEmptyString ?? undefined,
    propFalse: propFalse ?? undefined,
    propTrue: propTrue ?? undefined,
  };

  const resultValueOption3 = {
    propZero: propZero || undefined,
    propNull: propNull || undefined,
    propEmptyArray: propEmptyArray || undefined,
    propEmptyObject: propEmptyObject || undefined,
    propEmptyString: propEmptyString || undefined,
    propFalse: propFalse || undefined,
    propTrue: propTrue || undefined,
  };

  const resultValueOption4 = {
    propZero: propZero || null,
    propNull: propNull || null,
    propEmptyArray: propEmptyArray || null,
    propEmptyObject: propEmptyObject || null,
    propEmptyString: propEmptyString || null,
    propFalse: propFalse || null,
    propTrue: propTrue || null,
  };

  return (
    <div>
      <div>Option1</div>
      <div>{JSON.stringify(resultValueOption1)}</div>
      <div>Option2</div>
      <div>{JSON.stringify(resultValueOption2)}</div>
      <div>Option3</div>
      <div>{JSON.stringify(resultValueOption3)}</div>
      <div>Option4</div>
      <div>{JSON.stringify(resultValueOption4)}</div>
    </div>
  );
}

/*
  results:
    Option1
     {"propZero":0,"propNull":null,"propEmptyArray":[],"propEmptyObject":{},"propEmptyString":"","propFalse":false,"propTrue":true}
    Option2
     {"propZero":0,"propEmptyArray":[],"propEmptyObject":{},"propEmptyString":"","propFalse":false,"propTrue":true}
    Option3
     {"propEmptyArray":[],"propEmptyObject":{},"propTrue":true}
    Option4
     {"propZero":null,"propNull":null,"propEmptyArray":[],"propEmptyObject":{},"propEmptyString":null,"propFalse":null,"propTrue":true}
*/

我希望我帮到了你。