如果脚本多次运行，如何处理已定义的错误变量？

Question

我有一个 chrome 扩展，脚本如下。当用户调用扩展并用一些虚拟值填充输入字段时，此脚本运行。

const firstNameSelector = ".input-first-name";

document.querySelector(firstNameSelector).value = "John";

它按预期工作。但是，如果用户多次调用扩展，则会失败并显示错误：

Identifier 'firstNameSelector' has already been declared.

因此，我将代码更改如下：

const firstNameSelector = firstNameSelector || ".input-first-name";

document.querySelector(firstNameSelector).value = "John";

现在失败并出现此错误：

Cannot access 'firstNameSelector' before initialization.

如何解决这种情况？我觉得这是一个简单的问题，但我对如何解决这个问题感到困惑。

编辑：我可以通过如下更新脚本来解决这个问题，但是有没有一种方法我不需要牺牲变量声明并保持代码整洁干净？

document.querySelector('.input-first-name').value = "John";

Answer 1

这主要是作用域问题。在 js 中，如果变量在同一范围内声明，则无法在变量声明之前访问该变量，这就是您收到错误的原因：

Cannot access 'firstNameSelector' before initialization.

由于您不需要变量 firstNameSelector 是全局变量，因此您可以将导致错误的代码片段包含在内...

Identifier 'firstNameSelector' has already been declared.

...在一个单独的范围内，像这样：

console.log(typeof firstNameSelector)

{
  const firstNameSelector = ".input-first-name";

  document.querySelector(firstNameSelector).value = "John";
}

<input class="input-first-name">

这里的花括号创建了一个不同的范围，这样代码将始终被执行，并且您可以多次调用脚本而不会出现声明错误。

如果脚本多次运行，如何处理已定义的错误变量？

If script is running more than once, how to deal with error variable already defined?

javascript

google-chrome-extension