let const 和 var 的区别

领航猿麦兜
149 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。

let const 和 var 的区别是 ES6 面试中常见面试题，下面我们通过代码中来看一下它们之间的区别。

不存在变量提升

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>let const var</title>
</head>
<body>
  <script>
  
   console.log(`fullName`, fullName)
   var fullName = 'freemen';
     </script>
</body>
</html>

在浏览器打开，fullName 的值 undefined。

image.png

原因是 var 声明变量的方式，它存在一个变量提升，代码在执行之前，它首先会把 fullName 提升到代码块儿的最前面。当运行到 var fullName = 'freemen' 这一行的时候，才赋值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>let const var</title>
</head>
<body>
  <script>
  
   console.log(`fullName`, fullName)
   let fullName = 'freemen';
     </script>
</body>
</html>

在浏览器打开，程序执行发生异常，是一个引用类型的错误。

image.png

let 不存在变量提升。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>let const var</title>
</head>
<body>
  <script>
  
   console.log(`fullName`, fullName)
   const fullName = 'freemen';
     </script>
</body>
</html>

与 let 发生异常一样，引用类型的错误。 image.png

let 和 const 声明的常量和变量都不存在变量名提升这个概念。

块级作用域

使用 var 声明变量

  var fullName = 'freemen';
   function f(){
      console.log(`fullName`, fullName)
      if(false){
         var fullName = "itbbfx"
      }
     }
     f()

fullName 的值为 undefined，原因是在当前 f 函数作用域中，把 var fullName 提升到函数作用域的最前面。当进行变量的提升，该变量就不是全局的变量了，是当前函数作用域中变量提升之后的变量，变量提升，但是值没有提升。

image.png

使用 let 声明变量

  var fullName = 'freemen';
   function f(){
      console.log(`fullName`, fullName)
      if(false){
         var fullName = "itbbfx"
      }
     }
     f()

fullName 的值为 free们 的原因是函数内部的 let 存在块级作用域的概念，即在函数内部声明变量范围生效。不存在变量提升，获得结果是全局值

image.png

暂时性死区

 var fullName = "freemen";
    if(true){
       fullName = 'itbbfx'
      let fullName;
    }

引用类型错误，原因是 if 块作用域中，声明变量之前，不能提前赋值。

image.png

不可重复声明

 function f(){
      let a = '10';
     let a =  "20";
   }

语法错误，a 已经声明了，不需要从发声明。

image.png

5 let 和 const声明的变量不会挂在在全局window对象下面

var fullName ='freemen';
   console.log(`window`, window.fullName)

使用 var 声明变量没有挂载到 window 对象上。

image.png

 let fullName ='freemen';
   console.log(`window`, window.fullName)

使用 let 声明变量没有挂载到 window 对象下面。

image.png

const 注意事项

const fullName;

使用 const 声明的变量，必须立马赋值，否则运行时发生异常。

image.png

const fullName ='itbbfx';
fullName='itbbfx00';

发生类型错误。如果使用 const 声明基本数据类型的值，在进行修改， image.png

修改成引用类型的数据，当修改引用类型中的数据时，不会发生异常。

const fullName =['itbbfx'];
fullName[1]='itbbfx00';
avatar
文章
阅读
粉丝