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的方式如下：请参见以下示例：假设您定义了一个对象x，其键为a，b，c：

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

现在，如果您只想从对象a中获取密钥c和x并将其存储在变量中，并且还想将密钥a分配给自定义让命名变量说m：

var {a:m, c} = x;

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

console.log(m); // prints 1 这里“ a”的值分配给变量m

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}`);
});

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

2 个答案: