JS字符串解构剩余参数返回结果不一致：旧项目与CRA新项目差异

这个问题确实和JS语法的版本演进以及项目的编译配置差异直接相关，我来帮你理清楚背后的逻辑：

• ES规范的版本差异
  在ES2018（也就是ES9）之前，JS的剩余参数语法...只能用在数组解构和函数参数中，并不支持直接对字符串这类可迭代对象进行剩余解构。而从ES2018开始，剩余参数被扩展到了所有可迭代对象的解构场景，字符串作为可迭代对象，每个字符会被依次迭代出来，所以...y会把剩余的字符收集成数组。

• 旧项目的编译配置问题
  你的旧项目应该使用了较老的Webpack/Babel配置，没有开启对ES2018解构特性的支持。比如旧版本的Babel插件（比如@babel/plugin-proposal-object-rest-spread早期版本）对字符串解构的处理并不符合新规范，会把[x, ...y] = "text"转译成类似x = "text"[0]; y = "text".slice(1)的逻辑，所以y得到的是截取后的字符串"ext"。

• CRA新项目的默认配置
  Create React App（CRA）的默认Babel配置会默认启用对最新ES规范的支持，包括ES2018的剩余参数扩展特性。它会正确处理字符串的可迭代特性，把剩余的每个字符作为数组元素收集，所以y最终是["e", "x", "t"]——这才是符合现代JS规范的正确行为。

你可以自己验证一下：直接在最新版Chrome的控制台里运行这段代码，结果会和CRA项目一致，因为现代浏览器已经原生支持了ES2018的这个特性。

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