广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Js中var,let,const的区别你知道吗
  • 578
分享到

Js中var,let,const的区别你知道吗

摘要

目录一:区别:二:var声明的作用域三:var声明的变量提升四、let声明五:彻底区分var和let声明变量(作用域区别)1.var声明2.let 声明 六:const 声

一:区别:

1、var声明的变量属于函数作用域,而let和const声明的变量属于块级作用域;(js作用域在上篇文章) 

2、var声明的变量存在变量提升,而let和const没有

3、var声明的变量可以重复声明,而在同一块级作用域,let变量不能重新声明,const常量不能修改(对象的属性和方法,数组的内容可以修改)

二:var声明的作用域

1. 使用var声明的变量,这个变量属于当前的函数作用域,如果变量的声明在任何函数外,那么这个变量就属于全局作用域

var a = 1; //此处声明的变量a为全局变量
function foo(){
   var a = 2;//此处声明的变量a为函数foo的局部变量
   console.log(a);//2
}
 
foo();
console.log(a);//1

2.如果在声明变量时,省略 var 的话,该变量就会变成全局变量,如全局作用域中存在该变量,就会更新其值

var a = 1; //此处声明的变量a为全局变量
function foo(){
   a = 2;//此处的变量a也是全局变量
   console.log(a);//2
}
 
foo();
console.log(a);//2

三:var声明的变量提升

1.var的声明会在js预解析时把var的声明提升到当前作用域的最前面,意思是是指无论 var 出现在一个作用域的哪个位置,这个声明都属于当前的整个作用域,在其中到处都可以访问到。只有变量声明才会提升,对变量赋值并不会提升

console.log(a);//undefined
var a = 1;

相当于执行以下代码

var a;
console.log(a);//undefined
a = 1;

四、let声明

1.let 声明的变量具有块作用域的特征。

2.在同一个块级作用域,不能重复声明变量。

function foo(){
    let a = 1;
    let a = 2;//Uncaught SyntaxError: Identifier 'a' has already been declared
}

3.let 声明的变量不存在变量提升,换一种说法,就是 let 声明存在暂时性死区(TDZ)。

let a = 1;
console.log(a);//1
console.log(b);//Uncaught ReferenceError: b is not defined
let b = 2;

(此时变量b的声明不会提升到当前作用域的前面)

五:彻底区分var和let声明变量(作用域区别)

1.var声明

for (var i = 0; i < 10; i++) {
    setTimeout(function(){
        console.log(i);
    },100)
};

(1.此时的var声明的变量i属于函数作用域,声明又不在函数里,所以i属于全局变量

2.此时的定时器函数属于异步函数,隔100毫秒才会执行,而这100毫秒的时间内,for循环已经循环结束,全局变量i已经为10

3.相当于代码执行

    {
       var i = 0;
      // 第一次循环
      {
        setTimeout(() => {
          //延时器属于异步函数,不会立即执行,
          //经过1s后,循环已经结束,全局变量i已经变成10
          console.log(i);
        }, 1000)
        i++
      }
      // 第二次循环
      {
        setTimeout(() => {
          //var声明的变量i没有块级作用域,所以可以访问第一次循环体内的变量i,
          //同样,1s后,循环已经结束,全局变量i已经变成10
          console.log(i);
        }, 1000)
        i++
      }
      .....
    }

最后代码的执行后,会在控制台打印出10个10)

ps:主要的原因是var声明的变量的没有块级作用域

2.let 声明

使用闭包原理解决上例中var声明变量的不具有块级作用域的问题:

    for (var i = 1; i <= 5; i++) {
      //i=0  第一轮循环
      (function (i) {
        // 立即执行函数执行,形成一个私有的函数上下文
        //形参i是属于立即执行函数的局部变量,第一轮循环时相当于let i=0
        //由于立即执行函数的参数i被下一级的延时器回调函数上下文所引用,所以会产生闭包,
        //  从而形成块级作用域,保护了每一次循环的i,也就是闭包的特点:变量私有化
 
        setTimeout(() => {
          // 延时器回调函数执行,也会形成一个私有的函数上下文
          console.log(i);//由于当前延时器回调函数上下文引用了
          // 上一级立即执行函数的参数i(立即执行函数的局部变量),
          //所以此时会产生闭包,立即执行函数的参数i会一直保存在内存中供延时器回调函数使用
        }, 5000)
      })(i)//把每一轮循环全局的i的值作为实参传递给立即执行函数的私有上下文,第一轮传递的是0
 
    }

使用let声明的变量具有块级作用域

for (let i = 0; i < 10; i++) {
     // 每一轮都会形成一个私有的块级作用域,并且有一个私有的变量i,分别存储每一轮循环的索引
    setTimeout(function(){
        console.log(i);
    },100)
 
};

 PS:这是因为闭包的机制,但是因为let的块作用域是浏览器底层机制实现的,比我们自己创建的闭包性能要好一些

代码执行后,则该代码运行后,就会在控制台打印出0-9. )

 六:const 声明

1.const 声明方式,除了具有 let 的上述特点外,其还具备一个特点,即 const 定义的变量,一旦定义后,就不能修改,即 const 声明的为常量。

const a = 1;
console.log(a);//1
a = 2;
console.log(a);//Uncaught TypeError: Assignment to constant variable.

2.但是,并不是说 const 声明的变量其内部内容不可变,如:

const obj = {a:1,b:2};
console.log(obj.a);//1
obj.a = 3;
console.log(obj.a);//3

所以准确的说,是 const 声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的,只是变量标识符不能重新分配。

(我的理解是如果是简单数据类型,const声明的变量保存的值就是变量的值,是不可以修改,但如果是复杂数据类型(对象,数组等)const只是保存的是复杂数据类型的地址,只是确保地址不可变,但地址指向的内容是可以变的)

总结

最后,因为let和const是es6的新特性,let和const的出现就是为了解决var的各种问题,强烈建议大家写js代码都用let和const声明变量和常量! 

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

--结束END--

本文标题: Js中var,let,const的区别你知道吗

本文链接: https://www.lsjlt.com/news/195135.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作