如何选择性地初始化对象属性

Question

在 JavaScript 中，有没有办法根据条件来初始化对象的属性？我尚未在这里找到相关信息。

例如：存在一个变量，如果它不是 null 或 undefined，那么在初始化对象时，可以仅用一行代码将其值添加为一个属性。

let optionA = "Some option";

const obj = {
   id: 1,
   name: "Object 1",
   ?optionA, // 若 'optionA' 存在，则添加该属性
}

目前我只知道一种方法：在初始化之后再添加可选属性。

const obj = {
   id: 1,
   name: "Object 1",
}

if (optionA) {
   obj.optionA = optionA;
}
if (optionB) {
   obj.optionA = optionB;
}
if (optionC) {
   obj.optionA = optionC;
}
if (optionD) {
   obj.optionA = optionD;
}

如您所见，在这种情况下，无法使用简洁的一行对象属性简写语法或三元运算符，导致代码变得冗长。

我所找到的所有解决方案中，使用扩展运算符添加属性看起来甚至比 if 语句更糟糕。

我还注意到这个原则在 fetch API 中部分实现：

let optionA;

const req = await fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
    optionA,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then(response => response.json())
  .then(json => console.log(json));

// 输出：{title: 'foo', body: 'bar', userId: 1, id: 101}

这种方法仅适用于 undefined，并且由于请求负载中会移除 optionA 属性，因此日志输出将不包含 optionA 属性。

Prestaul · Answer

您可以根据值（使用 == 与 null 和 undefined 进行比较）扩展一个新的对象或一个空对象。

const
    a = 0,
    b = 1,
    x = undefined,
    y = null;

console.log({
    ...a == null ? {} : { a },
    ...b == null ? {} : { b },
    ...x == null ? {} : { x },
    ...y == null ? {} : { y }
});

jfs · Answer

通过结合对象简写、Object.entries() 和 Array::forEach() 方法，可以得到一个单行代码实现：

const obj = {
   id: 1,
   name: "Object 1",
}

const optionA = null, optionB = 'optionB', optionC = false;
let optionD;

Object.entries({optionA, optionB, optionC, optionD}).forEach(([k, v]) => v && (obj.optionA = v));

console.log(obj);

gen_Eric · Answer

您可以将链接中的逻辑封装到一个 function 中并加以利用。在我看来，这种方式既具有很好的可读性，也清晰地表达了意图。

我不确定您是希望保留属性名称还是仅保留其值，因此我提供了两种变体。

function ifObjHasValue(obj) {
   return Object.values(obj)[0] ? obj : undefined;
}

function ifOptHasValue(option) {
   return option ? { [option]: option } : undefined;
}

示例：

function ifObjHasValue(obj) {
   return Object.values(obj)[0] ? obj : undefined;
}

function ifOptHasValue(option) {
   return option ? { [option]: option } : undefined;
}

let optionA = "", optionB = "Some option", optionC = undefined, optionD = null;

console.log({
  id: 1,
  name: "Object 1",
  ...ifObjHasValue({ optionA }),
  ...ifObjHasValue({ optionB }),
  ...ifObjHasValue({ optionC }),
  ...ifObjHasValue({ optionD })
});

console.log({
  id: 2,
  name: "Object 2",
  ...ifOptHasValue(optionA),
  ...ifOptHasValue(optionB),
  ...ifOptHasValue(optionC),
  ...ifOptHasValue(optionD)
});