本文介绍在 JavaScript 中高效、简洁地从对象中按指定顺序提取多个属性值并组成数组的几种实用方案,包括基于 rest 参数和正则解析的工具函数,并对比性能与可读性。
本文介绍在 JavaScript 中高效、简洁地从对象中按指定顺序提取多个属性值并组成数组的几种实用方案,包括基于 rest 参数和正则解析的工具函数,并对比性能与可读性。
在日常开发中,我们常需从一个结构较复杂的对象中,按特定顺序提取若干字段的值并构造成数组(例如用于表格行渲染、CSV 导出、参数批量传递等场景)。虽然可通过解构赋值 + 手动排列、点号链式取值或 map 配合键名数组实现,但这些方式或冗长、或缺乏表达力。相比 Perl 中简洁的 @obj{('foo','bar','baz')} 语法,JavaScript 原生并未提供类似“键选择器数组索引对象”的快捷操作。不过,我们可以通过轻量级工具函数模拟这一语义,兼顾可读性、灵活性与性能。
const obj2arr = (obj, ...keys) => keys.map(key => obj[key]);// 使用示例const obj = { foo: 1, bar: 3, baz: 2, other: 666, keys: "here" };const result = obj2arr(obj, 'foo', 'bar', 'baz'); // [1, 3, 2]console.log(result); // [1, 3, 2]
✅ 优势:
⚠️ 注意:若传入不存在的 key,对应位置将得到 undefined。如需严格校验,可增强为:
const obj2arrStrict = (obj, ...keys) => keys.map(key => { if (!(key in obj)) throw new Error(`Key "${key}" not found in object`); return obj[key]; });
const obj2arr = (obj, keysStr) => keysStr.match(/S+/g)?.map(key => obj[key]) || [];// 使用示例const result = obj2arr(obj, 'foo bar baz'); // [1, 3, 2]
✅ 适用场景:键名来自用户输入、配置文件或模板字符串(如 'id name email'),避免手动加引号与逗号。
⚠️ 注意:正则匹配性能较低(见基准数据),且无法静态类型检查;建议仅在键名动态生成且性能不敏感时使用。
若仅偶发使用,也可直接内联(牺牲复用性,换取极简):
const arr = ['foo', 'bar', 'baz'].map(k => obj[k]);
该写法零依赖、语义明确,是多数团队推荐的默认做法;当重复出现 ≥2 次时,再封装为 obj2arr 更佳。
| 方式 | 可读性 | 性能 | 类型安全 | 动态键支持 | 推荐指数 |
|---|---|---|---|---|---|
| ['k1','k2'].map() | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⚠️(需变量) | ⭐⭐⭐⭐⭐ |
| obj2arr(obj, 'k1','k2') | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⚠️(需拼接) | ⭐⭐⭐⭐⭐ |
| obj2arr(obj, 'k1 k2') | ⭐⭐⭐ | ⭐⭐ | ⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐ |
? 最佳实践建议:优先使用 rest 参数版 obj2arr(obj, ...keys) 工具函数 —— 它在简洁性、性能、可维护性之间取得了最佳平衡,且天然兼容现代前端工程体系(ESLint、Prettier、TS、Jest)。将它加入项目通用工具库(如 utils/object.js),即可像语言原生能力一样自然调用。