基于对象道具的条件传播

Question

我正在寻找删除空或空道具的方法，在我的示例 obj2 上，我想避免复制birthPlace属性或任何其他空的道具。

const obj1 = { firstName: 'Foo', age: 22 };

const obj2 = { lastName: 'Bar', gender: 'M', birthPlace: '' };

const newObj = { ...obj1, ...obj2 };

想要的结果：

{firstName: 'Foo', age: 22, lastName: 'Bar', gender: 'M'}

是否可以在 javascript 中使用 Spread 运算符来使用条件对象 props？

const updateUserObj = {
  ...(obj1 !== check here<hasPropEmpty> && obj2)
}

Answer 1

它没有简写，但您可以轻松编写一个函数来过滤掉这些属性。

function nonEmptyProps(obj) {
  return Object.fromEntries(Object.entries(obj).filter(([k, v]) => v !== null && v !== ''));
}

const obj1 = { firstName: 'Foo', age: 22 };

const obj2 = { lastName: 'Bar', gender: 'M', birthPlace: '' };

const newObj = {...nonEmptyProps(obj1), ...nonEmptyProps(obj2)};
console.log(newObj);

Answer 2

使用

Object#entries

获取对象的键值对，然后使用

Array#filter

迭代这些对以过滤掉具有空值的键值对。然后，使用

Object#fromEntries

将结果对构造回对象。

const filterProps = (obj = {}) => 
  Object.fromEntries(
    Object.entries(obj).filter(([key, value]) => 
      value !== null && value !== undefined && value !== ''
    )
  );

const obj1 = { firstName: 'Foo', age: 22 };
const obj2 = { lastName: 'Bar', gender: 'M', birthPlace: '' };

const newObj = { ...filterProps(obj1), ...filterProps(obj2) };

console.log(newObj);