JavaScript变量中var,let和const的区别

目录
  • 前言
  • ES5与ES6的区别
    • 1. 作用域
    • 2. 全局属性
    • 3. 变量提升与暂时性死区
    • 4. 重复声明
  • let与const的区别
    • 1. 常量
  • 最佳实践

前言

JavaScript中一共有3种用来声明变量的关键字,分别是var、let和const。

其中var关键字是ES5时代的产物,由于ES5对变量的约束很宽松,使用var来声明变量时经常会出现一些预料之外的问题。 ES6为了使变量的定义更加规范,提出了let和const这两个关键字。

因此要解释清楚这三个的区别,首先要从ES5时代和ES6时代的差别说起,主要是var和let的区别。

ES5与ES6的区别

1. 作用域

使用不同的关键字来声明变量,主要就是对变量的作用域有不同的限制,因此var和let最主要的区别就是变量作用域的区别。

  • var声明的范围是函数作用域,函数体之外无法访问到函数体内声明的var变量。

做题的时候经常会有在全局和函数体内声明同名变量的场景,要知道不同作用域的变量是不会互相干扰的。

var a = 10;
function logA() {
    var a = 20;
    console.log(a); // 20
}
console.log(a); // 10
  • let声明的范围是块作用域,块作用域是函数作用域的子集,可以使用花括号{...}来限定块级作用域。

2. 全局属性

在全局作用域下使用var和let声明变量,变量都是会在页面的声明周期内存续。

但是使用var声明的变量会成为window对象的属性,使用let声明则不会

3. 变量提升与暂时性死区

  • var声明存在变量提升的行为

变量的声明、初始化和赋值被分为三步进行,对于var变量,声明和初始化会被提升到作用域的顶部。

也就是说,编译器在遇到var声明时,会先在作用域顶部声明一个var变量并将其初始化为undefined值。

因此在代码执行流遇到var声明语句之前访问var变量并不会报错,而是会访问到undefined值。

(function example() {
  console.log(age); // undefined
  var age = 20;
})();

// 相当于
(function example() {
  var age;
  console.log(age); // undefined
  age = 20;
})();
  • ES6对先访问后声明变量的行为做了约束,因此let和const声明会存在TDZ暂时性死区

即JavaScript引擎在编译时如果遇到let和const声明,会将它们放入暂时性死区以阻止访问,只有在执行到变量声明的语句后,才会将变量从TDZ中移出。

因此如果在变量声明语句之前访问变量,相当于企图访问TDZ中的变量,JavaScript会抛出运行时错误ReferenceError

ES5的变量提升和ES6的暂时性死区的区别还有一个“副作用”就是改变了typeof操作对于变量的访问性。

已知在ES5时对于未声明变量唯一的安全操作是typeof,会返回undefined值。

TDZ的出现导致即使使用typeof,也不能在let和const声明语句执行之前访问let和const变量,依然会报ReferenceError

4. 重复声明

  • var声明是允许重复的,可以重复使用var关键字来声明同名变量,后来声明的变量值会覆盖之前的值。
  • 为了阻止重复声明变量这个容易让人迷惑的行为,ES6限制了let和const声明的变量都是不可重复的,如果重复声明会报SyntaxError错误。

这个限制不仅体现在let声明对let声明,如果想用let去重复声明var变量也是不被允许的。

let与const的区别

1. 常量

同样都是ES6的变量声明关键字,let和const的区别就在于使用const声明创建的是一个值的只读引用

只读引用意味着对于原始值来说,const声明不可以再重新赋值;

对于引用值来说,const声明不可以再修改引用,但是可以修改对象的属性值或者数组内部的值。

最佳实践

  • 尽量不使用var。因为let和const已经可以替代var的位置,满足开发需求,顺便还规避了很多不必要的问题。
  • 优先使用const声明,let声明次之。const声明有点像保护变量的机制,它能预防和阻止预期之外的变量修改。 对于有修改需求的变量,就使用let声明。

到此这篇关于JavaScript变量中var,let和const的区别的文章就介绍到这了,更多相关JS var,let,const内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-09-10

JavaScript es6中var、let以及const三者区别案例详解

首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?         ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM三者组成.可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展.         2011 年,ECMAScript 5.1 版发布.之前我们大部分人用的也就是ES5         2015 年 6 月,ECM

javascript的var与let,const之间的区别详解

目录 作为全局变量时 变量提升 暂时性死区 块级作用域 重复声明 修改声明的变量(常量与变量声明) 总结 说到JavaScript中声明变量的几种方法也就是var.let.const了,let和const是es6中新增的命令.那么它们之间有什么区别呢? 我们先整体说一下三者的区别,在详细介绍,var.let.const的区别主要从以下几点分析: 作为全局变量时的不同 变量提升 暂时性死区 块级作用域 重复声明 修改声明的变量 作为全局变量时 在ES5中,顶层对象的属性和全局变量是等价的,用var

详解javascript中var与ES6规范中let、const区别与用法

随着ES6规范的到来,Js中定义变量的方法已经由单一的 var 方式发展到了 var.let.const 三种之多.var 众所周知,可那俩新来的货到底有啥新特性呢?到底该啥时候用呢?下面就是小编总结出的关于javascript中var与ES6规范中let.const区别详解 我们先来絮叨絮叨 var 方式定义变量有啥 bug ? Js没有块级作用域 请看这样一条规则:在JS函数中的var声明,其作用域是函数体的全部. for(var i=0;i<10;i++){ var a = 'a'; }

