如何防止重复声明JavaScript变量？

在本教程中，我们将了解几种防止重复声明JavaScript变量的方法，并比较它们，以便理解哪种方法在给定上下文中更合适。

防止重复声明变量的最佳方法是避免创建全局变量。

让我们继续讨论这个问题。

将代码包装在函数中

这里，在函数内声明的变量在函数外部不可访问，反之亦然。用户可以按照以下语法使用此方法。

语法

(function(){
   var varNam = "test";
}())

这里varNam被包装在一个函数内。

示例

在这个程序中，我们有一个名为test的变量被包装在一个函数内。我们可以在函数内部访问它。当用户尝试在函数外部访问此变量时，我们在catch块中得到一个错误。

<html>
<head>
   <title>A program that prevents duplicate variable declaration by wrapping code within a function.</title>
</head>
<body>
   <p id="prevDupInp"></p>
   <div id="prevDupOpWrap">
      <p>Click this button to access the same variable outside the function</p>
      <button id="prevDupBtn" onclick="doAccessVariable()">Click Here</button>
   </div>
   <p id="prevDupOut"></p>
   <script>
      function displayInput() {
         (function() {
            var prevDupInpEl = document.getElementById("prevDupInp");
            var prevDupInpDat = "variableName inside the function - ";
            var variableName = "test";
            prevDupInpEl.innerHTML = prevDupInpDat + variableName;
         }())
      }
      displayInput();
      function doAccessVariable() {
         var prevDupOutEl = document.getElementById("prevDupOut");
         var prevDupOutDat = "variableName outside the function - ";
         var prevDupBtnEl = document.getElementById("prevDupBtn");
         try {
            prevDupOutEl.innerHTML = prevDupOutDat + variableName;
         } catch (e) {
            prevDupOutEl.innerHTML = prevDupOutDat + e;
         }
         prevDupOpWrap.style.display = "none";
      }
   </script>
</body>
</html>

使用JavaScript的use strict指令

use strict指令表示JavaScript代码必须在严格模式下运行。严格指令不是语句，而是一个常量表达式。早期的JavaScript版本忽略了这个表达式。

在严格模式下编写代码时，我们不能使用未声明的变量。除了IE9及以下版本，所有现代浏览器都支持此JavaScript指令。严格模式允许我们编写更简洁的代码，因为它在我们程序中使用未声明的变量时会抛出错误。

“use strict”是一个字符串。要启用严格模式，我们需要在脚本的开头写入此字符串。在开头写入意味着它具有全局作用域。

使用此JavaScript指令的优点是我们可以获得安全的代码。以前会忽略错误的语法。例如，以前错误键入的变量名会变成全局变量。在严格模式下，它会为此变量给出错误，我们可以纠正它。严格模式也用于函数。

用户可以按照以下语法使用此方法。

语法

'use strict';
const v = "Strict";

这里，语法中的第一行是指令，v是一个遵循严格模式的变量。

示例

在这个程序中，我们有一个未声明的变量p。在非严格模式下，我们可以在输出中显示它。当用户选择严格模式时，我们无法显示其值。相反，它会在catch块中抛出一个错误。

<html>
<head>
   <title>JavaScript program that prevents duplicate variable declaration using the JavaScript strict mode.</title>
</head>
<body>
   <p>Prevents duplicate variable declaration using the JavaScript strict mode</p>
   <p id="useStrictInp"></p>
   <div id="useStrictOutWrap">
      <p>Click this button to enter strict mode</p>
      <button id="useStrictBtn" onclick="getStrictMode();">Click Here</button>
   </div>
   <p id="useStrictOut"></p>
   <script>
      var useStrictEl;
      var useStrictData;
      var useStrictWrap = document.getElementById("useStrictOutWrap");
      function getStrictMode(){
         "use strict";
         try{
            x = 10;
            useStrictData = "Undeclared variable in strict mode - 
" + p;
         }
         catch(e){
            useStrictData = "Undeclared variable in strict mode - 
" + e;
         }
         useStrictEl = document.getElementById("useStrictOut");
         useStrictEl.innerHTML = useStrictData;
         useStrictWrap.style.display = "none";
      }
      function noStrict(){
         y = 10;
         useStrictEl = document.getElementById("useStrictInp");
         useStrictData = "Undeclared variable in normal mode - 
" + q;
         useStrictEl.innerHTML = useStrictData;
      }
      noStrict();
   </script>
</body>
</html>

使用let关键字声明具有块级作用域的变量

我们可以使用此方法来防止在循环内重复声明JavaScript变量。

当在多个循环中使用相同的变量时，我们会收到声明警告。我们可以使用关键字let来声明变量以防止这种情况。使用let声明的变量具有块级作用域。

用户可以按照以下语法使用此方法。

语法

for(let j=0;j<3;j++){ 
   //block1
   for(let j=0;j <4;j++){
      //block2
   }
}

这里，我们有两个具有不同作用域的单独代码块。

示例

在这个例子中，我们有一个长度为4的外循环和一个长度为5的内循环。首先，我们尝试使用var变量声明来显示循环。这里我们只显示一次循环值。接下来用户请求let声明。这里我们得到4次循环值显示。这是这里正确的循环执行。

<html>
<body>
   <p id="letDeclInp"></p>
   <div id="letDeclWrap">
   <p>Click this button to use the let keyword</p>
   <button id="letDeclBtn" onclick="blockScope(true)">Click Here</button>
   </div>
   <p id="letDeclOp"></p>
   <script>
      function blockScope(isLet){
         var letDeclSel = isLet ? "letDeclOp" : "letDeclInp";
         var letDeclEl = document.getElementById(letDeclSel);
         var letDeclBtn = document.getElementById("letDeclBtn");
         var letDeclWrap = document.getElementById("letDeclWrap");
         var letDeclDat = isLet? "Same loop variable: 4 times outer loop and 5 times inner loop using let declaration - " : "Same loop variable: 4 times outer loop and 5 times inner loop using var declaration - ";
         if(isLet){
            for(let j=0;j<3;j++){
               for(let j=0;j<4;j++){
                  letDeclDat+= j;
               }
               letDeclDat+= "
";
            }
         }
         else{
            for(var j=0;j<3;j++){
               for(var j=0;j<4;j++){
                  letDeclDat+= j;
               }
               letDeclDat+= "
";
            }
         }
         letDeclEl.innerHTML = letDeclDat;
         if(isLet)
         letDeclWrap.style.display = "none";
      }
      blockScope(false);
   </script>
</body>
</html>

本文帮助我们学习如何防止重复声明变量。首先，我们将变量包装在函数内以避免从外部访问它。

其次，我们使用严格的JavaScript指令通过抛出异常来防止重复变量。

最后一种方法是在循环中使用let关键字变量声明。

我们建议函数包装方法作为最佳方法。

更新于：2022年9月14日

1000+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告