let和const命令与var的异同点

最新推荐文章于 2023-01-05 13:50:25 发布

黄猿007

最新推荐文章于 2023-01-05 13:50:25 发布

阅读量747

点赞数 1

文章标签： javascript js

本文链接：https://blog.csdn.net/qq_37354752/article/details/109611615

版权

本文探讨了JavaScript中let和const命令与var的区别。let声明的变量只在当前代码块内有效，不支持变量提升，且不能在相同作用域内重复声明。const用于声明常量，其值不可变，但对象和数组的属性或元素仍可修改。在for循环中，let避免了父作用域污染。const通常用于定义模块或全局常量，let则减少全局变量影响。

摘要由CSDN通过智能技术生成

let和const命令与var的异同点

ES6新增了let命令。用来声明变量。用法类似于var，但其声明的变量只在let命令所在的代码块内有效。

1.let命令作用域值局限于当前代码块

<script>
	{
		let a = 10;
		var b = 1;
	}
	console.log(a)//ReferenceError:a is not defined.
	console.log(b)//1
</script>

上述代码显示let声明的变量报错，var声明的变量返回了正确的值。表明声明的变量只在它所在的代码块有效

2.使用let声明的变量作用域不会被提前

var命令支持“变量提升”，即变量可以在声明之前使用，值为undefined；为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明之后才能使用，否则报错。
eg:

//var情况:
console.log(foo);//输出undefined
var foo = 2;
//let情况：
console.log(bar);//报错ReferenceError:bar is not defined
let bar = 2;

上述代码中变量foo用var命令声明，会发生变量提升，即当脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。变量bar用let命令声明，不会发生变量提升，表示在声明它之前，变量bar不存在的，如果用到它，就会抛出一个错误

3.在相同的作用域下不能声明相同的变量

let命令不允许在相同作用域内重复声明同一个变量
eg:

//报错
function func() {
	let a = 10;
	var a = 1;
}
//报错
function func() {
	let a = 10;
	let a = 1;
}
//报错
function func(arg) {
	let arg;
}
//不报错
function func(arg) {
	{
  		let arg;
	}
}

不能在函数内部重复声明参数，声明的参数也不能与形参同名。如果声明的参数也不能与形参同名，如果声明的参数是在另一个作用域下，则是可以进行重复声明的。

4.for循环体中的let的父子作用域

有5个按钮，当点击某个按钮时控制台可以打印输出当前单机的是第几个按钮，

<html>
	<body>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
	</body>
</html>

<script>
	var btns = document.querySelectorAll('button');
	for(var i = 0;i <btns.length; i++){
		btns[i].onclick = function() {
			console,log("这是第" + i + "个按钮");
		}
	}
</script>

无论单击哪个按钮，最后打印的都是“这是第5个按钮”。什么原因呢？因为for是同步操作，而for 循环内部的函数执行的是异步操作，当函数执行找不到i时便会往上面的作用域查找，所以i的值为5，最后打印的都是"这是第5个按钮"

const命令

const声明一个只读的常量。一旦声明常量的值就不能改变,

const PI = 3.1415;
console.log(PI);//3.1415
PI = 3;//TypeError:Assignment to constant variable

一旦声明就必须立即初始化，不能留到以后赋值

const foo;//SyntaxError:Missing initializer in const declaration

const的作用域和let相同，只在声明所在的块级作用域内有效。const命令声明的常量也不支持提升，同样和let命令一样，只能在声明之后使用，const声明的常量，也与let一样不可以重复声明。
const实际上保证的并不是常量的值不得改动，而是常量指向的那个内存地址不得改动。对于简单的数据（数值、字符串、布尔值），值就保存在常量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），常量指向的内存地址保存的只是一个指针，const只能保证这个指针是固定的，至于他指向的数据结构是不是可变的，就完全不受控制了。因此，将一个对象声明为常量必须非常小心。

const foo = {};//为foo添加一个属性，可以成功
foo.prop = 123;
console.log(foo.prop)//123
//将foo指向另一个对象，就会报错
foo = {};//TypeError:"foo" is read-only

上述代码中常量foo存储的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性

const a = [];
a.push('hello');//可执行
a.length=0;//可执行
a=['Dave'];//报错

上述代码中常量a是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给a，就会报错。

let、const命令的使用场景: const 一般在需要一个模块的时候用或者定义一些全局常量时用。
而let限制了变量的作用域，保证变量不会去影响全局变量，所以尽量将var 改为用let。