JavaScript&nbsp;ES6语法中let,const&nbsp;,var&nbsp;的区别

一.变量声明的方式let / const let / const 共同点 1.都是块级作用域2.在同一个作用域下,变量名不允许重复3.他们声明的全局变量并没有挂在 window对象上4.都没有预编译 let / const 不同点 1.let 声明的变量值可以改变2.const 声明的变量值不能改变,必须声明后立即赋值 (如:const a = 3.14;)3.const 存引用数据类型时,内容可以发生改变(地址不能改变) 优先考虑使用const , 如果变量会发生改变,就使用let , 最后使

面试官常问之说说js中var、let、const的区别

前言 关于 var.let 和 const 三个关键字的区别,是一个老生常谈的问题,也是经典的面试题.本篇文章将全面讲解三者的特性,以及它们之间的区别,由浅入深让你彻底搞懂这个知识点. 变量声明 ECMAScript 变量是松散类型的,意思就是变量可以用于保存任何类型的数据,每个变量只不过是一个用于保存任意值的命名占位符. 有3个关键字可以声明变量:var.let和const,var在 ECMAScript 的所有版本中都可以使用,而let和const只能在 ES6 及更晚的版本中使用. var

javascript中let和var以及const关键字的区别

1.声明后未赋值,表现相同 //一个例子 'use strict'; (function() { var varTest; let letTest; console.log(varTest); //输出undefined console.log(letTest); //输出undefined }()); 2.使用未声明的变量,表现不同 //一个例子 (function() { console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行) console.

5分钟快速掌握JS中var、let和const的异同

前言 首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM三者组成.可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展. 2011 年,ECMAScript 5.1 版发布.之前我们大部分人用的也就是ES5 2015 年 6 月,ECMAScript 6 正式通过,成为国际标准

快速解决js中window.location.href不工作的问题

E6中在html中<a>标识中通过JS添加click事件调用一个JS函数,例如: < script type = "text/javascript" > function jump () { window . location . href = 'http://www.jb51.net' ; } function enjoy () { return false ; } < /script> html代码: <a href= "java

通过3分钟快速掌握MongoDB中regex的几种用法

背景 Part1:写在最前 使用MySQL或其他关系型数据库的朋友们都知道,使用模糊查询的用法类似于: SELECT * FROM products WHERE sku like "%789"; 本文中介绍的MongoDB中的regex就是实现类似功能的,regex为能使你在查询中使用正则表达式.本文会用简单的实例带您了解MongoDB中regex的用法~ Part2:用法 使用$regex时,有以下几种用法: { <field>: { $regex: /pattern/,

三分钟快速掌握Java中枚举(enum)

什么是枚举? 枚举是JDK5引入的新特性.在某些情况下,一个类的对象是固定的,就可以定义为枚举.在实际使用中,枚举类型也可以作为一种规范,保障程序参数安全.枚举有以下特点: Java中枚举和类.接口的级别相同. 枚举和类一样,都有自己的属性.方法.构造方法,不同点是:枚举的构造方法只能是private修饰,也就无法从外部构造对象.构造方法只在构造枚举值时调用. 使用enum关键字声明一个枚举类型时,就默认继承自Java中的 java.lang.Enum类,并实现了java.lang.Seriab

js中获取jsp表单中radio类型的值简单实例

1.问题的引出: 我们经常需要在js中使用ajax向后台发送请求,在这之前我们需要搜集所需的Form表单参数, 我常常会如此解决,简单省事: // editBasicDataObjectForm 为 form的id,data的形式为 name1=val1&name2=val2&name3=val3&..... var data = $("#editBasicDataObjectForm").serialize(); 但在一次我需要单独获得表单中radio类型的字

Vue.js 60分钟快速入门教程

vuejs是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新. 当

Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)

在 Node.JS 中进行端口扫描还是比较方便的,一般会有广播和轮询两种方式.即使用广播和扫描,使用广播发出的消息有时会被路由器屏蔽,所以并不可靠. 使用node.js中的net模块,可以直接尝试向目录主机的某个端口进行连接,如果能建立连接,则说明该地址存在服务器. var socket = new Socket() socket.connect(port, host) socket.on('connect', function() { //找到port 和 host 地址 }) 所以只要进行2

快速掌握Node.js中setTimeout和setInterval的使用方法

Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInterval的使用. 一.setTimeout超时计时器(和GCD中的after类似) 在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法.当调用setTime()时回调函数会在delayMillSeconds后 执行

JS变量中有var定义和无var定义的区别以及es6中let命令和const命令

之前我们在写js代码的时候都知道可以用var定义全局变量和局部变量,也可以省略var,而且在非严格模式下不会报错,但是并不知道两者的区别... var x = 1; y = 4; console.log(x);//1 console.log(y);//4 console.log(window.x);//1 console.log(window.y);//4 简单测试下可以知道定义的x和y都被挂载在window对象上,变为window下的属性,这并不能说明什么... delete x; delet

js中let和var定义变量的区别

javascript 严格模式 第一次接触let关键字,有一个要非常非常要注意的概念就是"javascript 严格模式",比如下述的代码运行就会报错: let hello = 'hello world.'; console.log(hello); 错误信息如下: let hello = 'hello world.'; ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet sup