switch语句变量作用域解析：重复声明const bar致编译错误排查

你误解了switch语句的作用域规则——switch的所有case分支都共享同一个块级作用域（也就是switch大括号包裹的范围）。const和let是块级作用域变量，在同一个块里重复声明同名变量就会触发编译错误，这就是你遇到的问题。

有两种常用的修正方式：

方式一：给每个case分支添加独立块级作用域 #

给每个case的代码加上花括号，让每个分支拥有自己的块作用域，这样不同case里的const变量就不会冲突：

const barReducer = (state, { event, payload }) => {
  var bars = state.bars
  switch (event) {
    case 'insert': {
      const bar = parseBar(payload)
      bars[bar.timestamp] = bar
      return { ...state, bars: bars }
    }
    case 'update': {
      const bar = parseBar(payload)
      bars[bar.timestamp] = bar
      return { ...state, bars: bars }
    }
    default:
      return state
  }
}

方式二：统一声明变量，在分支内赋值 #

如果两个分支的逻辑高度相似，可以把变量声明提到switch外面，用let代替const，然后在每个case里赋值：

const barReducer = (state, { event, payload }) => {
  var bars = state.bars
  let bar;
  switch (event) {
    case 'insert':
      bar = parseBar(payload)
      bars[bar.timestamp] = bar
      return { ...state, bars: bars }
    case 'update':
      bar = parseBar(payload)
      bars[bar.timestamp] = bar
      return { ...state, bars: bars }
    default:
      return state
  }
}

额外优化建议 #

因为两个case的逻辑完全一样，其实可以合并分支减少重复代码：

const barReducer = (state, { event, payload }) => {
  var bars = state.bars
  switch (event) {
    case 'insert':
    case 'update': {
      const bar = parseBar(payload)
      bars[bar.timestamp] = bar
      return { ...state, bars: bars }
    }
    default:
      return state
  }
}

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