JavaScript中如何在switch语句中多次对同一变量使用解构赋值？

你遇到的问题本质是switch的case本身不属于块级作用域，直接在case里重复用const声明变量会触发重复声明的错误，下面给你三种实用的解决办法：

方法1：给每个case添加块级作用域（最贴近原if逻辑） #

给每个case的代码包裹一层{}，让每个case拥有独立的块级作用域，这样就能和原if分支一样，在每个块里用const解构赋值，变量不会互相干扰：

switch (x) {
  case 1: {
    const { statusCode } = await request(httpUrl...);
    // 编写case 1的业务逻辑
    break;
  }
  case 2: {
    const { statusCode } = await request(aDifferentHttpUrl...);
    // 编写case 2的业务逻辑
    break;
  }
  // 其他case分支同理处理
}

这种方式完全保留原代码的变量作用域逻辑，不会引入意外问题，是最稳妥的选择。

方法2：提前用let声明变量，case内直接解构赋值 #

如果不想重复写const，可以在switch外部用let声明statusCode，然后在每个case里直接解构赋值。注意这里要给解构表达式加一层()，否则JavaScript会把{}识别成代码块而非赋值操作：

let statusCode;
switch (x) {
  case 1:
    ({ statusCode } = await request(httpUrl...));
    // 编写case 1的业务逻辑
    break;
  case 2:
    ({ statusCode } = await request(aDifferentHttpUrl...));
    // 编写case 2的业务逻辑
    break;
}

这种方式减少了重复声明，但要确保每个case都给statusCode赋值，避免出现未初始化的变量问题。

方法3：抽离请求逻辑到独立函数（更优雅的重构） #

如果每个case的差异仅在于请求URL，可以把获取状态码的逻辑抽成一个复用函数，既减少重复代码，又能保持case内变量的独立性：

// 抽离复用函数
const getStatusCode = async (requestUrl) => {
  const { statusCode } = await request(requestUrl...);
  return statusCode;
};

switch (x) {
  case 1: {
    const statusCode = await getStatusCode(httpUrl...);
    // 编写case 1的业务逻辑
    break;
  }
  case 2: {
    const statusCode = await getStatusCode(aDifferentHttpUrl...);
    // 编写case 2的业务逻辑
    break;
  }
}

这种方式让代码更简洁，后续维护URL或请求逻辑时只需修改一处，扩展性更好。

内容的提问来源于stack exchange，提问作者KaduCmK