详解JavaScript中var和let的区别

变量

ECMAScript中的变量属于松散类型，意味着变量可以存储任意类型的数据，其本质是用于保存任意值的命名占位符。在JavaScript中，声明变量主要涉及三个关键字：var、const和let。其中，var关键字适用于ECMAScript的所有版本，而const和let仅能在ECMAScript 6（ES6）及更高版本中使用。

var 关键字

定义变量时，需使用var操作符（注意var本身也是关键字），后接变量名。

var message;

上述代码定义了一个名为message的变量，用于存储任意类型的值。若未进行初始化，该变量的默认值为undefined。ECMAScript支持变量初始化，因此可以在定义变量的同时为其赋值。

var message = "hi";

通过上述代码可知，message被定义为存储字符串值“hi”的变量。这种初始化操作仅是简单的赋值，并未将标识符固定为字符串类型。因此，我们不仅可以修改变量存储的值，还可以改变其数据类型。

var message = "hi"
message = 100 ;

上述代码显示，message首先被定义为存储字符串值“hi”的变量，随后被重新赋值为数值100。尽管不推荐频繁改变变量值的类型，但在ECMAScript中这种操作是完全有效的。

var声明作用域

在定义函数变量时，通常需考虑其作用域。使用var操作符定义的变量将成为包含它的函数的局部变量。例如，在函数内部使用var定义变量，意味着一旦执行离开该函数区域，该变量的定义即失效。

<script>
function test() {
    var message = "hi";
}
test();
console.log(message);
</script>

从上述代码可见，message变量是在函数test()内部使用var定义的。调用该函数会创建并赋值此变量，调用结束后变量即被销毁。因此，代码倒数第二行尝试访问message时会抛出引用错误（ReferenceError）。若需解决此问题，可将message定义为全局变量。

<script>
function test() {
    message = "hi";
}
test();
console.log(message);
</script>

省略var操作符后，message变为全局变量。只需调用一次函数test()，即可定义该变量，并在函数外部进行访问。

注意注意！！！

虽然可以通过省略var操作符来定义全局变量，但强烈不推荐这种做法。在局部作用域中定义的全局变量难以维护，且易造成混淆，因为无法确定省略var是否为有意为之。若对未声明的变量赋值，将导致抛出ReferenceError。

若需定义多个变量，可在一条语句中使用逗号分隔每个变量及其可选的初始化值。

<script>
    var message = "hi";
    found = false;
    age = 29;
</script>

上述代码定义了三个初始化变量。由于ECMAScript是松散类型的，使用不同数据类型初始化的变量可以在一条语句中声明。插入换行和空格缩进并非必需（此处并非Python）。

小tip

在严格模式下，不能定义名为eval和arguments的变量，否则会导致语法错误。

var声明提升

使用var声明变量时，即使代码顺序如此也不会报错，因为使用此关键字声明的变量会自动提升到函数作用域的顶部。

<script>
    function foo() {
        console.log(age);
        var age = 26;
    }
    foo();
</script>

上述代码不报错的原因在于ECMAScript引擎已自动调整了阅读顺序，即所谓的“变量提升”：将所有变量声明移至函数作用域的顶部。此外，多次使用var声明同一变量也是允许的。

let声明

let的作用与var类似，但存在关键区别。最显著的区别在于，let声明的范围是块作用域，而var声明的范围是函数作用域。

<script>
   if(true){
       var name = "Matt"
       console.log(name);  //Matt
   }
   console.log(name);    //Matt
   if(true){
       let age = 26 ;
       console.log(age)   //26
   }
   console.log(age)        //ReferenceError
</script>

在上述代码中，age变量无法在if块外部引用，因为其作用域仅限于该块内部。块作用域是函数作用域的子集，因此适用于var的作用域规则同样适用于let。

let不允许在同一块作用域中出现冗余声明，否则将报错。

var name ;
var name ;
let age ;
let age ;    //SyntaxError  标识符age已经声明过了

JavaScript引擎会记录变量声明的标识符及其所在的块作用域，因此嵌套相同标识符不会报错，因为在同一块中没有重复声明。

<script>
    var name = "Nicholas";
    console.log(name);        // Nicholas
    if (true) {
        var name = "Matt";
        console.log(name);    // Matt
    }
    let age = 30;
    console.log(age);         // 30
    if (true) {
        let age = 26;
        console.log(age);     // 26
    }
</script>

对声明冗余的报错不会因混用let和var而受影响。这两个关键字声明的并非不同类型的变量，它们仅指示变量在相关作用域中的存在方式。

var name ;
let name ;    //SyntaxError
let age ;
var age ;     //SynatxError

到此这篇关于详解JavaScript中var和let的区别的文章就介绍到这了,更多相关JavaScript var let内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！