前端es6语法---let和const

  各位小伙伴们大家好，最近在复习前端ES6的相关知识点，主要跟的视频是b站大学的黑马的相关视频，在本篇文章中记录一下相关的知识点，大家可以参考一下，有问题也欢迎大家指出，附上b站链接 黑马ES6 ┗|｀O′|┛

🚗let

  let是ES6中新增的声明变量的关键字。主要的作用就是声明变量。

🚓用法

  1.声明单个变量

let a;

  2.也可以同时给声明单个变量

let a,b,c,d;

  3.同时也可以赋值

let a = 100;

🚓声明特性

  1.不能重复命名，当我们重复给a命名时，会报错！！

  <script>
    let a = 1;
    let a = 2;
  </script>

  浏览器中的控制台也会报错

  2.块级作用域
  let声明的变量只在所处的块级作用域有效，也就是所声明的大括号内。

 <script>
    if(true){
      let a = 100;
    }
    console.log(a);
  </script>

  可以看到，我们在if语句中定义了一个a并赋值为100，但是我们在这个if的作用域外（也就是大括号的外面）打印了a，可以发现浏览器报错，报错内容为‘a is not defined’，也就是a这个变量没有定义。

注意：使用let关键字声明变量的时候才具有块级作用域，但如果声明变量用的时var的话就不具备这个块级作用域的特性。

  <script>
    if(true){
      let a = 100;
      var b = 200;
    }
    console.log(b);
    console.log(a);
  </script>

  可以看到，在if语句中分别用let和var定义了a,b并进行了赋值，然后在大括号外面分别对这两个值进行打印。

  在浏览器的控制台中，使用var定义的b可以成功拿到，但用let定义的a却并没有取到，所以当使用var进行定义的时候就不具备块级作用域的特性。
  3.不存在变量提升
  在这里引入一下变量提升的概念，当我们使用var定义变量的时候，这个变量会被提升到作用域的顶端，也就是将这个变量声明提升到他所在作用域的最开始的部分。

<script>
  console.log(a);
  var a = 100;
</script>

可以查看上述代码，我们在a定义之前就对齐进行打印，可以发现并不报错，并且有值，而且值为undefine，因此a这个变量就在这里进行了提升，所以上述代码实际执行的顺序为。

<script>
      var a
      console.log(a);
      a = 100;
 </script>

但使用let定义的变量由于不存在变量提升，所以如果我们先进行打印在对其定义的话就会报错，如下。

<script>
  console.log(a);
  let a = 100;
</script>

  3.具有暂时性死区特性
  在使用let进行定义变量的时候，在定义之前不能使用，这个就称为一个暂时性死区，如果在定义之前使用就会进行报错。

翻译：未捕获的引用错误：在初始化之前无法访问“a”

🚓优点

  可以防止循环变量变成全局变量，也就是我们在使用循环的时候，用let定义变量之后，在循环体外面就不再能访问到这个变量。

<script>
      for (var i = 1; i < 2; i++) {}
      console.log(i);
      for (let j = 1; j < 2; j++) {}
      console.log(j);
 </script>

  在第一个for循环中用var定义了i，然后在for循环的循环体外面打印这个i发现其实说可以访问到了这其实是不太合理的，但当我们使用let进行定义变量的时候，在循环体的外面进行打印，可以看到访问不到。

🚗const

  在ES6中除了新增了let之外还新增了const关键字。其作用就是声明常量，这里的常量就是值值不能变化的量。

🚚用法

  用于声明常量

const a = 100；

  在这里有几个需要注意的点，就是在使用const定义常量的时候，必须赋值否则就会报错，而且使用const定义的常量的值不能进行修改，否则也会报错。

🚚特性

  1.具有块级作用域
  const与let一样都具有块级作用域，只在所处的块级作用域有效，也就是所声明的大括号内。

 <script>
    if(true){
      const a = 100;
    }
    console.log(a);
  </script>

  可看上述代码，与let相同，我们在if语句中定义了一个常量a，但是我们在这个if的作用域外（也就是大括号的外面）打印了a，可以发现浏览器报错，报错内容为‘a is not defined’，也就是a这个常量没有定义。
  2.必须赋初始值

   <script>
      const a;
    </script>

  可以看到在上述代码中定义了一个a，但并没有赋初始值，这时候到浏览器的控制台中可以发现其报错。

  3.赋值后，值不能更改
  在这里主要分为了两种情况，一种是对于基本数据类型来说，一旦赋值就不能更改如数值和字符串，但对于复杂数字类型来说可以更改数据结构内部的值，如数组或者对象。

<script>
  const a = 100;
  a = 200
</script>

  比如在上述代码中，先定义了一个常量a，后面对其值进行改变，可以发现这是不行的，浏览器控制台会进行报错。

  然后再演示一下第二种情况，更改数据的结构。

<script>
  const arr = [1,2];
  arr[0] = a;
  arr[1] = b;
  console.log(arr);
</script>

  查看上述代码，定义了一个数组arr，里面有值1，2，然后我们对里面的值分别进行改变，在这里的操作我们只是对其结构进行了更改。可以看到没有报错且可以正常取到数组arr的值。

  但如果我们对数组arr重新赋值的话，就会更改其在内存中的存储地址，这样是不允许的，在浏览器的控制台中会进行报错。

<script>
  const arr = [1,2];
  arr[0] = 'a';
  arr[1] = 'b';
  console.log(arr);
  arr = [3,4];
</script>

🚗let、const、var的区别

1.使用var声明变量的时候，其作用域在所在的函数内，而且存在变量提升
2.使用let声明变量的时候，他所声明的变量的作用域在该语句所在的代码块中，并且不存在变量提升的
3.使用const声明的是常量，并且在声明时必须赋初始值，而且在赋完初始值后不能对其进行修改，同样用const声明的常量也不存在变量提升