ECMAScript 6 （浅显入门）

1、let:

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

let不允许在相同作用域内，重复声明同一个变量。

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

let { foo, bar } = { foo: "aaa", bar: "bbb" };

foo // "aaa"

bar // "bbb"

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

let实际上为 JavaScript 新增了块级作用域。

function f1() {

    let n = 5;

    if (true) {

        let n = 10;

    }

    console.log(n); //

}

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

2、const:

const声明一个只读的常量。一旦声明，常量的值就不能改变。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

对于const来说，只声明不赋值，就会报错。const的作用域与let命令相同：只在声明所在的块级作用域内有效。const声明的常量，也与let一样不可重复声明。

3、传统的JavaScript语言，输出模板通常是这样写的。

$('#result').append(

        'There are <b>' + basket.count + '</b> ' +

        'items in your basket, ' +

        '<em>' + basket.onSale +

        '</em> are on sale!'

);

上面这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题。

 $('#result').append(`

  There are <b>${basket.count}</b> items

   in your basket, <em>${basket.onSale}</em>

  are on sale!

`);


4、map:

最新的ES6规范引入了新的数据类型Map,是一组键值对的结构，具有极快的查找速度.

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);

m.get('Michael'); //

//alert( m.get('Michael'))

var m = new Map(); // 空Map

m.set('Adam', 67); // 添加新的key-value

m.set('Bob', 59);

m.has('Adam'); // 是否存在key 'Adam': true

m.get('Adam'); //

m.delete('Adam'); // 删除key 'Adam'

m.get('Adam'); // undefined


5、set:

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

var s = new Set([1, 2, 3, 3, '3']);

//console.log(s)   // Set {1, 2, 3, "3"}

 s.add(4)  //添加

 s.delete(3);//删除

 console.log(s)

6、for ... of:

遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);

for (var x of m) { // 遍历Map

    alert(x[0] + '=' + x[1]);

}

7、ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = 'World') {

        console.log(x, y);

    }

    log('Hello') // Hello World

    log('Hello', 'China') // Hello China

    log('Hello', '') // Hello

8、函数的 length 属性

指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。

 (function (a) {}).length //

 (function (a = 5) {}).length //

 (function (a, b, c = 5) {}).length //

上面代码中，length属性的返回值，等于函数的参数个数减去指定了默认值的参数个数。

比如，上面最后一个函数，定义了3个参数，其中有一个参数c指定了默认值，因此length属性等于3减去1，最后得到2。

 9、rest ：

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {

        let sum = 0;

        for (var val of values) {

            sum += val;

        }

        return sum;

    }

    add(2, 5, 3) //

10、箭头函数

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分

var f = () => 5;

    // 等同于

    var f = function () { return 5 };

    var sum = (num1, num2) => num1 + num2;

    // 等同于

    var sum = function(num1, num2) {

        return num1 + num2;

    };

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

 var sum = (num1, num2) => { return num1 + num2; }

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

11、Class：

class Animal {

        constructor(){

            this.type = 'animal'

        }

        says(say){

            console.log(this.type + ' says ' + say)

        }

    }

    let animal = new Animal()

    animal.says('hello') //animal says hello

    class Cat extends Animal {

        constructor(){

            super()

            this.type = 'cat'

        }

    }

    let cat = new Cat()

    cat.says('hello') //cat says hello

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

巴特西

ECMAScript 6 （浅显入门）

最新文章

热门文章