JavaScript 让


目录

    显示目录

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 关键字:letconst

这两个关键字在 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>



var、let 和 const 之间的区别

ScopeRedeclareReassignHoistedBinds this
varNoYesYesYesYes
letYesNoYesNoNo
constYesNoNoNoNo

什么是好的?

letconst 具有块范围

letconst 不能重新声明

letconst 使用前必须声明

letconst 不绑定this

letconst 未吊装

什么是不好?

不必声明 var

var 被提升。

var 绑定到此。


浏览器支持

letconst 关键字是 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>