使用扩展运算符从 ES6 中的对象中删除目标参数

Posted 2023-02-22

【中文标题】使用扩展运算符从 ES6 中的对象中删除目标参数

【英文标题】：Removing targeted parameter from Object in ES6 using spread operator

【发布时间】：2019-10-27 12:44:47

【问题描述】：

我正在尝试使用扩展运算符从对象中删除一个属性。传统上我是这样做的：

const original_object =  prop1 : 'string1', prop2: 'string2' ;
const  prop1, ...rest  = original_object;

在上述情况下，被移除的属性（prop1）将不再存在于 rest 对象中。

假设我想删除一个更复杂的属性，例如对象中的一个对象。

const original_object = 
    prop1: 'string1'
    prop2: 
        prop3: 'string3',
        prop4: 'string4'
    

const  *remove prop3 of prop2 only here*, ...rest = original_object;
console.log(prop3); // => 'string3';

最优雅/最简单的解决方案是什么？我希望除prop2 中的prop3 之外的所有内容都包含在对象中，并且结构完全相同。

【参考方案1】：

分两步进行 - 首先将prop3 解构出来，然后创建一个新对象，将外部对象的其余部分与 prop2 相结合，并从其中删除 prop3：

const original_object = 
    prop1: 'string1',
    prop2: 
        prop3: 'string3',
        prop4: 'string4'
    
;
const  prop2:  prop3, ...restProp2 , ...restOrig = original_object;
const newObj =  ...restOrig, prop2: restProp2 ;
console.log(prop3); // => 'string3';
console.log(newObj);

虽然您可以在一个带有 hack 的语句中做到这一点，但我不建议这样做。

如果您发现自己经常使用深度嵌套的属性来执行此操作，并且不喜欢额外的行，那么可以考虑使用类似以下行的辅助函数：

const getNestedFrom = (obj, propStr) => 
  // make a copy, don't mutate the original object
  const newObj = JSON.parse(JSON.stringify(obj));
  const props = propStr.split('.');
  const lastProp = props.pop();
  const lastObj = props.reduce((a, prop) => a[prop], newObj);
  const val = lastObj[lastProp];
  delete lastObj[lastProp];
  return [newObj, val];
;


const original_object = 
    prop1: 'string1',
    prop2: 
        prop3: 'string3',
        prop4: 'string4'
    
;
const [newObj, prop3] = getNestedFrom(original_object, 'prop2.prop3');
console.log(prop3); // => 'string3';
console.log(newObj);

出于好奇（请不要这样做），破解方法是使用绝对不存在的默认属性：

const original_object = 
    prop1: 'string1',
    prop2: 
        prop3: 'string3',
        prop4: 'string4'
    
;
const [
   prop2:  prop3, ...restProp2 , ...restOrig,
  newObj =  ...restOrig, prop2: restProp2 
] = [original_object]
console.log(prop3); // => 'string3';
console.log(newObj);

但这会非常（而且不必要地）令人困惑。

【讨论】：

我对 hack 很感兴趣，因为对象每增加一个深度，就需要另一行代码将其重新组合在一起。