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>
相关文章
|
2月前
|
JavaScript 前端开发
ES6学习(1)let,const
ES6学习(1)let,const
|
5月前
|
前端开发 JavaScript 开发者
ES6 标准之 let、const 详解
ES6 为JavaScript带来了许多强大的新特性,使开发者能够编写更加简洁、清晰和高效的代码。let和const作为新的变量声明方式,提供了更严格的作用域控制和不可变性,有助于减少错误和提高代码质量。
74 2
ES6 标准之 let、const 详解
|
前端开发
Promise--ES6 的新特性
Promise--ES6 的新特性
67 0
|
6月前
|
JavaScript IDE 开发工具
es6学习笔记(一)let、const
es6学习笔记(一)let、const
|
6月前
|
JavaScript 前端开发
JavaScript开发中ES6+新特性:介绍一下let和const与var的区别。
JavaScript开发中ES6+新特性:介绍一下let和const与var的区别。
57 1
|
自然语言处理 JavaScript 前端开发
每天3分钟,重学ES6-ES12(二)var let const的选择
每天3分钟,重学ES6-ES12(二)var let const的选择
91 0
|
JavaScript 前端开发
ES6——let、const
ES6——let、const
110 0
|
JavaScript 前端开发
【ES6】 let与const详解
【ES6】 let与const详解
|
JavaScript 前端开发 安全
ES6 let 和 const 的使用跟区别,超详细讲解(看这一篇就够了)(二)
ES6 let 和 const 的使用跟区别,超详细讲解(看这一篇就够了)(二)
143 0
|
JavaScript
ES6中let与const的区别
ES6中let与const的区别