卡卡网

var、let 和 const 是 javascript 中声明变量的关键字。var 变量是一种在 javascript 中声明变量的旧方法。在现代 javascript 中，我们使用ES2015(ES6)更新中引入的 let 和 const 变量；现在，与 var 变量相比，现代 javascript 中更频繁地使用 let 和 const 变量。在本文中，我们将了解如何在 javascript 中使用var、let和const关键字声明变量以及它们之间的区别。

var、let、const的区别介绍

Javascript 为我们提供了多种声明变量的方法，但我们应该使用哪一种？

假设我们创建了一个函数，并且我们需要一个函数内部的常量变量，这意味着我们想要一个在任何情况下都不会更新的变量。这里如果我们声明一个 var 变量或 let 变量，那么它可以被更新，但是如果我们声明一个 const 变量，它在任何情况下都不会被更新，并且可以在我们的函数中正常工作。

变量声明与初始化

为了存储任何值，我们需要一个变量，所以首先，我们将声明一个 var 变量，然后将值初始化到变量中。

让我们通过一个例子来看看。

var myName;
myName = "my name";
console.log(myName) //输出 => "my name"

在上面的示例中，我们在第一行声明了一个变量myName，然后在第二行初始化了字符串值“my name”。

在上面的示例中，我们采用了两步方法，首先声明一个变量，然后对其进行初始化，但我们可以像这样同时进行声明和初始化。

var myName = "my name";
console.log(myName); //输出 => "my name"

在上面的例子中，我们以 var 变量为例，但是我们可以使用 let 和 const 进行声明和初始化。

功能范围与块范围

在我们深入了解 javascript 中 let 和 var 和 const 的区别之前，让我们先了解一下函数作用域和块作用域之间的一些区别：

范围

scope(作用域)代表我们的变量可以在我们的代码中使用的位置以及不能使用的位置。

让我们举个例子来理解它。

function myFun() {
    var myName  = "my name";
    console.log(myName);
}

myFun(); //输出 => "my name"
console.log(myName); //输出 => ReferenceError

在示例中，我们有一个函数myFun()；在函数内部，我们声明一个变量myName并在控制台上打印变量myName 。

当我们调用函数myFun时，它会在控制台上成功打印变量myName的值，但是当我们尝试在函数外部打印变量myName时，它​​会抛出 referenceError，因为变量myName具有函数范围，这就是为什么在函数外部无法访问它的原因。

功能范围

具有函数作用域的变量意味着，变量只能在它声明的函数内部使用，不能在函数外部访问，如果我们尝试访问，则会出现引用错误。

这是一个例子。

function name() {
    var myAge = 22;
    console.log(myAge); 
}

name() //输出 => 22

console.log(myAge); //输出 => ReferenceError

在示例中，我们创建了一个函数name()然后我们在函数内部声明了一个变量myAge，当我们调用该函数时，它会在控制台上打印myAge变量，但是当我们尝试在函数外部访问该变量时，它会抛出参考错误。

块作用域

块用一对花括号表示，块可以是包含打开和关闭大括号的任何内容。

具有块范围的变量只能在其声明的块内使用，在块外不可访问，如果我们尝试访问，则会出现引用错误。

这是一个例子。

if(true) {
    let myName = "your name";
    console.log(myName); //输出 => "your name"
}
console.log(myName); //输出 => ReferenceError

在上面的示例中，我们有一个条件为 true 的 if 块，在 if 块中，我们声明了一个变量名myName。现在，当我们尝试将myName变量打印到控制台时，它会成功打印，但是当我们尝试在 if 块之外打印变量时，会出现引用错误。

JS中的var变量是什么？

var变量是在 javascript 中声明变量的旧方法；var 变量具有函数作用域，但在函数外部声明时是全局作用域。

具有函数范围的 var 变量示例：

function myFun() {
    var myName = "my name";
    console.log(myName);
}
myFun(); //输出 => "my name"
console.log(myName); //输出 => ReferenceError

在上面的示例中，我们有一个函数myFun()，在函数内部，我们声明了一个变量myName并在控制台上打印它。

当我们调用该函数时，它成功地在控制台上打印了变量 myName ，但是当我们尝试在函数外部打印变量myName时，它​​会抛出 ReferenceError，因为它在函数外部不可访问。

当我们在函数外部声明一个 var 变量时，它将具有全局范围，并且可以在整个程序内的任何地方使用。

具有全局范围的 var 变量示例：

var myName = "your name";

function myFun() {
    console.log(myName); 
}

myFun(); //输出 => "your name"

if(true) {
    console.log(myName); //输出 => "your name"
}

console.log(myName); //输出 => "your name"

在上面的示例中，我们有一个变量myName，它在函数体之外声明，这就是为什么具有全局范围的原因。

