javascript - 为什么 JavaScript 对象不会为当前为空的嵌套对象设置值

Question

有没有一种方法可以让对象知道如果某个字段的值为 null 并将其更改为 {}，以便我可以在其中添加数据？

我有一个名为 customer 的变量，类型为 any当服务器提供数据时，该客户的个人资料图片有一个现场对象图像。

图像有一个名为 imageUrl 的字段。

客户:{ 名称:'约翰'， 图片:空， ...

一开始，图片的值为null，上传图片后如果想给客户添加imageUrl，需要做如下操作:

  this.customer.image = {imageUrl: null};
  this.customer.image.imageUrl = imgObj.result.imageUrl;

有没有办法告诉对象自动执行此操作？

如果我这样做:

   this.customer.image.imageUrl = imgObj.result.imageUrl;

在将图像设置为具有所需字段的对象之前，出现错误。对象不应该知道即使图像为 null 如果我给 this.customer.image.imageUrl 一个值，唯一可行的选择是将图像设置为空的 {}，或者是否有其他原因导致这种情况没有发生。

Answer 1

At first, the image has a value of null, and if I want to add imageUrl to the customer after I upload the image, I have to do the following:

this.customer.image = {imageUrl: null};
this.customer.image.imageUrl = imgObj.result.imageUrl;

或者更简洁:

this.customer.image = {imageUrl: imgObj.result.imageUrl};

没有合理的方法¹，当您分配给它的属性时，image 的值自动从 null 更新为空白对象.这不是 JavaScript/TypeScript 所具有的功能(同样，在合理范围内)。

听起来您正在尝试避免在代码中使用 if，例如，避免:

if (!this.customer.image) {
    this.customer.image = {};
}
this.customer.image.imageUrl = imgObj.result.imageUrl;

如果是这样，您可以使用 || 避免它:

this.customer.image = this.customer.image || {};
this.customer.image.imageUrl = imgObj.result.imageUrl;

如果你想变得非常复杂，你可以将它们组合成一个语句，但这只会让阅读、调试和维护变得更加困难:

(this.customer.image = this.customer.image || {}).imageUrl = imgObj.result.imageUrl;

但是请注意，如果 this.customer .image 被声明为需要 imageUrl 属性的类型。如果是这种情况，可能最简洁的方法是 if 语句:

if (this.customer.image) {
    this.customer.image.imageUrl = imgObj.result.imageUrl;
} else {
    this.customer.image = {imageUrl: imgObj.result.imageUrl};
}

或Object.assign:

this.customer.image = Object.assign(
    this.customer.image || {},
    {imageUrl: imgObj.result.imageUrl}
);

...因为 Object.assign 的第一个参数的类型没有 imageUrl 要求。

---

¹ 不合理 的方法是使 this.customer 成为 Proxy 并对 image 属性进行特殊处理: 使用get陷阱，如果是获取image的值，而image的值当前为null ，您可以将其设置为空白对象。 (当然，如果您只是执行 this.customer.image 而没有分配给它的属性，就会发生这种情况。)有很多不这样做的理由，尤其是复杂性。