ES6新特性:let和const

简介: ES6新特性:let和const

说明


let与const


let 或者 const,会将声明关进一个小黑屋也是TDZ(暂时性死区),只有执行到变量声 明这句语句时,变量才会从小黑屋被放出来,才能安全使用这个变量。


而var存在变量提升的问题(即会将声明提升到函数或全局作用域的顶部)。


var与let


  • var 可以跨域,let不可以


  • var 可以多次声明, let只能声明一次


  • var 会变量提升,let 不存在变量提升


例如下面例子




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        {
            var a = 1;
            let b = 0;
        }
        // console.log(a);
        // console.log(b); // 报错 b is not defined
        // var 可以跨域,let不可以
        // var 可以多次声明, let只能声明一次
        // var 会变量提升,let 不存在变量提升 
        // 比如: 
    console.log(x); // undefined
    var x = 1;
    console.log(y); // error: y is not defined
    let y = 0;
    </script>
</body>
</html>


我们可以参考下面的例子:


实例


var



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>ES6新特性学习-(1)let和const</title>
  </head>
  <body>
    <script>
      //var存在变量提升的问题(即会将声明提升到函数或全局作用域的顶部)
      for (var i = 0; i < 5; i++) {
        console.log(i); //控制台依次输出0~4
      }
      console.log("循环外" + i); //控制台输出5
    </script>
  </body>
</html>


let



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>ES6新特性学习-(1)let和const</title>
  </head>
  <body>
    <script>
      //let声明的变量,只在let命令所在的代码块内有效
      for (let j = 0; j < 5; j++) {
        console.log(j); //控制台依次输出0~4
      }
      console.log("循环外" + j); //控制台输出undefind
    </script>
  </body>
</html>


const



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>ES6新特性学习-(1)let和const</title>
  </head>
  <body>
    <script>
      //const声明的变量是常量,不能被修改,类似java中的final关键字
      const a = 1;
      console.log(a); //控制台输出1
      //给a重新赋值
      a = 2;
      console.log(a); //控制台输出:  Assignment to constant variable.不看被修改
    </script>
  </body>
</html>
相关文章
|
人工智能 数据安全/隐私保护
利用D-ID让你的照片能说话,制作口播视频
利用D-ID让你的照片能说话,制作口播视频
1233 0
利用D-ID让你的照片能说话,制作口播视频
|
存储 大数据 云计算
企业级服务:技术实现与业务价值
企业级服务:技术实现与业务价值
318 4
|
机器学习/深度学习 供应链 TensorFlow
使用Python实现深度学习模型:智能物流与供应链管理
【8月更文挑战第1天】 使用Python实现深度学习模型:智能物流与供应链管理
593 2
使用Python实现深度学习模型:智能物流与供应链管理
|
机器学习/深度学习 数据采集 TensorFlow
使用TensorFlow进行模型训练:一次实战探索
【8月更文挑战第22天】本文通过实战案例详解使用TensorFlow进行模型训练的过程。首先确保已安装TensorFlow,接着预处理数据,包括加载、增强及归一化。然后利用`tf.keras`构建卷积神经网络模型,并配置训练参数。最后通过回调机制训练模型,并对模型性能进行评估。此流程为机器学习项目提供了一个实用指南。
|
网络协议 网络架构
动图 | 6张图让你秒懂“ARP中间人攻击”原理,堪称史诗级解释!
动图 | 6张图让你秒懂“ARP中间人攻击”原理,堪称史诗级解释!
752 0
|
机器学习/深度学习 数据采集 算法
Python基于Lasso特征选择、GM算法和SVR回归算法进行财政收入影响因素分析及预测
Python基于Lasso特征选择、GM算法和SVR回归算法进行财政收入影响因素分析及预测
|
存储 人工智能 Java
进制转换在C/C++/Java/Kotlin中的应用(详细版)(上)
进制转换在C/C++/Java/Kotlin中的应用(详细版)
228 0
|
存储 缓存 物联网
新EDPB指南:不只是Cookie
保障中国企业符合《个人信息保护法》合规,方案包括梳理基线、发现敏感信息、简化评估工作流、快速响应权利请求、满足告知同意要求,以及有效保护敏感数据。用九智汇整合自动化工具和规则引擎,确保高效风险评估、合规证据链建立,进一步保障数据安全。
287 1
|
存储 运维 Dubbo
微服务之间的最佳调用方式,你会了吗(二)
微服务之间的最佳调用方式,你会了吗
|
SQL 前端开发 JavaScript
解锁会议审批新境界:探索layui带签字功能的无缝体验!
解锁会议审批新境界:探索layui带签字功能的无缝体验!
3220 0

热门文章

最新文章