
本文介绍使用 JavaScript 的 Object.values() 方法,快速、简洁地将对象的所有可枚举自有属性值提取为一个新数组,避免手动循环中因变量作用域或重复初始化导致的数据覆盖问题。
本文介绍使用 javascript 的 `object.values()` 方法,快速、简洁地将对象的所有可枚举自有属性值提取为一个新数组,避免手动循环中因变量作用域或重复初始化导致的数据覆盖问题。
在日常开发中,我们常遇到这样的场景:一个对象(如配置项、响应数据或状态容器)包含多个嵌套对象作为其属性值,而业务逻辑需要将这些嵌套对象统一处理——例如遍历渲染、批量校验或传递给 API。此时,最直接高效的方式是将所有属性值“扁平化”为一个数组。
过去开发者可能倾向使用 for...in 或 Object.keys().forEach() 手动构建数组,但容易因疏忽引发常见错误:比如在循环内反复声明数组(let arr = []),导致每次迭代都重置数组;或未正确使用 push() 而误用赋值操作(如 arr = [item]),最终仅保留最后一项。
✅ 推荐方案:使用原生方法 Object.values()
该方法返回一个由对象自身可枚举属性值组成的数组,顺序与 for...in 遍历一致(即按属性定义顺序),且自动忽略继承属性和不可枚举属性,语义清晰、性能优异、代码极简:
const data = {
user1: { id: 101, name: "Alice" },
user2: { id: 102, name: "Bob" },
user3: { id: 103, name: "Charlie" }
};
const usersArray = Object.values(data);
console.log(usersArray);
// 输出:
// [
// { id: 101, name: "Alice" },
// { id: 102, name: "Bob" },
// { id: 103, name: "Charlie" }
// ]⚠️ 注意事项:
-
Object.values()不递归处理嵌套对象——它只提取第一层属性值。若需深度扁平化(如对象内含数组或更深嵌套),需配合flatMap()、reduce()或递归函数; - 属性值为
undefined、null、原始类型或函数时,均会被原样包含在结果数组中; - 若对象为空(
{}),返回空数组[]; - 兼容性良好:支持现代浏览器及 Node.js ≥ 7.0;旧环境可使用 Babel 转译或
Object.keys(obj).map(key => obj[key])降级。
? 小技巧:结合解构与扩展运算符可实现更灵活的组合,例如排除特定键后提取值:
const { tempKey, ...rest } = data; // 先剔除不需要的属性
const safeValues = Object.values(rest);总结:Object.values() 是将对象“结构化数据”转化为“可迭代数组”的标准、健壮且声明式的方法。相比手动循环,它消除了状态管理风险,提升了代码可读性与可维护性——在绝大多数提取顶层值的场景中,应作为首选方案。

















