2.ES6,let基本用法

最新推荐文章于 2024-12-12 17:47:25 发布

原创最新推荐文章于 2024-12-12 17:47:25 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了ES6中新增的let命令的基本用法、与var的区别、不存在变量提升的现象、暂时性死区的概念、以及不允许重复声明的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

----------------------------------------------------------------------------------let命令----------------------------------------------------

基本用法

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

不存在变量提升

let不像var那样，会发生“变量提升”现象。

暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。

--------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>let与var的区别</title>
   <script src="js/traceur.js"></script>
   <script src="js/bootstrap.js"></script>
   <script type="text/traceur">
       {
          var a=100;
       let b=200;   //let所声明的变量，只在let命令所在的代码块内有效
       }
       console.log(a); //100
       console.log(b); //b is not defined --Error
   </script>
</head>
<body>

</body>
</html>

----------------------------------------------------------------------let不存在变量提升------------------

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>let不存在变量提升</title>
   <script src="js/traceur.js"></script>
   <script src="js/bootstrap.js"></script>
   <script type="text/traceur">
       //ES5
       console.log("ES5:");
       var a=[];
       for(var i=0;i<10;i++){
          var c=i;
          a[i]=function(){
              console.log(c);
          };
       };
       a[5]();//输出为9,不管a[]为几，总是要等循环结束才跳出循环

       //ES6
       console.log("ES6:");
       var b=[];
       for(var j=0;j<10;j++){
          let d=j;
          b[j]=function(){
              console.log(d);
          };
       };
       b[5](); //输出5，即 let不像var那样，会发生“变量提升”现象。
   </script>
</head>
<body>

</body>
</html>

---------------------------------------------------------------let暂时性死区-----------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>let暂时性死区</title>
   <script src="js/traceur.js"></script>
   <script src="js/bootstrap.js"></script>
   <script type="text/traceur">
       {
          console.log(a); //undefined
          let a=100;
          console.log(a); //100

       }
   </script>
</head>
<body>

</body>
</html>

---------------------------------------let不受外界影响-------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>let不受外界影响</title>
   <script src="js/traceur.js"></script>
   <script src="js/bootstrap.js"></script>
   <script type="text/traceur">
       var a=100;
       {
          console.log(a); //undefined
          let a=100;
          console.log(a); //100

       }
   </script>
</head>
<body>

</body>
</html>

--------------------------------------------------------------------------let模块内不允许重复声明----------------------

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>let模块内不允许重复声明</title>
   <script src="js/traceur.js"></script>
   <script src="js/bootstrap.js"></script>
   <script type="text/traceur">
      {
       var a=100;
       var a=200;
      }
      console.log(a);
      {
       var b=100;
       let b=200;
      }
      console.log(b);//报错

      {
       let c=100;
       var c=200;
      }
      console.log(c);//报错

      {
       let d=100;
       let d=200;
      }
      console.log(d);//报错

   </script>
</head>
<body>

</body>
</html>

-------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>let不允许重复声明</title>
   <script src="js/traceur.js"></script>
   <script src="js/bootstrap.js"></script>
   <script type="text/traceur">
      {
       var a=100;
       var a=200;
      console.log(a);

      }
      {
       let a=300;
       console.log(a);
      }
      //模块内部不允许用let命令重复声明，模块之间可以重复声明
      {
       var a=1;
       let a=2;
      }

   </script>
</head>
<body>

</body>
</html>

------------------------------------