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

Question

今天，我必须合并两个对象，选择一个对象的属性并将它们放在一个对象中。我不明白为什么第一个语法/语句不起作用，而第二个语法/语句却有效。ab

let 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) {&nbsp; return { c: arg.c }})(data);因此，我们可以将其转换为箭头函数，以逐步了解所有转换。最初，我们可以将函数转换为使用箭头函数语法：((arg) => {&nbsp; return { c: arg: c }})(data)然后，我们可以从收到的论点中解构出来。c(({c}) => {&nbsp; return { c: c }})(data)由于创建的箭头函数不需要块，因此我们可以简化它：// The parenthesis are added because the syntax () => {} is not valid.(({c}) => ({ c: c }))(data)最后，我们可以使用短对象语法使其与原始语法完全相同。(({c}) => ({ c }))(data)因此，此函数生成一个对象，因此您可以使用 spread 运算符将其合并到正在构建的对象中。{ c: <value> }