如何调整Array.map函数，不返回对象中的undefined属性？

我现在用Array.map来生成包含指定数据的新对象，代码如下：

const bookList = [{ name: "Foo", id: "1234", quantity: 5 }];

function mapBooks(bookList) {
  return {
    eventName: "ping",
    data: {
      list: {
        books: bookList.map(({name, id, quantity }) => ({ name, id, quantity}))
      }
    }
  };
}

mapBooks(bookList);

运行结果正常：

{
  eventName: "ping",
  data: {
      list: {
          books: {
              name: "Foo",
              id: "1234",
              quantity: 5
          }
      }
  }
}

但当原数据缺少某个属性时，结果里会保留值为undefined的属性：

const bookList = [{ name: "Foo", id: "1234" }];

mapBooks(bookList);

得到的结果：

{
  eventName: "ping",
  data: {
      list: {
          books: {
              name: "Foo",
              id: "1234",
              quantity: undefined
          }
      }
  }
}

想要调整map逻辑，让结果里不包含值为undefined的属性，最终得到：

{
  eventName: "ping",
  data: {
      list: {
          books: {
              name: "Foo",
              id: "1234"
              // 不包含quantity属性
          }
      }
  }
}

解决方案 #

方法1：手动条件判断添加属性 #

利用对象扩展语法的特性，只有当属性值不为undefined时才将其加入对象：

function mapBooks(bookList) {
  return {
    eventName: "ping",
    data: {
      list: {
        books: bookList.map(({name, id, quantity }) => ({
          name,
          id,
          // 仅当quantity存在时才添加该属性
          ...(quantity !== undefined && { quantity })
        }))
      }
    }
  };
}

方法2：动态构建过滤后的对象 #

适合需要处理多个属性的场景，先收集键值对再过滤掉undefined值：

function mapBooks(bookList) {
  return {
    eventName: "ping",
    data: {
      list: {
        books: bookList.map(book => {
          const { name, id, quantity } = book;
          // 过滤值为undefined的键值对
          const validEntries = Object.entries({ name, id, quantity }).filter(([_, value]) => value !== undefined);
          // 将键值对数组转回对象
          return Object.fromEntries(validEntries);
        })
      }
    }
  };
}

方法3：封装通用过滤工具函数 #

如果需要在多处复用过滤逻辑，可以封装工具函数：

// 移除对象中所有值为undefined的属性
function removeUndefinedProps(obj) {
  const cleanObj = {};
  for (const key in obj) {
    if (obj[key] !== undefined) {
      cleanObj[key] = obj[key];
    }
  }
  return cleanObj;
}

function mapBooks(bookList) {
  return {
    eventName: "ping",
    data: {
      list: {
        books: bookList.map(({name, id, quantity }) => 
          removeUndefinedProps({ name, id, quantity })
        )
      }
    }
  };
}

内容的提问来源于stack exchange，提问作者user1486133