let
关键字是在 ES6(2015)
使用 let
定义的变量不能重新声明
使用 let
定义的变量必须在使用前声明
使用 let
定义的变量具有块作用域
使用 let
定义的变量不能重新声明。
您不会意外地重新声明使用 let
声明的变量。
使用 let
你可以不这样做:
let x = "John Doe";
let x = 0;
使用 var
您可以:
var x = "John Doe";
var x = 0;
在 ES6(2015)之前,JavaScript 有全局作用域和函数作用域。
ES6 引入了两个重要的新 JavaScript 关键字:let
和 const
。
这两个关键字在 JavaScript 中提供块作用域。
无法访问在 { } 块内声明的变量 从块外:
{
let x = 2;
}
// x can NOT be used here
使用 var
关键字声明的变量不能具有块作用域。
可以从 { } 块内访问声明的变量 块外。
{
var x = 2;
}
// x CAN be used here
使用 var
关键字重新声明变量可能会带来问题。
在块内重新声明变量也会重新声明该变量 块外:
var x = 10;
// Here x is 10
{
var x = 2;
// Here x is 2
}
// Here x is 2
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>Redeclaring a Variable Using var</h2>
<p id="demo"></p>
<script>
var x = 10;
// Here x is 10
{
var x = 2;
// Here x is 2
}
// Here x is 2
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
使用 let
关键字重新声明变量可以解决此问题。
在块内重新声明变量不会在块外重新声明该变量 块:
let x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>Redeclaring a Variable Using let</h2>
<p id="demo"></p>
<script>
let x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Scope | Redeclare | Reassign | Hoisted | Binds this | |
var | No | Yes | Yes | Yes | Yes |
let | Yes | No | Yes | No | No |
const | Yes | No | No | No | No |
let
和 const
具有块范围。
let
和 const
不能重新声明。
let
和 const
使用前必须声明。
let
和 const
不绑定到this
。
let
和 const
未吊装。
不必声明 var
。
var
被提升。
var
绑定到此。
let
和 const
关键字是 Internet Explorer 11 或更早版本不支持。
下表定义了完全支持的第一个浏览器版本:
Chrome 49 | Edge 12 | Firefox 36 | Safari 11 | Opera 36 |
Mar, 2016 | Jul, 2015 | Jan, 2015 | Sep, 2017 | Mar, 2016 |
允许使用 var
重新声明 JavaScript 变量 程序中的任何位置:
var x = 2;
// Now x is 2
var x = 3;
// Now x is 3
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript let</h2>
<p>Redeclaring a JavaScript variable with <b>var</b> is allowed anywhere in a program:</p>
<p id="demo"></p>
<script>
var x = 2;
// Now x is 2
var x = 3;
// Now x is 3
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
使用 let
时,不允许在同一块中重新声明变量:
var x = 2; // Allowed
let x = 3; // Not allowed
{
let x = 2; // Allowed
let x = 3; // Not allowed
}
{
let x = 2; // Allowed
var x = 3; // Not allowed
}
允许在另一个块中使用 let
重新声明变量:
let x = 2; // Allowed
{
let x = 3; // Allowed
}
{
let x = 4; // Allowed
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript let</h2>
<p>Redeclaring a variable with <b>let</b>, in another scope, or in another block, is allowed:</p>
<p id="demo"></p>
<script>
let x = 2; // Allowed
{
let x = 3; // Allowed
}
{
let x = 4; // Allowed
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
使用 var
定义的变量提升到顶部 并且可以随时初始化。 <p>含义:您可以在声明变量之前使用该变量:
还行吧:
carName = "Volvo";
var carName;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Hoisting</h2>
<p>With <b>var</b>, you can use a variable before it is declared:</p>
<p id="demo"></p>
<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>
</body>
</html>
如果您想了解有关提升的更多信息,请学习 JavaScript 提升一章。 <p>用 let
定义的变量也会被提升到顶部 块,但未初始化。
含义:在声明变量之前使用 let
变量将导致 参考错误
:
carName = "Saab";
let carName = "Volvo";
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Hoisting</h2>
<p>With <b>let</b>, you cannot use a variable before it is declared.</p>
<p id="demo"></p>
<script>
try {
carName = "Saab";
let carName = "Volvo";
}
catch(err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>