js 如何用pluck提取对象数组的某个属性

使用原生javascript的map方法是提取对象数组属性最推荐的方式，它通过遍历数组并对每个元素执行回调函数来生成新数组，代码简洁且符合函数式编程理念；2. lodash库的_.map方法也可实现该功能，尤其在已使用lodash的项目中可提升可读性和链式调用便利性，但需注意_.pluck已被弃用；3. 应避免使用foreach或for...of循环手动构建数组，因其可读性较差且易引入副作用；4. 在大型项目中应优先考虑代码可读性与维护性，原生map通常性能足够且无额外依赖，仅在特定性能瓶颈或项目规范要求下才选择其他方案；5. 提取属性时需处理属性可能不存在的情况，可结合filter或空值合并运算符提供默认值以增强健壮性；因此，使用原生map方法结合错误处理机制是从对象数组提取属性的最佳实践。

在JavaScript中，如果你想从一个对象数组中提取特定属性，虽然原生JS并没有一个叫做

pluck

map

map

解决方案

要从对象数组中提取某个属性，我们主要有两种思路：使用原生JavaScript的

map

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']

// 提取所有用户的ID
const 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，例如通过 <script src="lodash.min.js"></script> 或 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

_.map

为什么JavaScript原生没有

pluck

登录后复制

这样的方法？

这问题问得挺有意思，我刚接触JS的时候也好奇过。为什么像Python有列表推导，或者Ruby有

pluck

map

map

其实，这和JavaScript的设计哲学有关。JS的设计者更倾向于提供一套基础且灵活的“工具箱”，而不是为每一种常见操作都提供一个专门的、高度特化的方法。

map

你可以把

map

如果JS内置了

pluck

filterBy

sumOf

map

filter

reduce

除了

map

登录后复制

，还有哪些原生方法可以实现类似功能，或者我应该避免什么？

除了

map

map

1. 使用

forEach

这种方式也很常见，尤其是在早期JS代码中。你需要先创建一个空数组，然后用

forEach

push

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

25

查看详情

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

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

登录后复制

方法的考量？

在大型项目或对性能有较高要求的场景下，选择提取属性的方法确实需要一些考量，但这通常不是关于“哪个方法更快”，而是关于“哪种方案更健壮、可维护且符合项目规范”。

1. 性能差异：微乎其微

首先要明确一点：对于大多数JavaScript应用，无论是使用原生

map

for...of

_.map

只有在处理非常庞大的数据集（例如，数十万甚至数百万个对象），并且这个操作是你的应用中的核心瓶颈时，才值得进行深入的性能分析和优化。否则，过早的优化（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

以上就是js 如何用pluck提取对象数组的某个属性的详细内容，更多请关注php中文网其它相关文章！