对象解构到另一个对象不起作用

Question

今天，我必须合并两个对象，选择一个对象的属性并将它们放在一个对象中。我不明白为什么第一个语法/语句不起作用，而第二个语法/语句却有效。ablet user = { a: 1, b: 2 };let data = { z: 1, c: 3, f: 8, d: 4 };// Let's say I want user to be { a: 1, b: 2, c: 3}// method 1 (not works) const r1 = {    ...user,    ...({c} = data)};document.getElementById("r1").innerText = JSON.stringify(r1);// method 2 (works)const r2 = {    ...user,    ...(({c}) => ({c}))(data)};document.getElementById("r2").innerText = JSON.stringify(r2);您可以在 https://jsfiddle.net/Ljb7ndp4/6/ 上试用该代码

Answer 1

在第二个方法中，您将创建一个 IIFE（立即调用的函数表达式）。

来自MDN文档，“IIFE（立即调用的函数表达式）是一个JavaScript函数，一旦定义它就会运行”。方法 2 上的 IIFE 返回一个类似于 的对象。由于对象支持展开运算符，因此您可以在对象定义中使用它。{c: <value>}

若要在代码中可视化它，可以将 IIFE 的结果分配给变量，并在控制台上打印结果。

const val = (({c}) => ({c}))(data)

console.log(val) // { c: 3 }

在这种情况下，箭头函数语法使可视化正在发生的事情变得更加困难，但是代码：

(({c}) => ({c}))(data);

是这个的简短版本，在我看来，可读性更好。

(function(arg) {

  return { c: arg.c }

})(data);

因此，我们可以将其转换为箭头函数，以逐步了解所有转换。

最初，我们可以将函数转换为使用箭头函数语法：

((arg) => {

  return { c: arg: c }

})(data)

然后，我们可以从收到的论点中解构出来。c

(({c}) => {

  return { c: c }

})(data)

由于创建的箭头函数不需要块，因此我们可以简化它：

// The parenthesis are added because the syntax () => {} is not valid.

(({c}) => ({ c: c }))(data)

最后，我们可以使用短对象语法使其与原始语法完全相同。

(({c}) => ({ c }))(data)

因此，此函数生成一个对象，因此您可以使用 spread 运算符将其合并到正在构建的对象中。{ c: <value> }