javascript - ES6 处理对象解构剩余的内容(对象 trim )

Question

与剩余参数一起使用时，解构功能的一个很好的用例是您可以获得 trim 过的克隆。

var source = { w1: 'val1', w2: 'val2', unwanted1: 'val3', unwanted2: 'val4'};
var {unwanted1, unwanted2, ...target} = source;
console.log(target); // `{ w1: 'val1', w2: 'val2' }` Exactly what you want

但是，副作用是您的作用域现在被两个您从不关心使用的变量污染:unwanted1 和 unwanted2。

如果_表示不在乎，你可以这样做

var {
  unwanted1:_, // throw away 
  unwanted2:_, // throw away
  target
} = source;

但是，在 Javascript 中 _ 是一个正确的标识符。如果以这种方式使用一次(不需要的:_)，您最终会得到一个名为 _ 的不需要的变量，这违背了目标。如果像上面一样使用多次，则会发出错误:

语法错误:标识符“_”已声明。

有什么方法可以丢弃不需要的解构工件/变量吗？

当然，以下解决方案始终可用。

var target = {
  w1: source.w1,
  w2: source.w2,
}

和

var target = {...source};
delete target.unwanted1;
delete target.unwanted2;

但是，如果您要克隆具有许多参数的对象并且只需要排除几个参数，那么通过解构来执行此操作似乎是最干净的方法。

Answer 1

引入 _、__、___ 等来删除 1、2、3 或更多属性并没有太大区别，因为它仍然会创建变量，这些变量“...您永远不会关心使用”，而且，它可能会给您的代码添加意大利面条的味道。

但是，由于您需要明确指出要删除哪些属性，因此可以考虑其他对象 trim 技术，例如

• 过滤不需要的属性

const obj = {prop1: 1, prop2:2, prop3: 3, prop4: 4, prop5: 5},
      keysToDrop = ['prop2', 'prop3', 'prop4'],
      
      trimmedObj = Object.fromEntries(
        Object
          .entries(obj)
          .filter(([key,val]) => !keysToDrop.includes(key)
        )
      )
      
console.log(trimmedObj)      

.as-console-wrapper{min-height:100%;}

• 利用Array.prototype.reduce()，它甚至可以为您提供某些performance boost ，与解构相比

const obj = {prop1: 1, prop2:2, prop3: 3, prop4: 4, prop5: 5},
      keysToDrop = ['prop2', 'prop3', 'prop4'],
      
      trimmedObj = Object
        .keys(obj)
        .reduce((r,key) => 
          (!keysToDrop.includes(key) && (r[key] = obj[key]), r),{})
      
console.log(trimmedObj)

.as-console-wrapper{min-height:100%;}