JavaScript - let 语句

什么是 JavaScript let 语句？

JavaScript let 语句用于声明变量。使用 let 语句，我们可以声明一个块作用域的变量。这意味着使用 let 声明的变量只能在定义它的代码块中访问。

let 关键字是在 JavaScript 的 ES6 （2015）版本中引入的。它是 var 关键字的替代项。

引入 let 关键字的主要原因是改进变量的作用域行为和代码的安全性。

使用 let 语句进行变量声明

以下是使用 let 语句声明变量的语法 -


 let var_name = value

让我们看一下使用 let 进行变量声明的一些示例。


let name = "John";
let age = 35;
let x = true;

使用 let 语句，我们可以声明任何数据类型的变量，例如数字、字符串、布尔值等。

JavaScript 块范围 vs. 函数范围

使用 let 关键字声明的变量的范围是块范围。这意味着，如果你在特定块中使用 let 关键字定义变量，则只能访问该特定块内的变量，如果你尝试访问块外部的变量，则会引发类似 'variable is not defined' 的错误。


{
	 	let x = "John";
}
//here x can't be accessed

var 关键字具有函数范围，这意味着如果您在任何功能块中使用 var 关键字定义变量，则可以在整个函数中访问它。


function foo(){
	 	if (true){
	 	 	 let x = 5
	 	 	 var y = 10
	 	}
	 	// here x can't be accessed while y is accessible
}

有时，我们需要在一个函数的不同块中定义同名的变量。如果它们使用 var 关键字，则可能会与变量值发生冲突。

例

在下面的示例中，我们使用 let 关键字定义了变量 x，使用 var 关键字定义了变量 y。此外，我们还分别为这两个变量分配了 10 和 20 个值。

我们定义了 test（） 函数，在其中重新声明了 x 和 y 变量，并分别用 50 和 100 个值初始化它们。我们在函数中打印变量值，它打印 50 和 100，因为它优先于全局变量。


<html>
<head>
	 	<title> Variable declaration with let keyword </title>
</head>
<body>
	 	<script>
	 	 	 let x = 10;
		 	 	var y = 20;
		 	 	function test() {
		 	 	 	 let x = 50;
		 	 	 	 var y = 100;
		 	 	 	 document.write("x = " + x + ", y = " + y + "<br/>");
		 	 	}
		 	 	test();
	 	</script>
</body>
</html>

例

在下面的示例中，我们使用 'true' 值初始化了 bool 变量。之后，我们在 'if' 块中使用 let 和 var 关键字声明变量 x 和 y。

我们在 'if' 块内打印 x 和 y 变量的值。我们不能在 'if' 块之外访问 'x' 变量，因为它有阻塞的范围，但我们可以在 'if' 块之外和函数块内部访问变量 y，因为它有函数范围。


<html>
<head>
	 	<title> Variable declaration with let keyword </title>
</head>
<body>
	 	<script>
	 	 	 function test() {
		 	 	 	 let bool = true;
		 			 	 if (bool) {
		 			 	 	 	let x = 30;

		 			 	 	 	var y = 40;
		 			 	 	 	document.write("x = " + x + ", y = " + y + "<br/>");
		 			 	 }
		 			 	 // x can't be accessible here
		 			 	 document.write("y = " + y + "<br/>");
		 			 	}
	 	 	 test();
	 	</script>
</body>
</html>

这样，let 关键字用于改进代码的作用域行为。

JavaScript 重新声明变量

您不能在同一块中重新声明使用 let 关键字声明的变量。但是，您可以将具有相同名称的变量声明到具有相同函数的不同块中。

例

在下面的示例中，你可以观察到使用 let 关键字声明的变量不能在同一块中重新声明，但使用 var 关键字声明的变量可以在同一块中重新声明。

该代码在输出中打印新声明的变量的值。


<html>
<head>
	 	<title> Variable redeclaring </title>
</head>
<body>
	 	<script>
	 	 	 function test() {
		 	 	 	 if (1) {
		 	 	 	 	 	let m = 70;
		 			 			 	// let m = 80; // redeclaration with let keyword is not		 	possible
		 			 			 	var n = 80;
		 			 			 	var n = 90; // redeclaration with var keyword is possible
		 			 			 	document.write("m = " + m + ", n = " + n);
		 			 	 }
		 	 	}
	 	 	 test();
	 	</script>
</body>
</html>

可变提升

JavaScript 的提升行为将变量的声明移动到代码顶部。let 关键字不支持提升，但 var 关键字支持托管。

例

在下面的示例中，你可以看到我们可以在声明变量 n 之前初始化并打印变量 n 的值，因为它是使用 var 关键字声明的。


<html>
<head>
	 	<title> Variable hoisting </title>
</head>
<body>
	 	<script>
	 	 	 function test() {
	 	 	 	 	// Hoisiting is not supported by let keyword
	 	 	 	 	// m = 100;
	 	 	 	 	// document.write("m = " + m + "<br/>");
	 	 	 	 	// let m;
	 	 	 	 	n = 50;
	 	 	 	 	document.write("n = " + n + "<br/>");
	 	 	 	 	var n;
	 	 	 }
	 	 	 test();
	 	</script>
</body>
</html>

您可以使用 let 关键字取消注释代码，并在 Web 控制台中检查错误，因为它不支持提升。

打印本页