ES6新特性：let关键字详解

news2024/10/6 9:24:32

文章目录

1 声明提升
2 作用域
3 重复声明

在JavaScript中，let 和 var 都是声明变量的关键字，但在用法和作用域方面有一些区别。

let 是ES6引入的新的声明变量的关键字，它与 var 相比，更加严格，语法更加规范，并且可以避免一些常见的错误。

1 声明提升

let 不存在变量提升

使用var关键字声明的变量会被提升到当前作用域的顶部，而使用let声明的变量不会。所以，使用var声明的变量可以在声明之前使用，但是使用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>ES6新特性：let关键字</title>
</head>

<body>
    <script>
        console.log('myVar:', myVar);    //myVar: undefined
        var myVar = '我是var声明的变量';
        console.log('myVar:', myVar);    //myVar: 我是var声明的变量

        console.log('myLet:', myLet);    //报错，Cannot access 'myLet' before initialization
        let myLet = '我是let声明的变量';
        console.log('myLet:', myLet);    //myLet: 我是let声明的变量
    </script>
</body>

</html>

2 作用域

let声明的变量具有块级作用域

使用var声明的变量有函数作用域或全局作用域，而使用let声明的变量有块级作用域。

块级作用域是指变量只在定义它们的块内部可见。这意味着，使用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>ES6新特性：let关键字</title>
</head>

<body>
    <script>
        {
            var myVar = '我是var声明的变量';
            let myLet = '我是let声明的变量';
        }
        console.log('myVar:', myVar);    //myVar: 我是var声明的变量
        console.log('myLet:', myLet);    //报错：myLet is not defined
    </script>
</body>

</html>

3 重复声明

let 不允许重复声明变量

使用var声明的变量可以被重复声明，而使用let声明的变量不能被重复声明。

重复声明是指在同一个作用域内，使用相同的变量名再次声明变量。如果使用var声明同名变量，则会覆盖之前的声明。如果使用let声明同名变量，则会抛出下面的错误。
```
 Identifier 'myLet' has already been declared
```

在这里插入图片描述