现在，我们尝试在函数myFun中访问这个变量，它将变量打印到控制台，接下来我们有一个条件为 true 的 if 块；在这个if块中，我们再次将变量myName打印到控制台，它也可以在此处访问。

我们做的最后一件事就是直接访问变量，我们成功访问变量并在控制台打印出来。

正如我们所见，变量myName在我们程序中的任何地方都可以访问，因为它具有全局范围。

var变量的提升

当我们声明一个 var 变量时，它被提升到作用域的顶部并被赋值为 undefined。举个例子来理解吧

console.log(myName); //输出 => undefined 
var myName = "my name";

在上面的示例中，我们尝试在声明之前访问变量myName。

这是变量myName被提升到范围顶部时的样子。

var myName;
console.log(myName); //输出 => undefined 
myName = "my name";

我们可以在这里看到，我们的变量被提升到作用域的顶部并使用 undefined 进行初始化，但是值的初始化发生在声明变量的地方。

如果我们只谈论提升，它是 javascript 提供的一个特性，它在代码执行之前将变量和函数移动到作用域的顶部；当我们进行函数声明时也会发生这种情况。

函数声明示例：

myFun() //输出 => "my name"
function myFun() {
    var myName = "my name";
    console.log(myName);
}

在上面的示例中，我们在声明之前调用了函数，但它仍然成功地调用了函数。

移到顶部后，我们的示例代码将如下所示：

function myFun() {
    var myName = "my name";
    console.log(myName);
}
myFun() //输出 => "my name"

var 变量的问题

var 变量可以重新声明和更新。重新声明允许声明多个同名的变量，因此，如果我们错误地声明了一个新变量，它将覆盖原来的变量值。

让我们通过一个例子来讨论如何重新声明它。

var name = "my name";
var myAge = 22;

if(myAge > 18) {
    var name = "another person name";
}

console.log(name); //输出 => "another person name"

这里我们有一个名称变量、 年龄变量和一个if条件块，我们的if条件在这里为真，因此 if 块内的代码将运行并覆盖先前声明的名称变量，因为 var 变量的重新声明行为。此行为可能会影响代码的输出并导致意外输出。

另一个问题是，不能声明一个常量变量。当我们想要声明一个可以更改/更新的变量时没关系，但是如果我们想要声明一个一旦声明就不能更改的常量变量怎么办。

JS 中的 let 变量是什么？

新版本的 javascript (ES6) 引入了两种在 javascript 中声明变量的新方法，其中一种方法是使用 let 关键字声明变量。

这是 let 变量声明的示例。

let myName = "my name";

在上面的例子中，我们使用let关键字来声明一个 let 变量并初始化一个字符串值“my name”。

let 变量引入了一个不允许重新声明变量的特殊功能，如果您还记得，重新声明是 var 变量中的一个问题，但 let 变量解决了这个问题。

let 变量中重新声明的示例：

let myName = "my name";
let myName = "not my name";

console.log(myName); //输出 => SyntaxError: redeclaration of let name

上面的例子展示了 javascript 中 let 和 var 和 const 的区别。在上面的示例中，我们声明了一个变量myName并再次声明了一个具有相同名称的变量，当我们尝试在控制台上打印该变量时，它会抛出SyntaxError: redeclaration of let name。

let 变量的范围

let 变量具有块作用域，这意味着 let 变量只能在它声明的块内访问，如果我们尝试在作用域之外访问它会显示引用错误。

让我们举个例子来理解它。

let myAge = 20;
if(myAge > 18) {
    let myName = "my name";
    console.log(myName) //输出 => "my name"
}
console.log(myName); //输出 => ReferenceError

上面的例子展示了 javascript 中 let 和 var 和 const 的区别。在上面的示例中，我们有一个变量myAge和一个if条件块，我们的 if 条件在这里为真，所以我们进入了if块。在 if 块中，我们有另一个变量myName，它位于块范围内。现在，当我们尝试在 if 块之外打印变量myName时，我们将myName变量打印到 if 块内的控制台，它是不可访问的，并且由于作用域而抛出 ReferenceError。

let变量的重新声明

let 变量不允许重新声明变量，但它允许更新变量，重新声明变量是 var 变量的一个大问题 let 变量帮助我们避免了重新声明变量所带来的问题。

我们举个例子来理解 let 变量中的重新声明。

let myName = "my name";
myName = "my new name";
console.log(myName); //输出 => "my new name"

上面的例子展示了 javascript 中 let 和 var 和 const 的区别。这里我们声明了一个变量myName并赋值为“my name”，然后在下一行，我们为myName变量赋值，即“my new name”。最后，当我们尝试在控制台上打印myName变量的值时，它会打印myName变量的更新值，即“my new name”而不是“my name”。

let变量的提升

