数组解构赋值结合默认参数：运行环境与转译报错的原因咨询

我想要同时实现两个需求：既能用单个变量引用函数调用的特定结果，又能拥有包含所有结果的数组变量。下面这段代码在浏览器控制台或Node运行时能正常执行，没有报错：

function useFieldX() { return { state: 'x' } }
const fields = [ fieldX = useFieldX()]

console.log(fields) // [{ state: 'x' }]
console.log(fieldX) // { state: 'x' }
console.log(fieldX === fields[0]) // true

但对这段代码进行打包/转译时，会抛出ReferenceError: fieldX is not defined错误。请问该报错的原因是什么？

注：我明白理论上fieldX变量应先在当前作用域声明才能赋值，但疑惑为何上述环境中该代码能正常运行？

原因分析 #

浏览器/Node控制台能运行的原因 #

浏览器控制台和Node的交互模式（REPL）有特殊的环境机制：当你直接执行未声明的变量赋值语句时，环境会自动将这个变量挂载到全局作用域，相当于隐式创建了全局变量，因此代码不会抛出错误。但这属于环境的非标准兼容行为，并非ECMAScript规范要求的内容。

打包/转译时报错的原因 #

打包工具或转译器通常会以严格模式处理代码，或者严格遵循ECMAScript的作用域规则。在标准JS的严格模式下，未声明就赋值的变量会直接抛出ReferenceError；即使是非严格模式，这种写法也属于不规范的隐式全局变量创建，打包工具会将其视为错误代码进行提示，避免后续出现作用域相关的bug。

规范写法建议 #

要同时得到单个变量和包含该变量的数组，应该先显式声明变量，再将其放入数组：

function useFieldX() { return { state: 'x' } }
// 先声明单个变量
const fieldX = useFieldX();
// 再创建数组
const fields = [fieldX];

console.log(fields); // [{ state: 'x' }]
console.log(fieldX); // { state: 'x' }
console.log(fieldX === fields[0]); // true

或者使用数组解构的方式，更简洁地实现需求：

function useFieldX() { return { state: 'x' } }
// 解构获取单个变量，同时保留数组
const fields = [useFieldX()];
const [fieldX] = fields;

// 或者一步完成
const [fieldX] = [useFieldX()];
const fields = [fieldX];

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