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

Mou*_*iri 6 javascript ecmascript-2018

我有一个对象,如下所示:

let obj = {foo: 1, bar: 2, baz: 3}
Run Code Online (Sandbox Code Playgroud)

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

removeProperty(obj, propertyName) {
  let { propertyName, _, ...result } = obj
  return result
}
Run Code Online (Sandbox Code Playgroud)

问题是该方法仅在我们直接用语法spead编写属性名称时才起作用,例如:let { bar, _, ...result } = obj。但是它不能通过将其作为参数传递而起作用,因为语法spead会将其创建为新变量

我们如何做到这一点,如果可能的话,用另一种解决方案,除了omitlodash的

Li3*_*357 16

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

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

这会将具有值名称的属性分配propertyName给一个一次性变量,并从本质上删除该键。请参阅MDN文档


Ano*_*sSB 5

的另一种选择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'));
Run Code Online (Sandbox Code Playgroud)

性能测试

https://jsperf.com/so53753276

结果取决于所使用的浏览器。结果相当有趣。Desktop Safari的destructuring性能优于Safari delete,但Desktop Chrome的性能优于Desktop Safari。

+-----------------------------------+
| Browser | delete    | destructure |
+---------+-----------+-------------+
| Chrome  | 3,229,791 | 1,993,256   |
| Safari  | 1,186,679 | 1,872,396   | 
+---------+-----------+-------------+
Run Code Online (Sandbox Code Playgroud)

iOS上的结果并不令人惊讶,因为Chrome确实是真正的Safari。

+-----------------------------------+
| Browser | delete    | destructure |
+---------+-----------+-------------+
| Chrome  | 1,146,496 | 1,785,551   |
| Safari  | 1,182,067 | 1,793,772   | 
+---------+-----------+-------------+
Run Code Online (Sandbox Code Playgroud)

文献资料

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/delete