JavaScript - 传播和休息语法从对象中删除特定属性答案

【问题标题】：JavaScript - spread and rest syntax to remove specific property from objectJavaScript - 传播和休息语法从对象中删除特定属性
【发布时间】：2019-05-14 03:55:15
【问题描述】：

我有一个对象如下：

let obj = {foo: 1, bar: 2, baz: 3}

我想通过调用将要删除的属性名称作为参数的方法来删除特定属性

removeProperty(obj, propertyName) {
  let { propertyName, _, ...result } = obj
  return result
}

问题是这个方法只有当我们直接在语法中写入属性名称时才有效，例如：let { bar, _, ...result } = obj。但是通过将其作为参数传递它不起作用，因为语法将它创建为一个新变量

我们怎么能做到这一点，如果可能的话，除了 lodash 的 omit 之外，还有另一种解决方案

【问题讨论】：

标签： javascript ecmascript-2018

【解决方案1】：

您可以在解构中使用计算属性：

let obj = {foo: 1, bar: 2, baz: 3}
function removeProperty(obj, propertyName) {
  let { [propertyName]: _, ...result } = obj
  return result
}
console.log(removeProperty(obj, 'foo'));

这会将名称为 propertyName 的属性分配给一次性变量，并从本质上删除该键。见the MDN documentation。

【讨论】：

为什么设置为下划线去掉？
@manley13 不需要。下划线可以是任何东西。在编程中使用下划线作为虚拟变量只是惯例，因为它没有被使用。
如果 propertyName 是一个数组，这可能吗？试图一次从一个对象中删除多个计算属性
@MarcSlothEastman 我不知道。您可以使用循环和 delete 就像在另一个答案中一样，或者过滤掉键：Object.keys(obj).filter(key => !forbiddenKeys.includes(key)).reduce((acc, key) => ({ ...acc, [key]: obj[key] }), {}) 虽然它的眼睛很痛。做前者会更清楚。

【解决方案2】：

destructuring 的另一种替代方法是使用delete。与destructuring（在桌面 Chrome 中）相比，以下解决方案将时间复杂度降低了约 35%

解决方案

let obj = {foo: 1, bar: 2, baz: 3}
function removeProperty(obj, propertyName) {
  let newObj = {...obj};
  delete newObj[propertyName];
  return newObj;
}
console.log(removeProperty(obj, 'foo'));

性能测试

https://jsperf.com/so53753276

结果因使用的浏览器而异。结果相当有趣。 Desktop Safari destructuring 优于 delete，但 Desktop Chrome 的性能优于 Desktop Safari。

+-----------------------------------+
| Browser | delete    | destructure |
+---------+-----------+-------------+
| Chrome  | 3,229,791 | 1,993,256   |
| Safari  | 1,186,679 | 1,872,396   | 
+---------+-----------+-------------+

iOS 上的结果并不令人惊讶，因为 Chrome 只是真正的 Safari。

+-----------------------------------+
| Browser | delete    | destructure |
+---------+-----------+-------------+
| Chrome  | 1,146,496 | 1,785,551   |
| Safari  | 1,182,067 | 1,793,772   | 
+---------+-----------+-------------+

文档

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete

【讨论】：

有趣的是，在 Safari iOS 上我的代码运行得更快。克隆然后deleteing 慢 43%。
@Li357 你的解决方案在所有浏览器上确实表现得最好。然而，在delete

【解决方案3】：

values = {
    id: 1,
    name: 'hello world',
    vehicle: 'car',
    time: '3.30 pm',
    date: '02 MAR 1990',
};

const { time, date, ...rest } = values;

now ***...rest*** contains the object values of {
    id: 1,
    name: 'hello world',
    vehicle: 'car',
};

【讨论】：