ES6 Object.values 特定字段处理

上篇文章,介绍了ES6 Object处理对象的常用的处理方法,小伙伴可以参考:ES6 Object.keys()、Object.values()、 和 Object.entries() 区别-CSDN博客

在JavaScript中,Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与通过循环(例如,使用 for...in)遍历它们时的一致。如果想要从对象中提取特定字段的值,而不是所有值,你可以使用几种不同的方法来实现这一点。

基础示例:

复制代码
const obj = {
 a: 1,
 b: 2,
 c: 3,
 d: 4
};

const values = Object.values(obj);
console.log(values); // 输出: [1, 2, 3, 4]

进阶

1、使用 Object.values() 结合数组的 map 方法

如果你想要获取特定字段的值,可以先使用 Object.values() 获取所有值,然后通过 map 方法过滤出你需要的字段值。

复制代码
const obj = {
  name: "Aotman_",
  age: 25,
  city: "Hang Zhou"
};
 
// 假设我们只对 'name' 和 'city' 字段感兴趣
const specificValues = Object.values(obj).map(value => ({ value }));
console.log(specificValues); // 输出: [{ value: 'Aotman_' }, { value: 'Hang Zhou' }]
 
// 如果你想要一个简单的数组
const simpleArray = specificValues.map(item => item.value);
console.log(simpleArray); // 输出: ['Aotman_', 'Hang Zhou']

2、 使用 Object.entries() 和数组的 filter 方法

使用 Object.entries() 来获取键值对数组,然后使用 filter 方法来筛选出你需要的字段。

复制代码
const obj = {
  name: "Aotman_",
  age: 25,
  city: "Hang Zhou"
};
 
// 获取特定字段的值
const filteredValues = Object.entries(obj)
  .filter(([key]) => ['name', 'city'].includes(key)) // 只保留 'name' 和 'city' 的键值对
  .map(([key, value]) => value); // 只取值
 
console.log(filteredValues); // 输出: ['Aotman_', 'Hang Zhou']

3、直接访问对象属性(适用于已知字段)

如果知道要提取哪些字段,可以直接通过属性访问来获取这些字段的值。

复制代码
const obj = {
  name: "Aotman_",
  age: 25,
  city: "Hang Zhou"
};
 
const { name, city } = obj; // ES6 解构赋值
console.log(name, city); // 输出: Alice Hang Zhou

或者作为一个数组:

复制代码
const specificValues = [obj.name, obj.city];
console.log(specificValues); // 输出: ['Aotman_', 'Hang Zhou']

4、使用 reduce 方法

可以使用 reduce 方法来收集特定字段的值。

复制代码
const obj = {
  name: "Aotman_",
  age: 25,
  city: "Hang Zhou"
};
 
const specificValues = Object.keys(obj) // 获取所有键名
  .filter(key => ['name', 'city'].includes(key)) // 筛选出特定键名
  .reduce((acc, key) => {
    acc.push(obj[key]); // 根据键名获取值并加入结果数组
    return acc;
  }, []); // 初始化空数组作为累加器
 
console.log(specificValues); // 输出: ['Aotman_', 'Hang Zhou']

总结

以上方法可以根据具体需求选择使用。如果只需要几个特定的字段,直接通过属性访问或者使用 reduce 方法可能是最直接和高效的方式。如果需要更灵活的处理(例如,基于某些条件选择字段),那么使用 filter 或结合 map 的方法可能更合适。

相关推荐
IT_陈寒16 分钟前
Vue的双向绑定把我坑惨了,原来这个场景不能用
前端·人工智能·后端
hunterandroid42 分钟前
[Android 从零到一] Compose LazyColumn 性能优化:key、稳定性与重组治理
android·前端
lichenyang4531 小时前
从一次团队邀请开始:用 React、NestJS 与 Socket.IO 做可靠的实时通知
前端
vtian1 小时前
一篇文章吃透 Monorepo:pnpm + Turborepo + Changesets 全流程实战(含 8 个踩坑)
前端
默_笙1 小时前
❗ 点击计数按钮,为什么"峨眉队"也跟着重新渲染?React.memo 说:我记住了
前端·javascript
31535669132 小时前
DeepSeek Harness 发布后,我没急着跑 Demo,先把 `.agents/` 翻了一遍
前端·后端·github
名字还没想好☜2 小时前
Next.js 用 Server Components 直连数据库:去掉 API 层的边界,和三条别踩的安全红线
前端·javascript·数据库·安全·react·next.js
学习zhao极致it2 小时前
2020全新React教程全家桶实战redux+antd+React Hooks前端js视频
前端
用户921080262862 小时前
Bubble 消息操作区改造:复制、重新生成和反馈
前端
LEE2 小时前
AI Agent 都在疯狂加功能,它说:我全砍了
前端·后端