ES6 let 声明变量和旧的var声明变量的区别

「爱情、让人受尽委屈。」 2022-11-05 08:40 300阅读 0赞

## 1、ES6新增的关键字let ##

ES6新增的关键字let`与var` 声明相似。大部分情况下，我们可以用 `let` 代替 `var` 或者 `var` 代替 `let`，都能达到预期的效果：

var message = "Hi";
    alert(message); // Hi

## 2、let和var的不同 ##

### 2.1  let不存在变量提升 ###

var 存在变量提升。即变量在声明之前使用时，值为undefined。js会将声明语句放在所有js代码之前执行。

例如：

console.log(a);var a = 10;//相等于var a;console.log(a);a = 10;

console.log(a);
    let a = 10;//结果：提示错误`Cannot access 'a' before initialization`

### 2.2 let不允许重复声明 ###

`let`不允许在相同的作用域中，重复声明同一个变量。var 可以。

例如：

### 2.3 let暂时性死区 ###

使用变量时，会先寻找同一作用域下的变量。以上代码中，`tmp=abc`会优先寻找到下面的`let tmp`而`let tmp`不存在变量提升，所以提示错误。

总结：在代码块中，使用`let`命令声明变量之前，该变量都是不可用的状态，在语法上，称为“暂时性死区”

例如：

var tmp = 123;
        if(true){//从这个大括号开始到下次变量声明前称为'暂时性死区'
            tmp = "abc";//报错
            let tmp;
            tmp='10';//10
            console.log(tmp);
        }

## 3、let声明变量和var声明变量的作用域区别 ##

**1、var声明只有全局作用域和局部作用域（函数作用域），没有块级作用域。 let声明存在块级作用域**

**var 没有块级作用域的缺点：**

**1、内部变量可能会覆盖外层的变量**

**例如：**

var date = new Date();
    function f(){
        console.log(date);
        if(false){
        	var date = "今天是个好日子"  
        }
    }
    f();//undefined

`if`代码块外部原意为使用外层的`date`，内部使用内部的`date`。但是函数执行后，结果却为`undefined`，原因是存在变量的提升。导致内部的`date`覆盖了外部的`date`变量

**2、for循环中的计数变量泄露为全局变量。**

例如：

var arr=[1,2,3,4];
        for (var i = 0; i < arr.length; i++) {
           console.log(arr[i]);
        }

for·\`循环中的变量\`i\`只是用来作为计数使用，但是for循环执行完成后，它没有消失，而是作为全局变量仍然存在。以后可能不会再使用，造成资源的浪费。

### 3、let的块级作用域 ###

let定义的变量遇到for循环的大括号会形成作用域或者在大括号中形成块级作用域

var 循环中的i：

var a = [];
        for (let i = 0; i < 10; i++) {
            a[i] = function () {
                console.log(i);
            }
        }
        a[6](); //6

let：

for (let i = 0; i < 3; i++) {
           let i = "abc";
           console.log(i);
        }

结果：输出3次abc。

原因：在代码块中的变量i与for循环中的变量i不在用一个作用域。