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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

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

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

  • JavaScript ES6语法中let,const ,var 的区别

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

  • 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 正式通过,成为国际标准

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

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

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

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

  • 浅谈JS中var,let和const的区别

    目录 区别1 区别2 区别3 区别4 区别5 区别6 区别7 区别1 let和var用来声明变量,const用来声明常量. 变量就是赋值后可以改变它的值,常量就是赋值后就不能改变它的值. 当声明为对象时,可以直接修改对象内的属性值 const age = 26; age = 36; // TypeError: 给常量赋值 // const声明的作用域也是块 const name = 'Matt'; if (true) { const name = 'Nicholas'; } console.lo

  • JavaScript变量声明var,let.const及区别浅析

    var声明变量的作用域限制在其声明位置的上下文中 var x = 0; // x是全局变量,并且赋值为0. console.log(typeof z); // undefined,因为z还不存在. function a() { // 当a被调用时, var y = 2; // y被声明成函数a作用域的变量,然后赋值成2. console.log(x, y); // 0 2 function b() { // 当b被调用时, x = 3; // 全局变量x被赋值为3,不生成全局变量. y = 4;

  • javascript 变量声明 var,let,const 的区别

    目录 作用域(Scope)是什么 var 声明 提升(Hoisting) let 声明 const 声明 作用域(Scope)是什么 作用域是程序的执行环境,它包含在当前位置可访问的变量和函数.在 ES5 语法中,有全局作用域和局部作用域,ES6 则新增了块级作用域. 全局作用域是最外层的作用域,在函数外面定义的变量属于全局作用域,可以被任何其他子作用域访问.在浏览器中,window 对象就是全局作用域.在编写前端代码过程中,其中有一条优化规则就是少使用全局变量,因为全局变量容易导致程序BUG,

  • Javascript表达式中连续的 && 和 || 之赋值区别

    代码如下: 复制代码 代码如下: function write(msg){ for(var i = 0; i < arguments.length; i ++){ document.write(arguments[i] + '<br />'); } } //关于 '&&' test1 = 1 && 2 && 3 && 4; test2 = '0' && 2 && 3 && 4;

  • JAVASCRIPT style 中visibility和display之间的区别

    当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置. --------------------------------------------------------------- 例子: 复制代码 代码如下: <script language="JavaScript"> function toggleVisibility(me){ if (me.style.visibility=="hidde

  • Javascript变量函数声明提升深刻理解

    目录 前言: 变量提升 函数提升 为什么要提升? 最佳实践 总结 前言: Javascript变量函数声明提升(Hoisting)是在 Javascript 中执行上下文工作方式的一种认识(也可以说是一种预编译),从字面意义上看,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,在代码里的位置是不会动的,而是在编译阶段被放入内存中会和代码顺序不一样.变量函数声明提升虽然对于实际编码影响不大,特别是现在ES6的普及,但作为前端算是一个基础知识,必须掌握的,是很多大厂的前端面试必问的

  • Javascript变量函数浅析

    一.变量 在javascript变量中可以存放两种类型的值:原始值和引用值. 原始值存储在栈上的简单字段,也就是值直接存储在变量所标示的位置内. 引用值存储在堆内的对象,栈内变量保存的是指向堆内对象的指针值. 在javascript中有5种基本类型:Undefined,Null,Boolean,Number,String. 引用类型其实就是对象,类似其他语言中类实例的概念. 复制代码 代码如下: var b = true; // 存储在栈上 var num = 20; //存储在栈上 var b

  • JavaScript中var、let、const区别浅析

    下面通过代码给大家介绍JavaScript中var.let.const区别,具体代码如下所述: //1.var定义的变量可以修改,如果不初始化会输出undefined,不会报错. var a; console.log(a); //undefined //2.let是块级作用域,函数内部使用let定义后,对函数外部无影响. let c = 3; console.log(c) function change(){ let c = 6; console.log(c) } change(); (1)只要

随机推荐