ES6新特性

arrow function

箭头函数表达式的语法比函数表达式更短,并且不绑定自己的this,arguments,super或 new.target。这些函数表达式最适合用于非方法函数,并且它们不能用作构造函数。
下面给出用箭头函数与函数表达式的比较:

    var materials = [
      'Hydrogen',
      'Helium',
      'Lithium',
      'Beryllium'
    ];

    materials.map(function(material) { 
      return material.length; 
    }); // [8, 6, 7, 9]

    materials.map((material) => {
      return material.length;
    }); // [8, 6, 7, 9]

    materials.map(material => material.length); // [8, 6, 7, 9]

实际上,由于以上特性可以看出箭头函数和函数表达式的区别,函数表达式更像一个object。

classes

质上是 JavaScript 现有的基于原型的继承的语法糖[1]

类声明创建

    class Rectangle {
      constructor(height, width) {
        this.height = height;
        this.width = width;
      }
    }

类表达式创建

    let Rectangle = class {
      constructor(height, width) {
        this.height = height;
        this.width = width;
      }
    };

    /* 命名的类 */ 
    let Rectangle = class Rectangle {
      constructor(height, width) {
        this.height = height;
        this.width = width;
      }
    }

let

主要是区分letvar作用域的不同。

    function varTest() {
      var x = 1;
      if (true) {
        var x = 2;  // 同样的变量!
        console.log(x);  // 2
      }
      console.log(x);  // 2
    }

    function letTest() {
      let x = 1;
      if (true) {
        let x = 2;  // 不同的变量
        console.log(x);  // 2
      }
      console.log(x);  // 1
    }

const

类似于其他语言中的常量

    // 定义常量MY_FAV并赋值7
    const MY_FAV = 7;

    // 报错
    MY_FAV = 20;

    // 输出 7
    console.log("my favorite number is: " + MY_FAV);

    // 尝试重新声明会报错 
    const MY_FAV = 20;

    //  MY_FAV 保留给上面的常量,这个操作会失败
    var MY_FAV = 20; 

    // 也会报错
    let MY_FAV = 20;

    // 注意块范围的性质很重要
    if (MY_FAV === 7) { 
        // 没问题,并且创建了一个块作用域变量 MY_FAV
        // (works equally well with let to declare a block scoped non const variable)
        let MY_FAV = 20;

        // MY_FAV 现在为 20
        console.log('my favorite number is ' + MY_FAV);

        // 这被提升到全局上下文并引发错误
        var MY_FAV = 20;
    }


    // MY_FAV 依旧为7
    console.log("my favorite number is " + MY_FAV);

    // 常量要求一个初始值
    const FOO; // SyntaxError: missing = in const declaration

    // 常量可以定义成对象
    const MY_OBJECT = {"key": "value"};

    // 重写对象和上面一样会失败
    MY_OBJECT = {"OTHER_KEY": "value"};

    // 对象属性并不在保护的范围内,下面这个声明会成功执行
    MY_OBJECT.key = "otherValue";


    // 也可以用来定义数组
    const MY_ARRAY = [];
    // It's possible to push items into the array
    // 可以向数组填充数据
    MY_ARRAY.push('A'); // ["A"]
    // 但是,将一个新数组赋给变量会引发错误
    MY_ARRAY = ['B']

参考MDN web docs


  1. 语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会。 ↩

你可能感兴趣的:(ES6新特性)