let 变量也被提升到作用域的顶部但是没有被分配任何值，因此，如果我们在声明之前尝试访问 let 变量，它将抛出语法错误，因为它没有任何值要打印。

让我们举个例子来进一步理解它。

console.log(myName); //输出 => ReferenceError
let myName = "my name";

上面的例子展示了 javascript 中 let 和 var 和 const 的区别。在这里，我们试图在声明之前访问变量myName 但得到 ReferenceError 因为在被提升到作用域的顶部之后，变量仍然未初始化。

JS 中的 Const 变量是什么？

新版本的 javascript (ES6) 引入了两种在 javascript 中声明变量的新方法，一种是使用 const 关键字声明常量变量。

常量变量示例：

const myName = "my name";

如果你记得声明常量变量是 var 变量中的一个问题但 const 变量解决了这个问题，那么让变量引入一个允许变量为常量的特殊功能。

让我们通过一个例子来看看：

const myName = "my name";
myName = "not my name";

console.log(myName); //输出 => TypeError: invalid assignment to const 'myName'

上面的例子展示了 javascript 中 let 和 var 和 const 的区别。在上面的示例中，我们声明了一个变量myName并初始化了一个字符串值“my name”，当我们尝试更新myName变量时，它会抛出一个类型错误，因为我们无法更新 const 变量的值。

const 声明是块范围的

const 变量也像 let 变量一样具有块作用域，const 变量也不能在作用域外访问。举个例子来理解：

if(true) {
const myName = "my name";
console.log(myName);
}

console.log(myName); //输出 =>  ReferenceError: myName is not defined

上面的例子展示了 javascript 中 let 和 var 和 const 的区别。在上面的示例中，我们有一个if块和一个变量myName，在if块内，我们成功地在控制台上打印了myName变量，但是当我们尝试在if块外打印myName变量时，它会抛出一个错误，因为const 变量的范围。

const变量不能被更新或重新声明

const 变量不能更新或重新声明；const 变量的这种行为有助于我们编写无错误的代码。

让我们举个例子来理解 const 中的更新。

const myName = "my name";
myName = "my new name";
console.log(myName); //TypeError: invalid assignment to const 'myName'

在示例中，我们在第一行中有一个变量myName，然后我们为myName变量初始化另一个值。

当我们尝试将myName变量打印到控制台时，它显示 TypeError，这意味着我们无法更新 const 变量。

让我们举个例子来理解 const中的重新声明。

const myName = "my name";
const myName = "my new name";
console.log(myName); //TypeError: invalid assignment to const 'myName'

上面的例子展示了 javascript 中 let 和 var 和 const 的区别。在示例中，我们在第一行有一个变量myName ，然后我们再次声明了另一个具有相同名称的变量。

当我们尝试将myName变量打印到控制台时，它会显示 SyntaxError，这意味着我们无法重新声明 const 变量。

const的提升

const 变量也被提升到作用域的顶部但是没有初始化任何值，因此，如果我们在声明之前尝试访问 const 变量，它将抛出语法错误，因为它没有任何要打印的值并且是非法的对于 const 变量。

让我们举个例子来进一步理解它：

console.log(myName); //输出 => ReferenceError
const myName = "my name";

var、let 和 const 之间的区别

下表简要介绍了 javascript 中 let 和 var 和 const 的区别：

总结

var、let 和 const 是允许我们声明变量的关键字。

变量的作用域告诉我们在代码中哪里可以访问这个变量，哪里不能。这是javascript中let与var和const区别的决定性原因之一。

提升提供了在代码执行之前将我们的变量和函数声明提升到其范围顶部的功能。

var 是一种声明变量的好方法，它会被提升到作用域的顶部。

let 和 const 是声明变量的现代方法，它们也被提升但没有初始化。

相关文章

• 实例详解何时使用JS中的let、var和const
• 实例详解区别JS三种声明方式：var,let,const
• 3种方法JS判断变量是否存在或已定义

您可能对以下文章也感兴趣

• 详解JS删除数组元素的三个方法：splice(),pop(),shift()
• jQuery $.each() 方法的5种使用方式
• JS: forEach和for不同的功能表现【实例】
• JS 3种方法实现字符全替换: replace replaceAll split join
• 实例比较：空链接 # 与 Javascript:void(0); 哪个更好？

• 千万别用 isNaN 判断是否数字！
• 5个示例介绍如何在JS中解构数组和对象
• 两种简洁又安全的JS遍历对象属性的写法
• 5种方法检查JS对象中是否存在某个键(属性)
• 3种方法JS和jQuery判断对象是否为空
• 3种方法判断JS对象是否具有某一属性
• 【如何合理使用】JavaScript访问对象属性的3种方法
• 【实例】演示2种方法JS从对象中删除属性

标签: var  let  const