javascript 如何可选地初始化对象属性[重复]

bfrts1fy 于 2024-01-05 发布在 Java

关注(0)|答案(4)|浏览(118)

此问题在此处已有答案：

In JavaScript, how to conditionally add a member to an object?（25个回答）
Succinct/concise syntax for 'optional' object keys in ES6/ES7? [duplicate]（4个答案）
6小时前关闭
在JS中有没有什么方法可以有条件地初始化一个对象的属性？我想知道关于这个的任何信息。
范例：有一个变量，如果它不是null或undefined，那么当初始化对象时，你可以添加一个属性，其值在一行中。

let optionA = "Some option";

const obj = {
   id: 1,
   name: "Object 1",
   ?optionA, // if 'optionA' then add property
}

字符串
我只知道一种方法：只在初始化后添加可选属性。

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;
}

型
正如您可能已经注意到的，在这种情况下，不可能使用方便的单行对象属性简写或三元运算符，代码变得臃肿。
我只能找到adding a property with the spread operator，但这看起来比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属性的响应，因为它将从请求有效负载的主体中删除。

JavaScript

来源：https://stackoverflow.com/questions/77758238/how-to-optionally-initialize-object-property

4条答案

按热度按时间

z6psavjg1#

你可以扩展一个新的对象或一个空的对象，这取决于值（==和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 }
});

字符串

赞(0）回复(0）举报 2024-01-05

uinbv5nw2#

你可以将link的逻辑 Package 在function中并使用它。对我来说，这看起来很可读，也清楚地显示了意图。
我不能100%确定你是想保留属性的名称，还是只保留它们的值，所以我提出了两个变体。

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)
});

型

赞(0）回复(0）举报 2024-01-05

ep6jt1vc3#

使用对象快捷方式加上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);

字符串

赞(0）回复(0）举报 2024-01-05

7cwmlq894#

当初始化一个对象时，你可以使用一个getter来设置一个属性为特定的值。然而，这将总是创建一个属性，即使它为null。
IMO这应该不重要，因为你可以检查 prop ，而不是检查 prop 是否存在。
或许我不知道为什么。

// TEST CASE 1

let optionA = 'a'

const obj = {
   id: 1,
   name: "Object 1",
   get optionA() {
   return optionA ?? optionB ?? optionC ?? optionD ?? null
   }
}

console.log(obj)

// TEST CASE 2

optionA = null
let optionB = 'b'

const obj2 = {
   id: 1,
   name: "Object 2",
   get optionA() {
   return optionA ?? optionB ?? optionC ?? optionD ?? null
   }
}

console.log(obj2)

// TEST CASE 3

optionA = null
optionB = null
optionC = null
optionD = null

const obj3 = {
   id: 1,
   name: "Object 3",
   get optionA() {
   return optionA ?? optionB ?? optionC ?? optionD ?? null
   }
}

console.log(obj3)

字符串

赞(0）回复(0）举报 2024-01-05

我来回答

javascript 如何可选地初始化对象属性[重复]

4条答案

相关问题

热门标签

最新问答