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 IDE 开发工具
es6学习笔记(一)let、const
es6学习笔记(一)let、const
|
9月前
|
前端开发
Promise--ES6 的新特性
Promise--ES6 的新特性
50 0
|
5月前
|
JavaScript 前端开发
JavaScript开发中ES6+新特性:介绍一下let和const与var的区别。
JavaScript开发中ES6+新特性:介绍一下let和const与var的区别。
29 1
|
11月前
|
自然语言处理 JavaScript 前端开发
每天3分钟,重学ES6-ES12(二)var let const的选择
每天3分钟,重学ES6-ES12(二)var let const的选择
65 0
|
JavaScript 前端开发
ES6——let、const
ES6——let、const
91 0
|
JavaScript 前端开发
【ES6】 let与const详解
【ES6】 let与const详解
ES6 从入门到精通 # 02:let 和 const 命令
ES6 从入门到精通 # 02:let 和 const 命令
56 0
ES6 从入门到精通 # 02:let 和 const 命令
|
JavaScript
ES6中let与const的区别
ES6中let与const的区别
|
JavaScript 前端开发 安全
es6必会之let && const
es6必会之let && const
|
JavaScript 前端开发