ES6新特性:let关键字详解

文章目录

  • [1 声明提升](#1 声明提升)
  • [2 作用域](#2 作用域)
  • [3 重复声明](#3 重复声明)

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

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

1 声明提升

  • let 不存在变量提升

    使用var关键字声明的变量会被提升到当前作用域的顶部,而使用let声明的变量不会。所以,使用var声明的变量可以在声明之前使用,但是使用let声明的变量必须在声明之后使用。

html 复制代码
<!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声明的变量只能在声明它的块级作用域内使用,而不会影响外部作用域。

html 复制代码
<!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声明同名变量,则会抛出下面的错误。

    html 复制代码
     Identifier 'myLet' has already been declared



总之,以后声明变量,用 let 就对了!

相关推荐
花生侠21 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯28 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调35 分钟前
记一次 Vite 下的白屏优化
前端·css
threelab36 分钟前
three案例 Three.js波纹效果演示
开发语言·javascript·ecmascript
1undefined237 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js