TypeScript中筛选Person对象指定属性生成新对象的优化方案咨询

方式一：跳过中间对象，直接遍历指定属性渲染 #

没必要先把原对象转成新对象再渲染——直接遍历你定义的hasProperty数组，逐个从原Person对象里取出对应属性值，直接生成div就行。这样省掉了创建中间对象的内存开销，尤其当原对象很大时，性能更优。

举个前端渲染的例子（以React为例）：

{hasProperty.map(key => (
  <div key={key}>
    {key}: {person[key]}
  </div>
))}

如果是原生JS，逻辑类似：

const container = document.getElementById('container');
hasProperty.forEach(key => {
  const div = document.createElement('div');
  div.textContent = `${key}: ${person[key]}`;
  container.appendChild(div);
});

要是想过滤掉原对象里不存在的属性，加个判断就行：

{hasProperty
  .filter(key => key in person)
  .map(key => (
    <div key={key}>
      {key}: {person[key]}
    </div>
  ))
}

方式二：若需复用过滤后的对象，用高效方式生成 #

如果确实需要保留这个过滤后的对象（比如后续要多次使用），可以用Object.fromEntries一行搞定，比手动循环赋值更简洁高效：

const filteredPerson = Object.fromEntries(
  hasProperty
    .filter(key => key in person) // 可选，过滤不存在的属性
    .map(key => [key, person[key]])
);

之后再遍历这个filteredPerson渲染即可，和你原来的思路一致，但生成对象的步骤更高效。

对比原思路的优势 #

• 方式一直接跳过中间对象，减少了一次对象拷贝的性能消耗，对于大型对象来说更友好；
• 方式二生成过滤对象的代码更简洁，利用原生API的性能优化，比手动循环赋值更高效。

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