ECMAScript6(ES6)新特性

一、ES6简介

ECMAScript6是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出了JavaScript2.0。
ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。

二、let命令

用来声明变量，用法类似于var，但是它所声明的变量，只在let命令所在的代码块内有效不受外部影响，let不像var有“变量提升”现象。
let不允许在相同作用域内，重复声明同一变量。

{    var a = 100;    let b = 200;}console.log("var a 的值" + a);        // var a 的值:100console.log("let b 的值" + b);        // b is not defined

三、const

用来声明变量，但是声明的是常量，一旦声明，常量的值就不能改变，const也有块级作用域。

const obj = 123456;const obj2 = 666;obj = 123;console.log( obj );     //Assignment to constant variable.console.log( obj2 );    //666var obj = 789;console.log( obj );     //789

四、解构（Destructuring）

es6允许按照一定模式，自动解析数组或对象中的值，直接返回一个数组，数组中的值会自动被解析对变量进行赋值。

var {a,b,id,name:Alice} = {id:6,a:1,b:2,name:{a:"1",b:"2",c:"3"}};console.log(Alice);         //{a:"1",b:"2",c:"3"}console.log(Alice.b);       //2

解构赋值的用途：

A. 交换变量的值 （es6更简便，更节省内存空间）

// es5var a = 5, b = 10,temp;temp = a ;a = b ;b = temp ;console.log(a);         // a = 10console.log(b);         // b = 5// es6var c = 5, d = 10;[c,d] = [d,c];console.log(c);         // c = 10console.log(d);         // d = 5

B. 从函数返回多个值，返回一个数组

// 返回数组function funArr(){   return [1 , 2 , 3]}var [a, b, c] = funArr() ;console.log( "a = " + a ,"b = " + b ,"c = " + c); // a = 1 b = 2 c = 3// 返回对象function funObj(){    return {        name : "apple" ,        id : "001" ,        time : "2017"    }}var { id : d , name : n , time : t} = funObj() ;console.log( "id值："+ d +" name值："+ n +" time值：" + t ) // id值：001 name值：apple time值：2017

C. 函数参数

// 有序数组参数function funArr([ a , b , c ]){    console.log( a , b , c );   // 1 2 3}funArr([ 1 , 2 , 3 ]);// 无序对象参数function funObj({ x , y , z }){    console.log( x , y , z  );  // 11 22 33}funObj({ x : 11 , y : 22 , z : 33 });

D. 提取json数据

var jsonData = {     name : "Iphone" ,     id : "001" ,     time : "2017",     product : {a : "apple" , b : "华为" , c : "vivo"}};console.log( jsonData.product.b );  // es5 方法// es6处理后  获取结果相比es5更加方便快捷let { name : n , id : d , time : t , product : pro } = jsonData ;console.log( pro.a );   // appleconsole.log( n );       // Iphoneconsole.log( t );       // 2017

E. 函数参数的默认值
F. 遍历Map解构
G. 输入模块的指定方法

五、箭头函数（inputs => outputs）

//基本用法    var fun = el => el;    //等同于    var fun = function(el){        return el    };// 如下例子    var array = [1, 2, 3];    //传统写法    array.forEach(function(e) {        console.log(e); // 1 2 3    });    //ES6    array.forEach( e => console.log(e));  // 1 2 3//如果箭头函数无参数或者有多个参数时候，则需要使用括号括起来，// 若箭头函数outputs代码块语句多于一条，则用大括号括起来并return，如下：    var fun2 = ()=> v ;    //等同于    var fun2 = function(){        return v ;    }    var fun3 = ( a , b )=> { a + b ; }  // ps：由于大括号解析为代码块，若返回为对象，必须在对象外加上括号。    //等同于    var fun3 = function( a , b){        return a + b ;    }

对于箭头函数this也需要简单说明一下：
箭头函数this永远指向当前对象，也就是箭头函数的this是固定的，永远指向定义时的对象，而不是使用时的对象；
箭头函数没有自己的this，即不可用call()、apply()、bind()强制改变this指向；
箭头函数不可以当做构造函数，不可以使用new；
三变量 arguments、super、new.target 在箭头函数中是不存在：

function fun(){    var arr = [ 1 , 2 , 3 ] ;    arr.forEach(        (e) => {            console.log(e);            console.log(arguments)        }    )}fun( 11 , 22 , 33);

六、class关键字

//类的定义方法    class father {        //ES6中新型构造器        constructor(elem) {            this.elem = elem;        }        //实例方法        sayName() {            console.log("I'm "+this.elem);        }    }    //类的继承    class son extends father {        constructor(elem) {            //直接调用父类构造器进行初始化            super(elem);            //super关键字用于访问父对象上的函数            //super()调用会生成一个空对象，作为context来调用父类的constructor，返回this对象，            // 作为子类constructor的context继续调用构造函数。            console.log(this);        }        program() {            console.log("I'm "+ this.elem);        }    }//测试我们的类var testA = new father('apple'), testB = new son('banana');testA.sayName();        //输出 ‘I'm apple’testB.sayName();        //输出 ‘I'm banana’testB.program();        //输出 ‘I'm banana ’

七、定义方法时候可不加function

var init = {    fun(){       console.log("es6")    }}init.fun();

八、字符串模板

非常便捷的一个功能，反引号（`）代替了以前繁琐的引号+加号的字符串拼接，变量在 ${} 内书写即可。

var arr = ["apple","banana","peal","苹果2","香蕉2","梨子2"];var elem = document.getElementById("box");    elem.innerHTML = `        <p> ${arr[4]} </p>        <p> ${arr[0]} </p>        <p> ${arr[3]} </p>    `;

九、for of值遍历

//es5 ---- for in    var arr = [ 1 , 5 , 3 , 32 , 5 , 6 , 7 , 11 , 19 ];    for(let i in arr ){   //  i 是下标        console.log( `第 ${i} 位是 ${ arr[i] }` );        // 第 0 位是 1        // 第 1 位是 5        // 第 2 位是 3        // ...    }//es6 ----- for of    for(let i of arr){  //  i 是值        console.log(i)        // 1        // 5        // 3        // ...    }

十、模块

// point.js    module "point" {        export class Point {            constructor (x, y) {                public x = x;                public y = y;            }        }    }    // myapp.js    //声明引用的模块    module point from "/point.js";    //这里可以看出，尽管声明了引用的模块，还是可以通过指定需要的部分进行导入    import Point from "point";    var origin = new Point(0, 0);    console.log(origin);

十一、Map 、set

Map是具有极快查找速度的键值对结构。
我们看看Map的使用示例：

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);m.get('Michael'); // 95var m = new Map(); // 空Mapm.set('Adam', 67); // 添加新的key-valuem.set('Bob', 59);m.has('Adam'); // 是否存在key 'Adam': truem.get('Adam'); // 67m.delete('Adam'); // 删除key 'Adam'm.get('Adam'); // undefined

上面的has方法比indexOf速度快。
Set和Map类似，也是存在key的列表，只不过Set中的元素不能够重复。

var s1 = new Set(); // 空Setvar s2 = new Set([1, 2, 3]); // 含1, 2, 3var s = new Set([1, 2, 3, 3, '3']);s; // Set {1, 2, 3, "3"}

可以看到，再次添加的重复数据会被过滤掉。
那么这两种对象的运用场景有哪些呢？
Map可以用来存储键值对，比如姓名和年龄，而Set可以用来存储不能重复的目标，比如学号列表。