什么是ES6,为什么使用它?ES6的新增语法—let

Posted 柠夏呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了什么是ES6,为什么使用它?ES6的新增语法—let相关的知识,希望对你有一定的参考价值。

什么是ES6?

ECMAScript 6(以下简称ES6)是javascript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。

为什么使用ES6?

每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方。

  1. ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。
  2. 变量提升特性增加了程序运行时的不可预测性
  3. 语法过于松散,实现相同的功能,不同的人可能会写出不同的代码

ES6的新增语法—let

let的三大特性:
   1.用于声明变量的的关键字,必须先声明再使用
   2.let声明的变量具有块级作用域
   3.暂时性死区特性

下面我通过案例向童靴们解析:

<!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>使用let关键字声明变量</title>
  </head>
  <body>
    <script>
      //let关键字用于声明变量的,使用let关键字声明的变量具有块级作用域
      let num = 10;
      console.log(num);

      //错误使用let(let声明变量只在所处于的块级有效)
      if (true) {
        let nums = 100;
      }
      console.log(nums); //nums is not defined
    </script>
  </body>
</html>

浏览器控制器运行如下:

注意:var用于声明全局变量,不具备块级作用域

 // 在一个大括号中
 // 使用let关键字声明的变量才具有块级作用域,var关键字是不具备这个特点的
            if(true) {
              let a = 100;var b = 200;
            }
            console.log(a);
            consoLe.log(b);

浏览器控制器运行如下:

      // 防止循环变量变成全局变量
      for (let i = 0; i < 2; i++) {

      }
      console.log(i);// 浏览器控制器运行如右:i is not defined

注意:使用let关键字声明的变量具有暂时性死区特性

      //使用let关键字声明的变量具有暂时性死区特性;
      var num = 10;
      if (true) {
        consoLe.log(num);
        let num = 20;
      }

浏览器控制器运行如下:

最后附上所有代码:

<!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>使用let关键字声明变量</title>
  </head>
  <body>
    <script>
      //let关键字用于声明变量的,使用let关键字声明的变量具有块级作用域
      let num = 10;
      console.log(num);

      //错误使用let(let声明变量只在所处于的块级有效)
      if (true) {
        let nums = 100;
      }
      console.log(nums); //nums is not defined

      // 在一个大括号中
      // 使用let关键字声明的变量才具有块级作用域,var关键字是不具备这个特点的
      if (true) {
        let a = 100;
        var b = 200;
      }
      console.log(b);
      consoLe.log(a);

        // 防止循环变量变成全局变量
        for (let i = 0; i < 2; i++) {

        }
        console.log(i);//i is not defined

      //使用let关键字声明的变量具有暂时性死区特性;
      var num = 10;
      if (true) {
        consoLe.log(num);
        let num = 20;
      }
    </script>
  </body>
 </html>

以上是关于什么是ES6,为什么使用它?ES6的新增语法—let的主要内容,如果未能解决你的问题,请参考以下文章

ES6 新增语法

ES6新增语法(letvarconst区别与联系)

es6新增在vue中常用语法

ES6新增语法——Promise详解

ES6语法和应用

ES6新增语法——letconstvar的区别