在保留对象的同时解构函数调用中的赋值

Question

有没有办法做类似下面的事情？

f = (o:{a:x}) {
    console.log(o);
    console.log(x);
}
f({a:0});
//Should Print:
//{a:0}
//0

要获得与此相同的结果。

f = function(o) {
    var {a:x} = o;
    console.log(o);
    console.log(x);
}
f({a:0});
//Prints
//{a:0}
//0

我想解构函数参数中的对象，同时将对象传递给函数，以便可以修改对象。

Answer 1

对于嵌套对象解构，您可以使用赋值运算符来提取嵌套引用值。

let {
  o,
  a = o.a
} = {
  o: {
    a: 'x'
  }
}


console.log(o);
console.log(a)

同样，你可以解构函数调用者

const f = ({ o,a=o.a } = {a:y}) => {
    console.log(o)
    console.log(a)
};

f({o:{a: 0 }});

Answer 2

不，不可能，考虑：

var obj = {a:0}

function f (o: {a:x}) {} // not valid - unexpected token :
function f ({a}) {} // valid a === 0
function f ({a:x}) {} // valid x === 0, a is undefined - probably no use for this

您可以使用 ES6 实现做的最好的事情是访问嵌套 props，而不是对对象本身和嵌套 props 的引用。

（但很想被证明是错误的，这也是我一直在寻找的功能）

Answer 3

TL;DR

对象 - 丢失属性：

let f = ({ a: x, ...o }) => {
    console.log(o);
    console.log(x);
};
f({ a: 0, b: 1, c: 2 });
// x is: 0
// o is: { b: 1, c: 2 }

对象 - 保留属性：

let f = (o) => {
    let { a: x } = o;
    console.log(o);
    console.log(x);
};
f({ a: 0, b: 1, c: 2 });
// x is: 0
// o is: { a: 0, b: 1, c: 2 }

数组 - 丢失元素：

let f = ([x, ...a]) => {
    console.log(a);
    console.log(x);
};
f([0, 1, 2]);
// x is: 0
// a is: [1, 2]

数组 - 保留元素：

let f = (a) => {
    let [x] = a;
    console.log(a);
    console.log(x);
};
f([0, 1, 2 ]);
// x is: 0
// a is: [0, 1, 2]

请注意，上面保留属性的示例将调用函数时使用的相同对象放入 o（或 a 中的数组），不是副本。要使用浅拷贝，您可以使用以下示例：

对象 - 保留属性，创建新对象：

let f = ({ ...o }) => {
    let { a: x } = o;
    console.log(o);
    console.log(x);
};
f({ a: 0, b: 1, c: 2 });
// x is: 0
// o is: { a: 0, b: 1, c: 2 }

数组 - 保留元素，创建新数组：

let f = ([...a]) => {
    let [x] = a;
    console.log(a);
    console.log(x);
};
f([0, 1, 2]);
// x is: 0
// a is: [1, 2]

说明

如果您想在 o 中保留原始对象的所有属性，那么您需要在函数主体中进行显式解构步骤：let { a: x } = o; 但如果您只想保留那些没有放入 x 中的属性，那么您可以使用下面描述的解构（将来支持时）。有关详细信息，请参阅下面的示例。

请注意，我最初假设您想要像解构数组时那样进行解构 - 但也许这不是您想要的 - 感谢 Karen Grigoryan 在评论中指出。

逻辑上应该有效的语法不是这样的：

let f = (o: { a: x }) => {
    console.log(o);
    console.log(x);
};

但是这个：

let f = ({ a: x, ...o }) => {
    console.log(o);
    console.log(x);
};

（但如果它在今天的任何平台上甚至在转译器中本地工作，我会（肯定地）感到惊讶。这将需要支持对象解构中的 rest 运算符以及从作为函数参数传递的对象中解包字段。理论上有没有理由它不应该工作。在实践中它可能不会。）

请注意，当 ({ a: x, ...o }) => ... 作为 f({ a: 0, b: 1 }) 调用时，只会将 { b: 1 } 放入 o 并将 0 放入 x - 只是像 ([x, ...a]) => ... 调用时 f([0, 1]) 只会将 [1] 放入 a 并将 0 放入 x.

这意味着使用带有剩余参数的解构 - 对于对象和数组等 - 不会将整个数组或对象保留在剩余变量中，而只会保留未明确捕获的数据。

这意味着无论你是解构数组还是对象，如果你想拥有原始数组或对象，都需要将显式解构步骤放在函数体中，而不是依赖于参数语法完好无损。

参见：

Rest_in_Object_Destructuring 在 MDN

在保留对象的同时解构函数调用中的赋值

Destructuring assignment in function call while preserving the object

javascript

destructuring

node.js

ecmascript-6