JavaScript 中对象解构怎么配合剩余运算符提取不确定的剩余属性-js教程-PHP中文网

对象解构配合剩余运算符可提取已知属性并将其余可枚举自有属性收集到新对象中，...必须位于解构末尾，不包含原型或不可枚举属性，支持默认值和嵌套解构，常用于参数过滤、配置合并与日志脱敏。

javascript 中对象解构怎么配合剩余运算符提取不确定的剩余属性

JavaScript 中对象解构配合剩余运算符（...）可以方便地提取已知属性，同时把其余所有未命名的属性收集到一个新对象中。

基本语法：用 `...` 捕获剩余属性

在解构赋值时，把 ... 放在最后一个变量名前，它会收集对象中**未被前面解构项匹配的所有可枚举自有属性**，生成一个新对象：

const user = {
  name: 'Alice',
  age: 30,
  city: 'Beijing',
  country: 'China',
  isActive: true
};

const { name, age, ...rest } = user;

console.log(name); // 'Alice'
console.log(age);  // 30
console.log(rest); // { city: 'Beijing', country: 'China', isActive: true }

剩余属性必须是解构中的最后一个元素

... 只能出现在解构模式的末尾，否则会报错：

OpenJDK 24

下载

✅ 正确：{ a, b, ...rest }
❌ 错误：{ a, ...rest, b }（SyntaxError）
❌ 错误：{ ...rest, a }（SyntaxError）

剩余对象不包含原型属性和不可枚举属性

... 只拷贝对象自身的、可枚举（enumerable）属性。继承来的属性或通过 Object.defineProperty 设置为 enumerable: false 的属性会被忽略：

const parent = { role: 'admin' };
const child = Object.create(parent);
child.id = 123;
Object.defineProperty(child, 'secret', {
  value: 'xxx',
  enumerable: false
});

const { id, ...rest } = child;
console.log(id);   // 123
console.log(rest); // {} ← role 和 secret 都不会出现

可与默认值、嵌套解构组合使用

剩余运算符可以和其他解构特性共存，比如给缺失属性设默认值，或对嵌套对象进一步解构：

const data = {
  title: 'JS Guide',
  tags: ['js', 'es6'],
  meta: { author: 'Bob', published: true },
  version: '2.1'
};

const {
  title,
  tags = [],
  meta: { author }, // 嵌套解构
  ...others // 剩余：{ version: '2.1' }
} = data;

console.log(title);  // 'JS Guide'
console.log(tags);   // ['js', 'es6']
console.log(author); // 'Bob'
console.log(others); // { version: '2.1' }