使用“let”和“var”来声明变量的区别是什么？-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，我们有两种方式来声明变量：使用 let 和 var 关键字。尽管它们都可以用于声明变量，但这两个关键字之间存在着一些重大的差异。

块级作用域

let 关键字声明的变量具有块级作用域，而 var 声明的变量则没有。块级作用域意味着变量的范围被限制在当前块中，比如一个函数、循环语句或一个代码块。这样，就可以避免多个代码块中相同名称的变量互相干扰。

示例代码

-- -------------------- ---- -------
-------- --------- -
  -- ------ -
    --- - - ---
    --- - - ---
  -

  --------------- -- ----------------------
  --------------- -- -- --
-

----------

在上面的示例代码中，变量 x 是用 let 声明的，所以它只能在 if 语句块中访问。而变量 y 是用 var 声明的，所以它可以在整个函数中访问。如果你在控制台中运行这段代码，你会得到一个引用错误（ReferenceError），因为你尝试访问一个不再其可见范围内的变量。

变量提升

使用 var 声明变量时，未赋值的变量会被隐式地初始化为 undefined。此外，在声明变量之前访问变量也是合法的，这就是所谓的“变量提升”。

示例代码

console.log(a); // 输出 undefined
console.log(b); // 抛出引用错误（ReferenceError）

var a = 1;
let b = 2;

在上面的示例代码中，变量 a 在声明前被访问，但它不会抛出引用错误（ReferenceError），因为 JavaScript 引擎会将变量提升到函数或全局作用域的顶部，并将其初始化为 undefined。相反，变量 b 是用 let 声明的，所以它不能在声明前被访问。

重复声明

如果你试图在同一作用域中使用 var 声明已经存在的变量，那么这个变量将不会被重新定义。相反，如果你使用 let 或 const 声明已经存在的变量，那么将会抛出一个语法错误。

示例代码

var x = 10;
var x = 20; // 合法

let y = 30;
let y = 40; // 抛出语法错误（SyntaxError）

在上面的示例代码中，我们试图使用 let 声明一个已经存在的变量 y，这将抛出一个语法错误。相反地，使用 var 声明同一个变量 x 是合法的。

总结

let 声明的变量具有块级作用域，而 var 声明的变量则没有。
使用 var 声明变量时，未赋值的变量会被隐式地初始化为 undefined，并且它们存在变量提升。
如果使用 let 或 const 声明已经存在的变量，将会抛出一个语法错误。

在实际开发中，推荐使用 let 和 const 来声明变量，因为它们允许你更好地控制代码结构，并提供了更安全的程序行为。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/7119