使用Array.reduce时触发no-sequences逗号运算符警告如何解决

no-sequences是ESLint内置的代码规范规则，触发原因非常明确：

• 规则本身会直接禁止逗号运算符的使用，因为逗号运算符会把多个表达式串成顺序执行的整体，代码可读性差，容易引发逻辑歧义
• 原代码的reduce回调里，正是靠小括号包裹两个表达式、用逗号分隔实现“先给累积对象赋值，再返回对象”的逻辑，完全命中了这条规则

方案1：将箭头函数隐式返回改为显式代码块 #

直接去掉逗号运算符，在代码块里完成赋值、显式返回累积对象，是最符合规范的写法，同时顺便优化掉原代码里重复调用e.split('=')的冗余逻辑：

const getQueryParams = () => 
  this.props.location.search
    .replace('?', '')
    .split('&')
    .reduce((r, e) => {
      const [key, value] = e.split('=')
      // 兼容没有等号的异常参数场景，避免decodeURIComponent接收到undefined报错
      r[key] = decodeURIComponent(value ?? '')
      return r
    }, {});

方案2：采用不可变更新的reduce写法 #

如果不想在回调里直接修改累积值，也可以每次返回新的对象，全程不触发逗号运算符：

const getQueryParams = () => 
  this.props.location.search
    .replace('?', '')
    .split('&')
    .reduce((r, e) => {
      const [key, value] = e.split('=')
      return { ...r, [key]: decodeURIComponent(value ?? '') }
    }, {});

• 如果业务场景需要更严谨的查询参数解析，后续可以替换掉手动split的逻辑，直接用浏览器原生的URLSearchParams API处理，能天然兼容多值参数、特殊字符编码等边界场景

内容的提问来源于stack exchange，提问作者The Old County