如何动态地给对象添加属性

很多时候，我们需要根据变量值是否为 null 或 undefined 来对对象进行属性添加，如果值为 undefined 或 null，则不添加该属性。如果直接赋值，就无法满足这个需求，因为 JavaScript 会将 undefined 和 null 视为 false，在条件判断中会将其忽略。

为了解决这个问题，我们可以使用以下方法：

1. 使用三元运算符

   三元运算符可以根据条件表达式返回不同的值。我们可以使用它来根据变量值是否为 null 或 undefined 来添加或不添加属性：

   const obj = {};
   const value = 'foo';
   
   obj[value ? 'propName' : undefined] = value;
   

   如果 value 不为 null 或 undefined，则会添加一个名为 propName 的属性并将其值设置为 value。否则，不会添加该属性。

2. 使用 Object.defineProperty()

   Object.defineProperty() 方法可以动态地添加属性到对象，并指定属性的各种特性。我们可以使用它来根据条件表达式添加或不添加属性：

   const obj = {};
   const value = 'foo';
   
   if (value !== null && value !== undefined) {
     Object.defineProperty(obj, 'propName', {
       value: value,
       enumerable: true,
       writable: true,
       configurable: true,
     });
   }
   

   如果 value 不为 null 或 undefined，则会添加一个名为 propName 的属性并将其值设置为 value。否则，不会添加该属性。

3. 使用代理对象

   代理对象可以在访问或设置属性时拦截操作。我们可以使用代理对象来根据条件表达式动态地添加或不添加属性：

   const obj = new Proxy({}, {
     set: function(target, prop, value) {
       if (value !== null && value !== undefined) {
         target[prop] = value;
       }
       return true;
     }
   });
   
   obj.propName = 'foo';
   

   如果将值分配给代理对象中的属性，并且该值不为 null 或 undefined，则会添加该属性。否则，不会添加该属性。

选择哪种方法取决于具体情况和个人偏好。这些方法都可以在需要根据条件表达式动态地给对象添加属性时提供帮助。