zoukankan      html  css  js  c++  java
  • ES6语法

    最常用的ES6特性

    let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments

    let, const

    这两个的用途与var类似,都是用来声明变量的,但在实际运用中他俩都有各自的特殊用途。
    首先来看下面这个例子:

    下面代码中,变量ivar命令声明的,在全局范围内都有效,所以全局只有一个变量i。每一次循环,变量i的值都会发生改变,而循环内被赋给数组a的函数内部的console.log(i),里面的i指向的就是全局的i。也就是说,所有数组a的成员里面的i,指向的都是同一个i,导致运行时输出的是最后一轮的i的值,也就是10。

    var a = [];
    for (var i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 10

    换成let声明的变量仅在块级作用域内有效,只在该for循环里生效,所有输出的是6

    var a = [];
    for (let i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 6

    上面代码中,变量ilet声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。你可能会问,如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。

    另外,for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。

    for (let i = 0; i < 3; i++) {
      let i = 'abc';
      console.log(i);
    }

    用var声明变量时,若声明的内容在调用之后,会抛出undefined提示,但用let声明时,若出现这种状况,是会直接报错的。
    if (true) {
      // TDZ开始
      tmp = 'abc'; // ReferenceError
      console.log(tmp); // ReferenceError
    
      let tmp; // TDZ结束
      console.log(tmp); // undefined
    
      tmp = 123;
      console.log(tmp); // 123
    }

    ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

    下面这种场景,内层变量可能会覆盖外层变量。因为if函数虽然没被执行但是他声明的变量被提到函数体的头部,相当于被提前解析,只是相当于没赋值而已,所以f()得到的值是未定义。

    var tmp = new Date();
    
    function f() {
      console.log(tmp);
      if (false) {
        var tmp = 'hello world';
      }
    }
    
    f(); // undefined

    上面代码的原意是,if代码块的外部使用外层的tmp变量,内部使用内层的tmp变量。但是,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。

     es6的块级作用域,举例子

    function f1() {
      let n = 5;
      if (true) {
        let n = 10;
      }
      console.log(n); // 5
    }

    上面的函数有两个代码块,都声明了变量n,运行后输出5。这表示外层代码块不受内层代码块的影响。如果使用var定义变量n,最后输出的值就是10。

  • 相关阅读:
    基于bootstrap分页
    encache学习教程
    java异常和spring事务注解
    JSP自定义标签开发入门
    spring junit
    vs与数据库连接查询
    winfrom文本文档打开
    面向对象 封装
    面向对象 概念
    DW 游记代码
  • 原文地址:https://www.cnblogs.com/javenlee/p/7001027.html
Copyright © 2011-2022 走看看