JavaScript对象属性精确提取教程-js教程-PHP中文网

JavaScript对象属性精确提取教程

心靈之曲

发布： 2025-11-30 14:46:21

原创

287人浏览过

JavaScript对象属性精确提取教程

本教程将详细介绍如何在javascript中从一个对象中精确提取出指定的属性，并生成一个新的对象。我们将利用`object.entries`、`filter`和`object.fromentries`这三个核心方法，并探讨如何处理以数组或字符串形式提供的待提取属性列表，从而高效、灵活地实现对象属性的筛选与重构。

在JavaScript开发中，我们经常需要从一个现有对象中选择性地提取部分属性，并将其组合成一个新的对象，而不是直接修改原始对象。这种操作在数据处理、API响应整形或组件状态管理等场景中尤为常见。本教程将指导您如何使用现代JavaScript的内置方法优雅地实现这一目标。

核心方法解析

实现对象属性精确提取的关键在于Object.entries()、Array.prototype.filter() 和 Object.fromEntries() 这三个方法的协同工作。

Object.entries() 此方法用于将一个对象转换为一个由其自身可枚举字符串键属性的 [key, value] 对组成的数组。这是我们开始筛选的基础，因为它将对象的扁平结构转换为可迭代的数组结构。
```
const someObject = { number: '1', month: 'march', year: '2023' };
console.log(Object.entries(someObject));
// 输出: [ ['number', '1'], ['month', 'march'], ['year', '2023'] ]
```
登录后复制
Array.prototype.filter()filter() 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。在这个场景中，我们将使用它来遍历 Object.entries() 返回的 [key, value] 对数组，并根据键名是否在我们指定的提取列表中来决定是否保留该对。
```
const data = [['a', 1], ['b', 2], ['c', 3]];
const filteredData = data.filter(([key, value]) => key === 'a' || key === 'c');
console.log(filteredData);
// 输出: [ ['a', 1], ['c', 3] ]
```
登录后复制
Object.fromEntries() 此方法是 Object.entries() 的逆操作。它接收一个由 [key, value] 对组成的数组，并将其转换回一个新的对象。这是我们将筛选后的属性对重新组合成目标对象的最后一步。
```
const filteredEntries = [['month', 'march'], ['year', '2023']];
console.log(Object.fromEntries(filteredEntries));
// 输出: { month: 'march', year: '2023' }
```
登录后复制

实现对象属性精确提取

现在，我们将上述三个方法结合起来，实现从源对象中提取指定属性的功能。

立即学习“Java免费学习笔记（深入）”；

场景一：待提取属性列表为数组

DELPHI控件属性、方法、事件及常用函数 word文档 doc格式

DELPHI控件属性、方法、事件及常用函数一． TmainMemu控件该控件是一个标准的菜单控件，运用它为窗口提供菜单。该对象的层次结构为：TObject—TPersistent--TCompoment—TMenu。属性 1-AutoMetge：Boolean 功能：用于确定非MID程序中非主Form上的菜单要不要和主Form的菜单合并。主Form菜单AutoMerge的特性总是False。此外，还要设置菜单项的GroupIndex属性。 2-BiDiMode

查看详情

假设我们有一个源对象 someObject 和一个包含要提取属性名称的数组 propertiesToExtract。

const someObject = { number: '1', month: 'march', year: '2023' };
const propertiesToExtract = ['month', 'year'];

// 1. 将对象转换为 [key, value] 对数组
const entries = Object.entries(someObject);

// 2. 过滤出我们需要的属性对
const filteredEntries = entries.filter(([key, value]) =>
  propertiesToExtract.includes(key)
);

// 3. 将过滤后的属性对转换回新对象
const finalObject = Object.fromEntries(filteredEntries);

console.log(finalObject);
// 预期输出: { month: 'march', year: '2023' }

登录后复制

您可以将上述步骤合并为一行简洁的代码：

const someObject = { number: '1', month: 'march', year: '2023' };
const propertiesToExtract = ['month', 'year'];

const finalObject = Object.fromEntries(
  Object.entries(someObject).filter(([key, value]) =>
    propertiesToExtract.includes(key)
  )
);

console.log(finalObject);
// 预期输出: { month: 'march', year: '2023' }

登录后复制

场景二：待提取属性列表为逗号分隔的字符串

如果待提取的属性列表是以逗号分隔的字符串形式提供，我们需要先将其转换为一个数组。这可以通过 String.prototype.split() 方法轻松实现。

const someObject = { number: '1', month: 'march', year: '2023' };
const propertiesAsString = 'month, year';

// 将字符串转换为数组，并去除可能存在的空格
const propertiesToExtract = propertiesAsString
  .split(',')
  .map((prop) => prop.trim());

const finalObject = Object.fromEntries(
  Object.entries(someObject).filter(([key, value]) =>
    propertiesToExtract.includes(key)
  )
);

console.log(finalObject);
// 预期输出: { month: 'march', year: '2023' }

登录后复制

注意事项

不可变性 (Immutability)：上述方法会创建一个全新的对象 finalObject，而不会修改原始的 someObject。这符合函数式编程的原则，有助于避免副作用，使代码更易于理解和维护。
性能考量：对于包含大量属性（例如数万个）的巨大对象，这种方法会涉及对象的遍历、数组的创建和过滤，可能会有轻微的性能开销。但在大多数常规应用场景中，这种开销可以忽略不计。
属性存在性：如果 propertiesToExtract 数组中包含源对象中不存在的属性，filter 方法会自动忽略这些不存在的键，不会导致错误，也不会在 finalObject 中创建这些属性。
键的类型：Object.entries() 和 Object.fromEntries() 主要处理字符串键。如果您的对象包含 Symbol 类型的键，它们将不会被 Object.entries() 捕获。

总结

通过结合使用 Object.entries()、Array.prototype.filter() 和 Object.fromEntries()，我们能够以一种声明式、高效且不可变的方式，从JavaScript对象中精确提取出所需的属性。这种模式不仅强大灵活，而且代码简洁易读，是处理对象属性筛选和重构的推荐方法。无论是处理简单的数组列表还是需要预处理的字符串列表，这种技术都能提供一个优雅的解决方案。

以上就是JavaScript对象属性精确提取教程的详细内容，更多请关注php中文网其它相关文章！