首页 > 其他分享 >var、let和const的区别

var、let和const的区别

时间:2022-10-29 22:14:06浏览次数:50  
标签:const log let var console 变量

在JavaScript中有三种声明变量的方式:var、let、const。下文给大家介绍js中三种定义变量的方式const, var, let的区别。

1.const定义的变量不可以修改,而且必须初始化

const b = 2;//正确
// const b;//错误,必须初始化 
console.log('函数外const定义b:' + b);//有输出值
// b = 5;
// console.log('函数外修改const定义b:' + b);//无法输出

2.var定义的变量可以修改,如果不初始化会输出undefined,不会报错。

var a = 1;
// var a;//不会报错
console.log('函数外var定义a:' + a);//可以输出a=1
function change(){
a = 4;
console.log('函数内var定义a:' + a);//可以输出a=4
} 
change();
console.log('函数调用后var定义a为函数内部修改值:' + a);//可以输出a=4

3.let是块级作用域,函数内部使用let定义后,对函数外部无影响。

let c = 3;
console.log('函数外let定义c:' + c);//输出c=3
function change(){
let c = 6;
console.log('函数内let定义c:' + c);//输出c=6
} 
change();
console.log('函数调用后let定义c不受函数内部定义影响:' + c);//输出c=3

var、let和const的区别

letconst是ES6新增的关键字,如果还不知道ES6的小伙伴们,建议好好去了解下。

区别1

letvar用来声明变量,const用来声明常量。

变量就是赋值后可以改变它的值,常量就是赋值后就不能改变它的值。

区别2

const不允许只声明不赋值,一旦声明就必须赋值

错误的写法

const num;

正确的写法

const num = 4;

区别3

var是函数作用域,letconst是块级作用域。

花括号{}就是块级作用域,函数作用域就是函数里面的内容。

对比这两段代码

{
    let num = 4;
}
console.log(num);// num is not defined
{
    var num = 4;
}
console.log(num); // 4

区别4

var有提升的功能,letconst没有

console.log(a);  //undefined
var a = 4;
console.log(a); //a is not defined
let a = 4;

区别5

在最外层的作用域,也就是全局作用域,用var声明的变量,会作为window的一个属性

var a = 4;
function foo(){
	var b = 5;
	console.log("b=>"+b) // 5
	console.log("window.b=>"+window.b) // undefined
	console.log("window.a=>"+window.a) // 4
}

foo()
console.log("a=>"+a) // 4
console.log("window.a=>"+window.a) // 4
console.log("window.b=>"+window.b) // undefined

而用letconst声明的变量或常量,并不会作为window的属性

对比下面两段段代码

var a = 4;
function foo(){
	/*
	这里的this采用默认的规则,与window进行了绑定,所以实际上访问的是window.a
	*/
	console.log(this.a);// 4  
}

foo()
let a = 4;
function foo(){
	/*
	在这种情况下,this.a 访问的是window.a,但是let定义的变量,并不会作为window的属性,所以访问不到
	*/
	console.log(this.a);// undefined  
}

foo()

最后来看下比较经典的错误代码

<button>按钮0</button>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
let btns = document.getElementsByTagName('button');
for(var i = 0; i<btns.length; ++i){
	btns[i].onclick = function(){
		console.log(btns[i].innerText);  // 点击按钮,报错
	}
}

从上面的js代码应该可以看清我的意思,我想点击每个按钮,然后输出其文本,点击按钮0的按钮就输出按钮0

代码看上去是貌似是正确的,但其实是错误的,因为变量i它相当于共用的,当代码运行完后,i就变成了5,我们虽然绑定生效了,确实将点击事件都绑定到了每个按钮,但是,当点击事件,执行这行代码时,有个严重的问题。

console.log(btns[i].innerText);  // 此时此刻,这个i已经是5了,这很明显数组越界了,所以报错了

//将上面的代码改成下面这段代码
console.log(i); // 5,点击任何一个按钮都是输出5

所以在循环中,我们可以用let声明循环的变量,避免这种错误,这样每个循环的变量i,就都是独立的个体。

let btns = document.getElementsByTagName('button');
for(let i = 0; i<btns.length; ++i){
	btns[i].onclick = function(){
		console.log(btns[i].innerText);
	}
}

一、let、const、var的区别

(1)块级作用域: 块作用域由 { }包括,let和const具有块级作用域,var不存在块级作用域。块级作用域解决了ES5中的两个问题:
内层变量可能覆盖外层变量
用来计数的循环变量泄露为全局变量

(2)变量提升: var存在变量提升,let和const不存在变量提升,即在变量只能在声明之后使用,否在会报错。

