使用原生javascript的map方法是提取对象数组属性最推荐的方式，它通过遍历数组并对每个元素执行回调函数来生成新数组，代码简洁且符合函数式编程理念；2. lodash库的_.map方法也可实现该功能，尤其在已使用lodash的项目中可提升可读性和链式调用便利性，但需注意_.pluck已被弃用；3. 应避免使用foreach或for…of循环手动构建数组，因其可读性较差且易引入副作用；4. 在大型项目中应优先考虑代码可读性与维护性，原生map通常性能足够且无额外依赖，仅在特定性能瓶颈或项目规范要求下才选择其他方案；5. 提取属性时需处理属性可能不存在的情况，可结合filter或空值合并运算符提供默认值以增强健壮性；因此，使用原生map方法结合错误处理机制是从对象数组提取属性的最佳实践。
在JavaScript中，如果你想从一个对象数组中提取特定属性，虽然原生JS并没有一个叫做
pluck
的方法，但最直接、最常用的方式是使用数组的
map
方法。它能让你遍历数组中的每个对象，并返回一个只包含你所需属性的新数组。如果你习惯使用工具库，Lodash这样的库也提供了类似的功能，通常也是通过其强大的
map
方法来实现。
解决方案
要从对象数组中提取某个属性，我们主要有两种思路：使用原生JavaScript的
map
方法，或者借助第三方库如Lodash。
1. 使用原生JavaScript的
map
方法
这是最推荐且最符合现代JS编程习惯的方式。
map
方法会遍历数组的每个元素，并对每个元素执行一个回调函数，然后将回调函数的返回值组成一个新的数组。
const users = [ { id: 1, name: 'Alice', age: 30 }, { id: 2, name: 'Bob', age: 24 }, { id: 3, name: 'Charlie', age: 35 }];// 提取所有用户的名字const names = users.map(user => user.name);console.log(names); // 输出: ['Alice', 'Bob', 'Charlie']// 提取所有用户的IDconst ids = users.map(user => user.id);console.log(ids); // 输出: [1, 2, 3]// 提取并转换属性（例如，只提取名字并加上前缀）const formattedNames = users.map(user => `姓名: ${user.name}`);console.log(formattedNames); // 输出: ['姓名: Alice', '姓名: Bob', '姓名: Charlie']
这种方式简洁、易读，并且是不可变的（不会修改原始数组），非常符合函数式编程的理念。
2. 使用Lodash库（
_.map
或
_.pluck
）
Lodash是一个非常流行的JavaScript实用工具库，它提供了大量方便的方法来处理数组、对象等。
_.map
： Lodash的
_.map
方法功能非常强大，它也支持直接传入属性名作为第二个参数，来达到
pluck
的效果。
// 假设你已经引入了Lodash，例如通过 或 import _ from 'lodash';const users = [ { id: 1, name: 'Alice', age: 30 }, { id: 2, name: 'Bob', age: 24 }, { id: 3, name: 'Charlie', age: 35 }];const namesLodash = _.map(users, 'name');console.log(namesLodash); // 输出: ['Alice', 'Bob', 'Charlie']const agesLodash = _.map(users, 'age');console.log(agesLodash); // 输出: [30, 24, 35]
_.pluck
： 值得一提的是，Lodash在较早的版本中（如v3.x）确实有一个名为
_.pluck
的方法，它的作用就是专门用来提取对象数组的某个属性。然而，在Lodash v4.x中，
_.pluck
已经被弃用，并推荐使用更通用的
_.map
来替代。所以，如果你使用的是新版本的Lodash，应该使用
_.map
。
// 如果你碰巧在使用旧版Lodash，它可能长这样：// const namesOldLodash = _.pluck(users, 'name');// 但现在，请使用 _.map(users, 'name');
在选择时，我个人更倾向于原生
map
。它不引入额外依赖，学习成本低，而且现代JS引擎对原生方法的优化通常非常好。当然，如果你的项目已经广泛使用了Lodash，那么用
_.map
也完全没问题，它在可读性上确实不错。
为什么JavaScript原生没有
pluck
pluck
这样的方法？
这问题问得挺有意思，我刚接触JS的时候也好奇过。为什么像Python有列表推导，或者Ruby有
pluck
（或者
map
的别名）这种直接的语法，而JS就得用
map
这种回调函数的形式呢？
其实，这和JavaScript的设计哲学有关。JS的设计者更倾向于提供一套基础且灵活的“工具箱”，而不是为每一种常见操作都提供一个专门的、高度特化的方法。
map
就是一个非常强大的通用工具，它不仅仅能用来“摘取”属性，还能进行各种数据转换。
你可以把
map
想象成一个管道，你把数组中的每个元素扔进去，它经过你定义的“加工厂”（回调函数），然后把加工后的新产品（返回值）吐出来，最终形成一个新的产品线（新数组）。而“摘取属性”只是这个加工厂里最简单的一种操作。
如果JS内置了
pluck
，那可能还会有人问，为什么没有
filterBy
、
sumOf
等等。这样下去，核心库会变得非常臃肿。相反，JS提供了
map
、
filter
、
reduce
这些高阶函数，它们是更通用的抽象，可以组合出几乎所有你想要的数据处理逻辑。第三方库，比如Lodash，就是在这些通用能力之上，封装了更多便捷的、特定场景的方法，来提高开发效率。这就像是，JS给你了一套乐高积木，你可以自己拼出任何形状，而Lodash则提供了一些预先拼好的、更复杂的模型，方便你直接使用。
除了
map
map
，还有哪些原生方法可以实现类似功能，或者我应该避免什么？
除了
map
，原生JavaScript中确实还有其他方法可以实现类似提取属性的功能，但它们通常不是最优解，或者说在表达意图上不如
map
清晰。
1. 使用
forEach
循环配合新数组
这种方式也很常见，尤其是在早期JS代码中。你需要先创建一个空数组，然后用
forEach
遍历原始数组，将每个元素的特定属性
push
到新数组中。
const users = [ { id: 1, name: 'Alice', age: 30 }, { id: 2, name: 'Bob', age: 24 }];const namesForEach = [];users.forEach(user => { namesForEach.push(user.name);});console.log(namesForEach); // 输出: ['Alice', 'Bob']
为什么通常不推荐它来替代
map
？
forEach
的主要作用是遍历并执行副作用（比如打印日志、修改外部变量），它不返回新的数组。如果你需要一个新数组，用
forEach
意味着你得手动管理新数组的创建和填充，这不仅代码量更多，而且可读性相对下降。
map
的意图非常明确：转换数组并返回一个新数组，这让代码更具声明性。
2. 使用
for...of
循环
for...of
是ES6引入的迭代方式，它也是一个非常直观的循环。
const users = [ { id: 1, name: 'Alice', age: 30 }, { id: 2, name: 'Bob', age: 24 }];const namesForOf = [];for (const user of users) { namesForOf.push(user.name);}console.log(namesForOf); // 输出: ['Alice', 'Bob']
和
forEach
类似，
for...of
也需要手动创建和填充新数组。虽然它比传统的
for
循环更简洁，但在这种“转换并返回新数组”的场景下，
map
依然是更优雅、更函数式的选择。
你应该避免什么？
不必要的副作用： 在使用
map
、
filter
、
reduce
这类函数式方法时，尽量让你的回调函数是“纯”的，即不修改外部状态，也不修改原始数组。
map
的返回值就是一个新数组，这本身就符合不变性原则，让你的数据流更清晰。过度优化： 除非你真的遇到了性能瓶颈（这通常需要通过性能分析工具来确认），否则不要为了微小的性能提升而牺牲代码的可读性和简洁性。对于大多数前端应用来说，
map
和手动循环的性能差异几乎可以忽略不计。我见过不少人，为了那么一点点理论上的速度，把简单的
map
硬是写成了复杂的
for
循环，结果代码维护起来特别痛苦。混淆方法意图：
map
就是用来转换数组元素的，
filter
是用来筛选元素的，
reduce
是用来将数组归结为单个值的。选择正确的方法，能让你的代码意图一目了然。如果你用
reduce
去实现一个简单的
map
功能，虽然能做到，但可能会让其他开发者感到困惑。
在大型项目或性能敏感场景下，选择
pluck
pluck
方法的考量？
在大型项目或对性能有较高要求的场景下，选择提取属性的方法确实需要一些考量，但这通常不是关于“哪个方法更快”，而是关于“哪种方案更健壮、可维护且符合项目规范”。
1. 性能差异：微乎其微
首先要明确一点：对于大多数JavaScript应用，无论是使用原生
map
、
for...of
循环，还是Lodash的
_.map
来提取属性，它们之间的性能差异通常是微不足道的。现代JavaScript引擎（如V8）对原生数组方法的优化非常到位，它们的执行效率通常很高。
只有在处理非常庞大的数据集（例如，数十万甚至数百万个对象），并且这个操作是你的应用中的核心瓶颈时，才值得进行深入的性能分析和优化。否则，过早的优化（Premature Optimization）只会增加代码的复杂性，而不会带来实际收益。我个人经验是，大部分时候，网络请求、DOM操作或者复杂的计算逻辑才是真正的性能瓶颈，而不是简单的数组遍历。
2. 可读性与维护性：优先考虑
在大型项目中，代码的可读性和可维护性往往比微小的性能差异更重要。
原生
map
： 它的优势在于无需引入额外依赖，是ECMAScript标准的一部分，所有JS开发者都熟悉。代码简洁明了，意图清晰。在团队协作中，这种通用性意味着更低的沟通成本。Lodash
_.map
： 如果你的项目已经广泛使用了Lodash，那么继续使用
_.map
来提取属性是自然的选择。它保持了代码风格的一致性，并且Lodash提供了许多其他高级的集合操作，可以方便地链式调用。但如果你只是为了一个简单的
pluck
功能而引入整个Lodash库，那可能有点大材小用，会增加项目打包体积。手动循环（
for...of
或
forEach
）： 虽然能实现功能，但在意图表达上不如
map
直接。当代码变得复杂时，手动循环更容易引入错误（比如索引错误、边界条件问题），而且它们不如
map
那样具有函数式编程的优雅。
3. 依赖管理与打包体积
引入第三方库（如Lodash）会增加项目的依赖，并可能增大最终的打包文件体积。对于追求极致性能和轻量化的前端项目，这可能是需要权衡的因素。当然，现在有
lodash-es
这样的模块化版本，可以按需引入，减少打包体积。
4. 错误处理与健壮性
在提取属性时，还需要考虑属性可能不存在的情况。
const users = [ { id: 1, name: 'Alice' }, { id: 2, age: 24 } // 这个对象没有name属性];const names = users.map(user => user.name);console.log(names); // 输出: ['Alice', undefined]
如果
name
属性可能不存在，并且你希望得到一个更“干净”的结果（例如，只包含有
name
的项，或者提供默认值），你可能需要结合
filter
或使用空值合并运算符（
??
）/逻辑或运算符（
||
）。
// 提取存在的名字const validNames = users.map(user => user.name).filter(name => name !== undefined);console.log(validNames); // 输出: ['Alice']// 提取名字，如果不存在则给个默认值const namesWithDefault = users.map(user => user.name ?? '未知');console.log(namesWithDefault); // 输出: ['Alice', '未知']
总结来说，在绝大多数情况下，使用原生JavaScript的
map
方法是提取对象数组属性的最佳选择，因为它兼顾了性能、可读性、维护性，并且没有额外的依赖。只有在你的项目已经深度依赖Lodash，或者有非常特殊的性能瓶颈时，才需要考虑其他方案。我的建议是，先用最清晰、最直接的方式解决问题，如果未来真的出现了性能问题，再回过头来优化也不迟。
以上就是js 如何用pluck提取对象数组的某个属性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517115.html
微信扫一扫 
支付宝扫一扫 
