在这种情况下使用对象销毁的正确方法是什么？

Question

我最近将ESLint添加到项目中，以提高项目和我的技能。

const server = app.listen(config.port, () => {
    const host = server.address().address;
    const port = server.address().port;
    log.info(`API server listening on host ${host}, port ${port}`);
});

ESLint表示对第2行和第3行使用解构。

VSCode给我的“快速修复”是

const server = app.listen(config.port, () => {
    const { host } = server.address();
    const { port } = server.address();
    log.info(`API server listening on host ${host}, port ${port}`);
});

感觉……不知何故。
如果快速解决方案实际上不是正确的解决方案，那么有人可以在这里教育使用解构的正确方法。
如果这确实是正确的解决方法，那么有人可以解释一下比以前更好的原因。

我不想盲目地关注ESLint，但是我也不会忽略像ESLint这样的工具的建议。 就像我说的，我想学习。

Answer 1

您可以破坏值，同时还将字段映射到其他名称。

 const mockServer = { address() { return { address: 'foo', port: 3000, }; }, }; const { address: host, port } = mockServer.address(); console.log(host, port); 

Answer 2

分解javascript的工作方式如下：请参见下面的示例：假设您定义了一个具有键a ， b ， c的对象x ：

var x = {a:1, b:2, c:3};

现在，如果您只想从对象x获取键a和c并将它们存储在变量中，并且想要将键a分配给自定义命名变量，则说它m ：

var {a:m, c} = x;

console.log(a); // throws error "Uncaught ReferenceError: "a" is not defined"

console.log(m); // prints 1 console.log(m); // prints 1在此处console.log(m); // prints 1 ，将“ a”的值分配给变量m

console.log(c); // prints 3 console.log(c); // prints 3在此处console.log(c); // prints 3 ，将“ c”的值分配给名为“ c”的默认命名变量

我希望这能为您解释使用javascript进行销毁的工作。 以下是对您的问题进行结构分解的实现：

const server = app.listen(config.port, () => {
    const { address: host, port } = server.address();
    log.info(`API server listening on host ${host}, port ${port}`);
});