(3)给全局添加属性: 浏览器的全局对象是window,Node的全局对象是global。var声明的变量为全局变量,并且会将该变量添加为全局对象的属性,但是let和const不会。

(4)重复声明: var声明变量时,可以重复声明变量,后声明的同名变量会覆盖之前声明的遍历。const和let不允许重复声明变量。

(5)暂时性死区: 在使用let、const命令声明变量之前,该变量都是不可用的。这在语法上,称为暂时性死区。使用var声明的变量不存在暂时性死区。

(6)初始值设置: 在变量声明时,var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。

(7)指针指向: let和const都是ES6新增的用于创建变量的语法。 let创建的变量是可以更改指针指向(可以重新赋值)。但const声明的变量是不允许改变指针的指向。

区别 var let const
是否有块级作用域 × ✔️ ✔️
是否存在变量提升 ✔️ × ×
是否添加全局属性 ✔️ × ×
能否重复声明变量 ✔️ × ×
是否存在暂时性死区 × ✔️ ✔️
是否必须设置初始值 × × ✔️
能否改变指针指向 ✔️ ✔️ ×

二、const对象的属性可以修改吗

const保证的并不是变量的值不能改动,而是变量指向的那个内存地址不能改动。对于基本类型的数据(数值、字符串、布尔值),其值就保存在变量指向的那个内存地址,因此等同于常量。
但对于引用类型的数据(主要是对象和数组)来说,变量指向数据的内存地址,保存的只是一个指针,const只能保证这个指针是固定不变的,至于它指向的数据结构是不是可变的,就完全不能控制了。

参考链接:https://www.jb51.net/article/94495.htm

https://www.cnblogs.com/tourey-fatty/p/12106832.html

https://blog.csdn.net/xiaoqingrong/article/details/119153274

标签:const,log,let,var,console,变量
From: https://www.cnblogs.com/javaxubo/p/16840012.html

相关文章

  • 学习笔记——Servlet
    2022-10-29 Servlet1、 Servlet的作用:例如:查询数据(1)浏览器端点击某个查询功能,向服务器端发出请求;服务器端解析请求,创建Servlet对象,并调用特定方法;Servlet对象调用“D......
  • Servlet生命周期
    版权声明:本文为CSDN博主「进击的三炮」的原创文章,遵循CC4.0BY-SA版权协议原文链接:https://blog.csdn.net/m0_50744075/article/details/126146104Servlet生命周期......
  • Java中ServletContextListener监听器详解
    转载于http://www.51gjie.com/javaweb/875.htmlJava中ServletContextListener监听器详解ServletContextListener如果在web.xml中配置了这个监听器,那么启动容器时,就会默认......
  • JAVAWeb - HttpServletResponse
    HttpServletResponseweb服务器接收到客户端的Http请求,针对这个请求,分别创建了一个代表请求的HttpServletRequest对象,代表响应的一个HttpServletResponse如果要获取客户端......
  • Servlet的应用
    1、案例中使用了几个servlet?每个servlet的功能是什么?1)LoginServlet——登录2)AddUserServlet——注册2、在servlet中使用什么跳转方式?如何传递参数到目标页面?1)服务器端......
  • day03-拦截器,servlet,过滤器,字符过滤器
    第三章Web组件讲三个内容:拦截器,Servlet,Filter3.1拦截器拦截器是SpringMVC中一种对象,能拦截器对Controller的请求。拦截器框架中有系统的拦截器,还可以自定义拦截......
  • Ubuntu中Unable to acquire the dpkg frontend lock (/var/lib/dpkg/lock-frontend)问
    Ubuntu中Unabletoacquirethedpkgfrontendlock(/var/lib/dpkg/lock-frontend)问题的解决按顺序执行直到sudodpkg--configure-a结束就可以了......
  • Ansible 魔法变量(magic variables)和Facts变量
    AnsibleFacts要这样玩才让人心服Ansible体系文章,IT民工金鱼哥希望能以通俗易懂、诙谐幽默的方式给大家呈现这些枯燥的知识点,让繁重的学习变的有趣一些。1.前言描述......
  • What is the difference between non local variable and global variable? Python
    Whatisthedifferencebetweennonlocalvariableandglobalvariable?回答1"nonlocal"meansthatavariableis"neitherlocalorglobal",i.e,thevariable......
  • k3s+traefik+cert-manager+letsencrypt实现web服务全https
    1.简介随着HTTPS不断普及,越来越多的网站都在从HTTP升级到HTTPS,使用HTTPS就需要向权威机构申请证书,需要付出一定的成本,如果需求数量多,也是一笔不小的开支。cert-ma......