JavaScript 中怎么结合解构和剩余参数实现属性过滤-js教程-PHP中文网

javascript中可用解构赋值配合剩余参数实现对象属性过滤：显式解构为“白名单”，忽略指定字段为“黑名单”；动态过滤需结合object.keys与reduce等方法，且剩余参数必须位于解构末尾。

javascript 中怎么结合解构和剩余参数实现属性过滤

在 JavaScript 中，结合解构赋值和剩余参数（...）可以简洁地实现对象属性过滤——即提取指定字段，同时把其余字段收集到一个新对象中。

基础用法：解构 + 剩余参数分离关注字段与其余字段

当你明确知道要保留哪些属性时，可直接解构出这些字段，再用剩余参数捕获其他所有属性：

const user = {
  id: 123,
  name: 'Alice',
  email: 'alice@example.com',
  role: 'admin',
  createdAt: '2023-01-01'
};

const { id, name, ...rest } = user;
// id → 123
// name → 'Alice'
// rest → { email: 'alice@example.com', role: 'admin', createdAt: '2023-01-01' }

这相当于“白名单过滤”：显式列出要提取的字段，其余自动归入 rest。

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

反向过滤：只保留剩余部分，忽略指定字段

若目标是“黑名单过滤”（即剔除某些字段），只需解构出要丢弃的字段，再用剩余参数收下其余：

想移除 password 和 token？直接解构它们，不使用即可
剩余参数会自动包含所有未被解构的属性

const data = {
  username: 'bob',
  password: 'secret123',
  token: 'abc456',
  avatar: '/img/bob.jpg',
  isActive: true
};

const { password, token, ...safeData } = data;
// safeData → { username: 'bob', avatar: '/img/bob.jpg', isActive: true }

动态过滤需配合 Object.keys + reduce 或工具函数

剩余参数本身不支持动态键名（如变量名解构），所以纯解构无法直接实现「按数组列表过滤」。但可以组合使用：

先用解构快速提取已知固定字段
对剩余对象进一步筛选：Object.fromEntries() + Object.entries().filter()
或封装一个通用函数，内部用 reduce 构建结果

function filterProps(obj, keep) {
  return Object.keys(obj).reduce((acc, key) => {
    if (keep.includes(key)) acc[key] = obj[key];
    return acc;
  }, {});
}

// 使用示例
const filtered = filterProps(user, ['id', 'role']); 
// → { id: 123, role: 'admin' }