ES6处理剩余的对象破坏(对象修剪)

Question

当与rest参数一起使用时，析构函数功能的一个很好的用例是，您可以获得修剪的克隆。

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中，_是一个合适的标识符。如果以这种方式使用一次(unwanted: _(，您将得到一个不需要的变量_，它与目标背道而驰。如果使用不止一次，如上所述，则会发出错误：

SyntaxError: Identifier '_' has already been declared。

有没有什么方法可以丢弃析构函数中不需要的工件/变量？

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

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

和

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

然而，如果您正在克隆一个具有多个参数的对象，并且只需要排除几个参数，那么使用析构函数似乎是最干净的方法。

Answer 1

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

然而，由于您需要明确指出要删除的确切属性，因此可以考虑其他对象修剪技术，例如

• 过滤不需要的属性

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()，与析构函数相比，它甚至可以提高您的性能

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%;}

Answer 2

使用_、__、___或Just方法排除：：D哈哈

function prop(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
var source = {
w1: "val1",
w2: "val2",
unwanted1: "val3",
unwanted2: "val4"
};
var target = prop(source, ["unwanted1", "unwanted2"]);

Answer 3

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

唯一不太可怕的方法是定义一个做同样事情的函数：

const clone = ({unwanted1, unwanted2, ...target}) => target;
const target = clone(source);

变量仍然被创建，但它们的可见性仅限于立即终止的函数。

然而，如果您正在克隆一个具有多个参数的对象，并且只需要排除几个参数，那么使用析构函数似乎是最干净的方法。

上述方法的缺点是函数是特定于特定对象的。不能将其用于其他对象。当然，它很小，所以也许这没什么大不了的。但是拥有一个更通用的helper函数可能更容易理解。