只给你5分钟，掌握var，let和const异同

lookSomeone 发布于2019-08-23 12:03 / 1750人阅读

摘要：用声明的变量，其可用范围在当前执行上下文。在函数外声明的变量，其作用范围是全局。抛出语法错误错误信息未捕获的异常标识符已经被声明过。例如输出照例，命名规范指出我们应该用大写字母声明常量。为了让代码长期可维护，命名规范还是值得遵守的。

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
原文出处：https://dzone.com/articles/ja...

这个话题对于一些老鸟来说可能根本算不上疑问，但对于新手来说也许除了最常见的var之外，let和const较少使用的机会。

所以在本文中，我将会通过一些例子来为大家介绍如何在Javascript中灵活使用var、let和const这些关键字来定义变量，以及这些关键字它们之间有什么异同。

如果你懒得看下面的代码，那我可以先把概念结论说出：

var定义的变量可被更改，如果不初始化而直接使用也不会报错

let定义的变量和var类似，但作用域在当前声明的范围内

const定义的变量只可初始化一次且作用域内不可被更改，使用前必须初始化

下面我将通过示例的形式来详细为大家介绍它们三者之间的异同：

Var

var用以声明一个变量，并且同时我们可以在声明语句中初始化所声明的变量。

例如：

var a = 10;

变量的声明，会在代码被执行之前被处理。

用var声明的JavaScript变量，其可用范围在当前执行上下文。

在函数外声明的JavaScript变量，其作用范围是全局。

考虑以下代码片段：

function nodeSimplified() {
  var a =10;
  console.log(a);  // 输出 10
  if(true) {
   var a=20;
   console.log(a); // 输出 20
  }
  console.log(a);  // 输出 20
}

在上面的代码中，你可以发现，当变量a在if代码段里被更新时，它的值被全局更新了，因此在经过了if代码后，被更新的值仍然被保留着。这与其他语言中的全局变量有点类似。但是，在使用这个功能时要非常小心，因为它有可能会覆盖一个已有的值。

let

let语句在一个块级范围里声明一个局部变量。和var类似，我们可以在声明时初始化它的值。

例如：

let a = 10;

这个语句允许你创建一个变量，使它的作用范围被限制在它所在的代码块。
它和Java、C#等其他语言的变量类似。
考虑下面的代码片段：

function nodeSimplified() {
  let a =10;
  console.log(a);  // output 10
  if(true) {
   let a=20;
   console.log(a); // output 20
  }
  console.log(a);  // output 10
}

它和大多数语言中我们所见的表现行为是一致的。

function nodeSimplified() {
  let a =10;
  let a =20; // 抛出语法错误
  console.log(a); 
}

错误信息:"未捕获的异常:标识符"a"已经被声明过。" 但如果使用var就没事：

function nodeSimplified() { 
  var a =10;   
  var a =20;   
  console.log(a);  // 输出 20 
}

使用let语句，可以很好的维护变量的作用范围。当使用内部函数时，let语句让你的代码更整洁。

我希望上面的例子能帮你更好地理解var和 let。如果有任何疑问，请在评论区留言。

const

const语言中的变量只能被赋值一次，然后就不能在被赋值。const语句的作用范围和let语句一样。

例如：

const a = 10;
function nodeSimplified() {
  const MY_VARIABLE =10;
  console.log(MY_VARIABLE);  // 输出 10 
}

照例，命名规范指出我们应该用大写字母声明常量。当然，const a = 10 在上面的代码中会的起到相同的作用。为了让代码长期可维护，命名规范还是值得遵守的。

问题:如果给一个const变量重新赋值会发生什么？考虑下面的代码：

function nodeSimplified() {
  const MY_VARIABLE =10;
  console.log(MY_VARIABLE);  // 输出 10
  MY_VARIABLE =20;           // 抛出类型错误
  console.log(MY_VARIABLE); 
}

错误信息:"未捕获的类型错误:给const变量赋值"。

当我们尝试给已有的const变量赋值时，这段代码会抛出一个错误。

介绍就到此结束，希望这篇短小精悍的文章能够帮助到各位更好的理解在Javascript中声明变量时使用不同关键字上到底有何异同。

本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网

了解更多

灵活高效的前端开发工具包，可快速搭建企业 Web 应用程序

可嵌入您系统的在线 Excel，SpreadJS纯前端表格控件

专线服务 idc机房托管每隔5分钟 5分钟打造webrtc 每天5分钟玩转kubernetes 给你个

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97912.html

30分钟掌握ES6/ES2015核心内容（上）

摘要：以下简称是语言的下一代标准。的继承机制，实质是先创造父类的实例对象所以必须先调用方法，然后再用子类的构造函数修改。总结以上就是最常用的一些语法，可以说这的语法，在的日常使用中占了追加十分钟好的吗分钟掌握核心内容下 ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说...

YPHP 2019-08-19 17:30 评论0 收藏0
对比let、const、var的异同

摘要：和的区别作用域是函数体的全部声明变量提升循环内变量过度共享循环本身及三次回调均共享唯一的变量。 let、const和var的区别 var : 作用域是函数体的全部,声明变量提升 console.log(num);//undefined var num = 2 //循环内变量过度共享 for (var i = 0; i < 4; i++) { alert(i);...

Andrman 2019-08-23 12:03 评论0 收藏0
5 分钟即可掌握的 JavaScript 装饰者模式与 AOP

摘要：下装饰者的实现了解了装饰者模式和的概念之后，我们写一段能够兼容的代码来实现装饰者模式原函数拍照片定义函数装饰函数加滤镜用装饰函数装饰原函数这样我们就实现了抽离拍照与滤镜逻辑，如果以后需要自动上传功能，也可以通过函数来添加。 showImg(https://segmentfault.com/img/bVbueyz?w=852&h=356); 什么是装饰者模式当我们拍了一张照片准备发朋友...

chunquedong 2019-08-23 18:16 评论0 收藏0
30分钟掌握ES6/ES2015核心内容

摘要：以下简称是语言的下一代标准。因为当前版本的是在年发布的，所以又称。用它所声明的变量，只在命令所在的代码块内有效。的继承机制，实质是先创造父类的实例对象所以必须先调用方法，然后再用子类的构造函数修改。 ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是E...

LucasTwilight 2019-08-20 17:03 评论0 收藏0
[原创][连载]nim与python的异同3

摘要：变量常量绑定无特定关键字直接设值将一个文字列放到名为的变量里的类型由文字列上面定义的正则表达式变成了整数这里就带来一个在大工程里很容易带来困扰的问题理解代码不得不受制于类型极易变的变量要理解代码所必需的工作量极大可变变量前缀将变量与变量(常量)绑定 python无特定关键字,直接设值a = r^s*(d{4}-d{2}-d{2})s{1,2}(.+)$ # 将一个文字列放到名为a的...

GraphQuery 2019-07-31 11:13 评论0 收藏0