如何根据字符串数组筛选对象数组中formData的指定键？

我从后端拉取数据到应用中，希望支持用户选择需要查看的键。因此尝试实现一个功能：让用户生成字符串数组，将其与对象数组中的每个对象对比，输出仅包含指定键的新对象数组。

筛选数组示例：

const filterData = 
[
'TestOne',
'TestTwo',
]

对象数组示例：

const data = [
  {
    _id: "62ec2f1084c7f48175a9cb4a",
    Date: "2022-08-04T15:41:37.567Z",
    facilityId: "62e5a9fd45f2646fc7361fa3",
    userId: "62e16d390f4685e4fdb6a288",
    formData: {
      Date: "2022-08-04T15:41:37.567Z",
      TestOne: 60002,
      TestTwo: 19998,
      TestThree: 102,
      TestFour: "True"
    },
  },
  {
    _id: "62ec2f1c84c7f48175a9cb58",
    Date: "2022-08-04T15:41:52.932Z",
    facilityId: "62e5a9fd45f2646fc7361fa3",
    userId: "62e16d390f4685e4fdb6a288",
    formData: {
      Date: "2022-08-04T15:41:52.932Z",
      TestOne: 60003,
      TestTwo: 19997,
      TestThree: 103,
      TestFour: "True"
    },
  },
]

我需要编写一个函数，处理data中的formData，过滤掉不在filterData中的键，但始终无法实现。以下是我尝试的代码，但执行时报错Uncaught TypeError: Cannot delete property 'TestThree' of #<Object>，复制数据后也无法解决，请求帮助：

const formObject = 
  datas.length > 0 &&
  datas.map((data, i) => {
    const filterData = ['TestOne', 'TestTwo']
    filterData.map((filter) => {
      delete data.formData[filter]
    })
  })

你的代码有三个核心问题：

• 逻辑完全搞反：现在是删除需要保留的键，而不是删除不需要的键
• 直接修改原数据：后端返回的对象可能被冻结，导致无法删除属性，这就是报错的原因
• map函数无返回值：最终得到的formObject是全为undefined的数组

正确的做法是创建新对象，不修改原数据，只保留指定键：

基础实现方式 #

const filterData = ['TestOne', 'TestTwo'];

const filteredData = data.map(item => {
  const filteredFormData = {};
  // 遍历需要保留的键，构建新的formData
  filterData.forEach(key => {
    if (item.formData[key] !== undefined) {
      filteredFormData[key] = item.formData[key];
    }
  });
  // 返回新对象，保留原item的其他属性，替换formData
  return {
    ...item,
    formData: filteredFormData
  };
});

简洁实现方式（使用Object.fromEntries） #

const filterData = ['TestOne', 'TestTwo'];

const filteredData = data.map(item => ({
  ...item,
  formData: Object.fromEntries(
    filterData
      .map(key => [key, item.formData[key]])
      .filter(([_, value]) => value !== undefined) // 过滤掉不存在的键
  )
}));

这样做既避免了修改原数据导致的冻结报错，又精准保留了需要的键，同时map函数返回正确的新对象数组。

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