js实现根据键名过滤对象

最新推荐文章于 2024-04-02 11:25:07 发布

橘子皮皮酱

最新推荐文章于 2024-04-02 11:25:07 发布

阅读量1.7k

点赞数 4

分类专栏：每天学一点前端小知识文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/JUZHIPI/article/details/128850112

版权

每天学一点前端小知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript的对象不像数组或字符串那样可以迭代，所以我们不能直接在对象上使用filter()方法。

常用的对象处理方法：

使用Object.keys()来提取键
使用Object.values()来提取值
使用Object. entries()检索键和值

在这篇文章中，我们将探讨如何使用Object.keys()来过滤一个对象。

Object.key()方法用于生成一个数组，其元素是包含对象属性的名称（key）的字符串。
在生成了键名数组之后，可以使用filter()遍历现有的数组，只返回那些符合指定条件的键名。
最后，使用reduce()将过滤后的键和它们的值收集到一个新的对象中。

假设我们有一个对象并且我们想只返回键值中带有name的键值对:

const user = {
    firstName: "John",
    lastName: "Doe",
    userName: "johndoe12",
    email: "[email protected]tackabuse.com",
    age: 37,
    hobby: "Singing"
};

使用Object.key(user)来生成所有的键，作为一个数组，结果是一个数组:

Object.keys(user)
// ["firstName","lastName","userName","email","age","hobby"]

使用filter()方法，筛出包含Name的键名

Object.keys(user).filter((key) => key.includes("Name"))
// ["firstName","lastName","userName"]

使用reduce()将符合条件的键值对合并为一个对象

const names = Object.keys(user).filter((key) => key.includes("Name"))
    .reduce((obj, key) => { return Object.assign(obj, {[key]: user[key]}) }, {})

console.log(names)
// { firstName: 'John', lastName: 'Doe', userName: 'johndoe12' }

通过键过滤Users对象，只返回selectedUsers的对象

const users = {
    John: { username: 'johncam112', age:19 },
    Daniel: { key: 'Dandandel1', age:21 },
    Ruth: { key: 'rutie01', age:24 },
    Joe: { key: 'Joemathuel', age:28 }
};

const selectedUsers = ['Ruth', 'Daniel'];

const filteredUsers = Object.keys(users)
    .filter(key => selectedUsers.includes(key))
    .reduce((obj, key) => {
        obj[key] = users[key];
        return obj;
  }, {});

console.log(filteredUsers);
/**
{
    Daniel: {
        key:"Dandandel1",
        age:21
},
    Ruth: {
        key:"rutie01",
        age:24
    }
}