let,var,const的区别

首先，ECMAScript和JavaScript关系：
      ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。可以简单理解为：ECMAScript是JavaScript的语言规范，JavaScript是ECMAScript的实现和扩展。

1. 块作用域{ }


JS中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。
块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。
 

  1.  <script type="text/javascript">
  2.  {
    1.  　　var a = 1;
    2.  　　console.log(a); // 1
  3. }
  4.  console.log(a); // 1
  5.  // 可见，通过var定义的变量可以跨块作用域访问到。
  6.  (function A() {
    1.  　　var b = 2; 
    2. 　　console.log(b); // 2 
  7. })(); 
  8. // console.log(b); // 报错，
  9.  // 可见，通过var定义的变量不能跨函数作用域访问到
  10.  if(true) {
    1.  　　var c = 3; 
  11. }
  12.  console.log(c); // 3
  13.  for(var i = 0; i < 4; i++) {
    1.  　　var d = 5;
  14. };
  15.  console.log(i); // 4 (循环结束i已经是4，所以此处i为4)
  16.  console.log(d); // 5
  17.  // if语句和for语句中用var定义的变量可以在外面访问到，
  18.  // 可见，if语句和for语句属于块作用域，不属于函数作用域。
  19.  {
    1.  　　var a = 1;
    2.  　　let b = 2;
    3.  　　const c = 3;
    4. 　　 {
      1. 　　　　console.log(a); // 1 子作用域可以访问到父作用域的变量
      2. 　　　　 console.log(b); // 2 子作用域可以访问到父作用域的变量
      3. 　　　　 console.log(c); // 3 子作用域可以访问到父作用域的变量
      4.  　　　　var aa = 11;
      5. 　　　　 let bb = 22;
      6.  　　　　const cc = 33;
    5. 　　 }
    6.  　　console.log(aa); // 11 // 可以跨块访问到子 块作用域 的变量
    7.  　　// console.log(bb); // 报错 bb is not defined
    8.  　　// console.log(cc); // 报错 cc is not defined
  20.  }
  21.  </script>

2. var、let、const的区别


1：var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
2：let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
3：const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
4：同一个变量只能使用一种方式声明，不然会报错
 

  1.  <script type="text/javascript">
  2.  // 块作用域
  3.  {
    1.  　　var a = 1;
    2.  　　let b = 2;
    3.  　　const c = 3;
    4.  　　// c = 4; // 报错
    5.  　　// let a = 'a'; // 报错 注：是上面 var a = 1; 那行报错
    6.  　　// var b = 'b'; // 报错：本行报错
    7. 　　 // const a = 'a1'; // 报错 注：是上面 var a = 1; 那行报错
    8.  　　// let c = 'c'; // 报错：本行报错
    9.  　　var aa;
    10.  　　let bb;
    11.  　　// const cc; // 报错
    12.  　　console.log(a); // 1
    13. 　　 console.log(b); // 2
    14. 　　 console.log(c); // 3
    15. 　　 console.log(aa); // undefined
    16.  　　console.log(bb); // undefined
  4.  }
  5.  console.log(a); // 1
  6.  // console.log(b); // 报错
  7.  // console.log(c); // 报错
  8. // 函数作用域
  9.  (function A() {
    1.  　　var d = 5;
    2. 　　 let e = 6;
    3. 　　 const f = 7;
    4. 　　 console.log(d); // 5
    5.  　　console.log(e); // 6 (在同一个{ }中,也属于同一个块，可以正常访问到)
    6.  　　console.log(f); // 7 (在同一个{ }中,也属于同一个块，可以正常访问到)
  10.  })();
  11.  // console.log(d); // 报错
  12.  // console.log(e); // 报错
  13.  // console.log(f); // 报错
  14.  </script>

 

3：var、let、const的区别详解

最近用到一些ES6的新特性进行开发，在这过程中，发现了ES6与之前的ES5的一些不同点以及该引起我们注意的地方。特此记录下：

1、let是es6新增的声明变量的方式 ，其特点是：
（1）作用域是块级作用域（在ES6之前，js只存在函数作用域以及全局作用域）
 if(1){
  let a=1;
  console.log(a)
}
(2)不存在变量声明提前；
 console.log(b); //ReferenceError: b is not defined

 let b=2;

(3) 不能重复定义

 let a=1;
 let a=2;

console.log(a);//Identifier 'a' has already been declared

(4)存在暂时性死区：可以这样来理解

var a=1；
if(1){
 console.log(a); 
  let a=2;
}

 ① 在一个块级作用域中，变量唯一存在，一旦在块级作用域中用let声明了一个变量，那么这个变量就唯一属于这个块级作用域，不受外部变量的影响；

② 无论在块中的任何地方声明了一个变量，那么在这个块级作用域中，任何使用这个名字的变量都是指这个变量，无论外部是否有其他同名的全局变量；

③ 暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

④ 暂时性死区的意义：让我们标准化代码。将所有的变量的声明放在作用域的最开始。

2、 const一般用来声明常量，且声明的常量是不允许改变的，只读属性，因此就要在声明的同时赋值。const与let一样，都是块级作用域，存在暂时性死区，不存在变量声明提前，不允许重复定义
const A=1；（重新给常量A赋值会报错 ）A=3;// Uncaught TypeError: Assignment to constant variable.(错误：赋值给常量)
3、 var 是es6之前 js用来声明变量的方法，其特性是：
（1）var的作用域是函数作用域，在一个函数内利用var声明一个变量，则这个变量只在这个函数内有效
function test(){
 var a=1;

console.log(a);//函数未调用 输出的是undefined  函数调用输出的是1 

}

console.log(a);//ReferenceError:a is not defined

(2)存在变量声明提前（虽然变量声明提前，但变量的赋值并没有提前，因此下面的程序不会报错，但a的值为undefined）
function test(){
 console.log(a);//undefined
 var a=3/a=3(隐式声明)
}

posted @ 2020-12-03 23:33  调皮小妮  阅读(297)  评论(0)  编辑  收藏  举报