如何通过指定键数组过滤JavaScript对象生成目标新对象？

当然有啦！你可以通过多种简洁的方式实现这个需求，下面是几个常用且实用的方案：

方法1：使用Array.reduce()（灵活且兼容性好） #

reduce方法非常适合这种逐步构建新对象的场景，还能方便地添加额外的校验逻辑：

const originalObj = {
  apple: { color: 'red' },
  orange: { color: 'orange' },
  mango: { color: 'yellow' },
  jackfruit: { color: 'green' }
};
const keepKeys = ['mango', 'apple'];

const filteredObj = keepKeys.reduce((accumulator, key) => {
  // 可选：检查原对象是否真正拥有该键，避免意外引入undefined
  if (originalObj.hasOwnProperty(key)) {
    accumulator[key] = originalObj[key];
  }
  return accumulator;
}, {});

console.log(filteredObj);
// 输出结果：{ mango: { color: 'yellow' }, apple: { color: 'red' } }

方法2：使用Object.fromEntries() + Array.filter()（简洁现代） #

如果你使用的是ES2019及以上的环境，这个组合会让代码非常简洁：

const originalObj = {
  apple: { color: 'red' },
  orange: { color: 'orange' },
  mango: { color: 'yellow' },
  jackfruit: { color: 'green' }
};
const keepKeys = ['mango', 'apple'];

const filteredObj = Object.fromEntries(
  // 先把对象转成键值对数组，再筛选出目标键的项，最后转回对象
  Object.entries(originalObj).filter(([key]) => keepKeys.includes(key))
);

console.log(filteredObj);
// 输出结果和上面一致

方法3：手动遍历（适合理解基础逻辑） #

如果你想更直观地控制整个过程，手动遍历目标键数组也是个不错的选择：

const originalObj = {
  apple: { color: 'red' },
  orange: { color: 'orange' },
  mango: { color: 'yellow' },
  jackfruit: { color: 'green' }
};
const keepKeys = ['mango', 'apple'];

const filteredObj = {};
for (const key of keepKeys) {
  // 检查原对象是否存在该键，避免无效赋值
  if (originalObj[key]) {
    filteredObj[key] = originalObj[key];
  }
}

console.log(filteredObj);

小提示 #

• 如果你的目标键数组里可能存在原对象没有的键，记得加上hasOwnProperty或者存在性检查，避免新对象里出现undefined的键值对。
• 上面的方法都会保留目标键在数组里的顺序，和你预期的结果一致。

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