JavaScript全局变量赋值数组length显示为0的原因排查

这是典型的代码执行时序错位问题，和命名冲突没有关系：

• 你在全局作用域执行x = playIcons.length赋值操作的节点，playIcons还没有完成元素填充，当时它是长度为0的空数组，这行代码会把当时读到的length值0直接赋值给x。由于x存储的是数字类型的原始值，后续数组再新增、删除元素时，x的值不会自动同步更新。
• 你在控制台直接读取playIcons.length能得到3，是因为你手动读值的时候，所有给数组填充元素的逻辑已经执行完毕，数组已经完成初始化。至于控制台直接打印playIcons显示有3个元素，是控制台对引用类型（数组、对象）的打印采用懒求值机制：你在控制台展开打印的数组条目时，它才会读取数组当下的最新状态，而不是打印代码执行那一刻的数组快照，这会让你误以为赋值x的节点数组已经有3个元素，实际上当时数组还是空的。

这类问题几乎都出现在数组异步填充的逻辑里，比如：

// 初始化空数组
const playIcons = []
// 立刻赋值length，此时数组为空，x=0
const x = playIcons.length

// 后续异步逻辑填充数组：比如接口请求返回后push、DOM渲染完成后查询节点塞入数组
window.addEventListener('load', () => {
  document.querySelectorAll('.play-icon').forEach(icon => playIcons.push(icon))
  // 到这一步playIcons.length才变成3，但x早已经被赋值为0，不会随数组变化更新
})

• 如果你需要获取数组的实时长度，不要在数组填充完成前将length赋值给存储原始值的独立变量，使用时直接读取playIcons.length即可。
• 如果确实需要把长度存为单独变量，必须等数组所有填充逻辑执行完成后再赋值，比如在异步回调里、await异步操作结束后再给x赋值。
• 调试引用类型变量时，不要完全信任控制台直接打印的对象/数组结果，如果需要确认某行代码执行时的数组真实状态，可以打印JSON.parse(JSON.stringify(playIcons))生成快照，或者直接打印playIcons.length这类原始值，避免被控制台的懒求值机制误导。

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