如何使用扩展运算符在对象拷贝时排除指定不需要的属性

你可以结合对象解构赋值+剩余运算符（和扩展运算符属于同系列ES规范语法）实现需求，具体实现如下：

方法1：静态排除固定属性（最常用） #

直接通过解构把需要排除的属性单独拎出来，剩余的所有属性就会自动收集到目标变量中：

let foo = {
  color: 'red',
  backgroundColor: 'green',
  width: 100,
  height: 50,
}

// 解构出要排除的width、height，剩下的属性全部存入colors
const { width, height, ...colors } = foo

如果你的代码有未使用变量的校验规则，可以把不需要的排除属性重命名为下划线标识的无用变量，避免报错：

const { width: _, height: __, ...colors } = foo

方法2：动态排除可变属性 #

如果需要排除的属性是动态生成的列表，你可以封装通用工具函数实现：

/**
 * 排除对象指定属性并返回新对象
 * @param {Object} obj 原始对象
 * @param {Array} keysToExclude 要排除的属性名数组
 * @returns {Object} 剔除指定属性后的新对象
 */
function excludeKeys(obj, keysToExclude) {
  return Object.fromEntries(
    Object.entries(obj).filter(([key]) => !keysToExclude.includes(key))
  )
}

// 调用示例
const colors = excludeKeys(foo, ['width', 'height'])

注意事项 #

• 以上两种方法默认都是浅拷贝，如果原对象存在嵌套的引用类型属性，新旧对象会共享嵌套属性的引用，需要深拷贝要额外做递归处理。
• 解构剩余运算符语法需要ES2018及以上的运行环境支持，所有现代浏览器、Node.js 10+版本都已兼容。

内容的提问来源于stack exchange，提问作者KAYZORK