Javascript 简明教程
JavaScript - let Statement
What is JavaScript let statement?
JavaScript ${s0} 语句用于声明变量。使用 let 语句,我们可以声明一个变量是什么 ${s1}。这意味着使用 let 声明的变量只能在定义它的代码块中访问。
The JavaScript let statement is used to declare a variable. With the let statement, we can declare a variable that is block-scoped. This mean a variable declared with let is only accessible within the block of code in which it is defined.
${s2} 关键字在 JavaScript 的 ES6(2015) 版本中引入。它是 ${s3} 关键字的替代品。
The let keyword was introduced in the ES6 (2015) version of JavaScript. It is an alternative to the var keyword.
引入 ${s4} 关键字的主要原因是改进变量的范围行为和代码的安全性。
The main reason behind introducing the let keyword is to improve the scoping behaviors of variables and the safety of the code.
Variable Declaration with let statement
以下是使用 let 语句声明变量的语法:
Following is the syntax to declare a variable with let statement −
let var_name = value
我们来看看一些用 let 声明变量的示例。
Let’s have a look at some examples for variable declaration with let.
let name = "John";
let age = 35;
let x = true;
使用 ${s5} 语句,我们可以声明任何数据类型的变量,例如数字、字符串、布尔值等。
Using let statement we can declare a variable of any datatypes, e.g., numeric, string, boolean, etc.
JavaScript Block Scope vs. Function Scope
使用 ${s6} 关键字声明的变量的范围是块范围。这意味着如果使用 let 关键字在特定块中定义变量,则只能访问该特定块内的变量,如果你尝试在块外部访问变量,它会引发一个错误,如“变量未定义”。
The scope of the variable declared with the let keyword is a block-scope. It means if you define the variable with the let keyword in the specific block, you can access the variable inside that particular block only, and if you try to access the variable outside the block, it raises an error like 'variable is not defined'.
{
let x = "John";
}
//here x can't be accessed
${s7} 关键字具有函数范围,这意味着如果你在任何函数块中使用 var 关键字定义变量,则可以在整个函数中访问它。
The var keyword has a function scope, meaning if you define the variable using the var keyword in any function block, you can access it throughout the function.
function foo(){
if (true){
let x = 5
var y = 10
}
// here x can't be accessed while y is accessible
}
有时,我们需要在某个函数的不同块中使用相同名称的变量。如果它们使用 var 关键字,可能会发生变量值冲突。
Sometimes, we require to define the variable with the same name in different blocks of one function. Conflicts may occur with the variable value if they use the var keyword.
Example
在下面的示例中,我们使用 let 关键字定义了变量 ${s8},使用 var 关键字定义了变量 ${s9}。此外,我们分别为这两个变量赋值为 10 和 20。
In the example below, we have defined the variable x using the let keyword and variable y using the var keyword. Also, we have assigned 10 and 20 values to both variables, respectively.
我们定义了 test() 函数,重新声明了 x 和 y 变量,并分别将它们初始化为 50 和 100。我们在函数内部打印变量值,它打印 50 和 100,因为它优先选择局部变量而不是全局变量。
We defined the test() function, redeclared the x and y variables inside it, and initialized them with 50 and 100 values, respectively. We print variable values inside the function, and it prints the 50 and 100 as it gives first preference to the local variables over global variables.
<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>
Example
在下面的示例中,我们用“true”值初始化了 bool 变量。然后,我们在“if”块中用 let 和 var 关键字声明了变量 x 和 y。
In the example below, we initialized the bool variable with a 'true' value. After that, we declared the variables x and y using the let and var keywords in the 'if' block.
我们在“if”块中打印 x 和 y 变量的值。我们不能在“if”块之外访问“x”变量,因为它具有块范围,但我们可以访问“if”块之外和函数块之内的变量 y,因为它具有函数范围。
We print the value of the x and y variable inside the 'if' block. We can’t access the 'x' variable outside the 'if' block as it has blocked scope, but we can access variable y outside the 'if' block and inside the function block as it has function scope.
<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 关键字用于改善代码的范围行为。
In this way, the let keyword is used to improve the scoping behaviors of the code.
Redeclaring Variables in JavaScript
您无法在同一块中重新声明使用 let 关键字声明的变量。但是,您可以使用同一函数在不同块中声明名称相同的变量。
You can’t redeclare the variables declared with the let keyword in the same block. However, you can declare the variables with the same name into the different blocks with the same function.
Example
在下面的示例中,您可以观察到使用 let 关键字声明的变量无法在同一块中重新声明,但使用 var 关键字声明的变量可以在同一块中重新声明。
In the example below, you can observe that variables declared with the let keyword can’t be redeclared in the same block, but variables declared with the var keyword can be redeclared in the same block.
代码在输出中打印新声明的变量值。
The code prints the value of the newly declared variable in the output.
<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>
Variable Hoisting
JavaScript 中的 hoisting 行为将变量的声明移动到代码顶部。 let 关键字不支持提升,但 var 关键字支持提升。
The hoisting behaviors of JavaScript move the declaration of the variables at the top of the code. The let keyword doesn’t support hoisting, but the var keyword supports the hosting.
Example
在下面的示例中,您会看到我们可以使用 var 关键字初始化并打印变量 n 的值,然后才能进行声明。
In the example below, you can see that we can initialize and print the value of the variable n before its declaration as it is declared using the var keyword.
<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 控制台中的错误,因为它不支持提升。
You can uncomment the code using the let keyword and check the error in the web console, as it doesn’t support hoisting.