本文详细介绍了在JavaScript中，如何利用`Object.entries()`、`Array.prototype.filter()`和`Object.fromEntries()`这三个现代JavaScript特性，从一个现有对象中高效且优雅地提取出指定的一组属性，生成一个新的对象。文章涵盖了从准备待提取属性列表到最终生成目标对象的完整流程，并提供了清晰的代码示例及使用注意事项。
在JavaScript开发中，我们经常需要从一个包含多个属性的对象中，只挑选出其中一部分属性来创建一个新的对象。这种场景在处理API响应、配置对象或数据转换时尤为常见。本文将介绍一种简洁且符合现代JavaScript风格的方法来实现这一目标。
核心原理
实现对象属性提取的关键在于以下三个JavaScript内置方法的组合使用：
Object.entries(): 该方法返回一个给定对象自身可枚举字符串键属性的[key, value]对数组。这使得我们可以将对象转换为一个可迭代的数组，方便进行后续的操作。Array.prototype.filter(): 作为一个数组方法，它会创建一个新数组，其中包含所有通过所提供函数实现的测试的元素。我们将利用它来筛选出我们需要的键值对。Object.fromEntries(): 作为Object.entries()的逆操作，它将一个[key, value]对的列表转换为一个新对象。
通过这三个方法的协同工作，我们可以将对象的属性列表化，筛选出目标属性，然后再重新组装成一个新的对象。
立即学习“Java免费学习笔记（深入）”；
实践步骤
假设我们有一个源对象 someObject，以及一个包含我们希望提取的属性名的列表 propertiesToExtract。
1. 准备待提取的属性列表
首先，我们需要确保待提取的属性列表是一个数组。如果它最初是一个以逗号分隔的字符串，我们需要将其转换为数组。
const someObject = { number: '1', month: 'march', year: '2023', day: '15' };// 情况一：属性列表已经是数组const propertiesToExtractArray = ['month', 'year'];// 情况二：属性列表是字符串，需要转换为数组const propertiesToExtractString = 'month, year';const propertiesToExtractFromString = propertiesToExtractString.split(', ');console.log(propertiesToExtractFromString); // 输出: ['month', 'year']
在实际应用中，通常会统一将输入处理为数组形式，以确保后续逻辑的一致性。
2. 将对象转换为键值对数组
使用 Object.entries() 方法将源对象转换为一个包含所有键值对的数组。
const entries = Object.entries(someObject);console.log(entries);// 输出: [// ['number', '1'],// ['month', 'march'],// ['year', '2023'],// ['day', '15']// ]
3. 过滤出需要的键值对
接下来，使用 filter() 方法遍历 entries 数组，只保留那些键名存在于 propertiesToExtract 列表中的键值对。
const filteredEntries = entries.filter(([key, value]) => propertiesToExtractArray.includes(key));console.log(filteredEntries);// 输出: [// ['month', 'march'],// ['year', '2023']// ]
这里，([key, value]) 是数组解构赋值，方便我们直接访问当前迭代的键和值。propertiesToExtractArray.includes(key) 则判断当前键是否在我们预期的列表中。
4. 将过滤后的键值对转换回新对象
最后，使用 Object.fromEntries() 方法将过滤后的键值对数组转换回一个新的对象。
const finalObject = Object.fromEntries(filteredEntries);console.log(finalObject); // 输出: { month: 'march', year: '2023' }
完整代码示例
将上述步骤整合在一起，我们可以得到一个简洁高效的解决方案：
/** * 从源对象中提取指定属性，生成一个新对象。 * @param {object} sourceObject - 源对象。 * @param {string[]|string} propertiesToExtract - 待提取的属性名列表，可以是数组或逗号分隔的字符串。 * @returns {object} 包含指定属性的新对象。 */function extractProperties(sourceObject, propertiesToExtract) { let keysToExtract; // 确保待提取属性列表是数组 if (typeof propertiesToExtract === 'string') { keysToExtract = propertiesToExtract.split(', ').map(key => key.trim()); } else if (Array.isArray(propertiesToExtract)) { keysToExtract = propertiesToExtract; } else { console.warn("propertiesToExtract 参数类型不正确，应为字符串或数组。"); return {}; } // 使用 Object.entries, filter 和 Object.fromEntries 组合操作 const finalObject = Object.fromEntries( Object.entries(sourceObject).filter(([key, value]) => keysToExtract.includes(key) ) ); return finalObject;}// 示例用法const someObject = { number: '1', month: 'march', year: '2023', day: '15' };// 提取 'month' 和 'year'const result1 = extractProperties(someObject, ['month', 'year']);console.log('提取数组属性:', result1); // 输出: { month: 'march', year: '2023' }// 提取 'number' 和 'day' (使用字符串形式)const result2 = extractProperties(someObject, 'number, day');console.log('提取字符串属性:', result2); // 输出: { number: '1', day: '15' }// 提取不存在的属性const result3 = extractProperties(someObject, ['foo', 'bar']);console.log('提取不存在属性:', result3); // 输出: {}// 提取所有属性 (通过将所有key都包含在列表中实现)const allKeys = Object.keys(someObject);const result4 = extractProperties(someObject, allKeys);console.log('提取所有属性:', result4); // 输出: { number: '1', month: 'march', year: '2023', day: '15' }
注意事项
不可变性（Immutability）: 此方法会创建一个全新的对象，原始的 someObject 不会被修改。这符合函数式编程的原则，有助于避免副作用，使代码更易于理解和维护。性能: 对于大多数常见的对象大小，这种方法的性能是完全可以接受的。它避免了手动循环和条件判断的繁琐，代码更加简洁。对于极其庞大（例如数十万个属性）的对象，可能需要考虑其他优化策略，但这种情况在前端开发中相对罕见。兼容性: Object.entries() 和 Object.fromEntries() 是ES2017（ES8）引入的特性。在现代浏览器和Node.js环境中都得到了良好支持。如果需要支持老旧的浏览器环境（如IE），则可能需要通过Babel等工具进行转译（polyfill）。属性类型: 这种方法适用于提取对象自身可枚举的字符串键属性。对于Symbol键属性或原型链上的属性，需要采用其他遍历方式。
总结
利用 Object.entries()、Array.prototype.filter() 和 Object.fromEntries() 的组合，我们可以在JavaScript中以一种声明式、高效且易读的方式从对象中提取指定属性。这种模式是现代JavaScript开发中处理对象属性的推荐实践，它不仅提升了代码的简洁性，也遵循了不可变性原则，使得数据操作更加安全可靠。掌握这一技巧，将有助于你编写出更健壮、更优雅的JavaScript代码。
以上就是JavaScript中如何高效提取对象指定属性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539367.html
微信扫一扫 
支付宝扫一扫 
