React setState代码中join后尾逗号的作用及运行逻辑疑问

关于代码里尾逗号的疑问解答 #

1. 首先明确代码逻辑，不存在返回对象的情况

你这段是React的状态更新写法，setCode接收的第一个参数是状态更新的updater函数：

// 这个箭头函数没有包裹花括号，默认return后面链式调用的结果
(currCode) =>
  currCode
  .split('')
  .map(/* 替换逻辑 */)
  .join('') // 这里返回的是处理后的字符串，不是对象

整个updater函数的返回值是替换完成的OTP字符串，和对象没有任何关系。

2. 末尾逗号的作用

你看到的join(''),后面的逗号是函数调用参数的尾逗号（Trailing Comma），属于ES2017新增的合法语法：

• 这个逗号是加在setCode的参数列表末尾的，和updater函数的返回值没有任何关联，不会影响代码运行逻辑
• 允许尾逗号的设计目的是方便多人协作开发：如果后续要给setCode加第二个回调参数，不需要修改上一行补逗号，直接新增行即可，git提交的diff记录也不会出现冗余的逗号修改记录
• ESLint提示要加是因为你项目的ESLint规则开启了comma-dangle校验，要求函数参数末尾必须加尾逗号来统一代码风格，删掉也能运行是因为JS引擎本身支持带或者不带尾逗号的写法，只是不符合你当前项目的规范要求。

3. 这类问题的搜索方法

你可以用关键词组合搜索：

• 中文关键词：JS 函数参数末尾逗号 作用、ESLint 要求参数末尾加逗号
• 英文关键词：javascript function call trailing comma、ESLint comma-dangle rule
  这类语法类问题不知道对应的标准名称时，直接把你看到的特征（比如函数最后一个参数后面多了逗号）作为关键词搜索即可。

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