ECMAScript6中的常用新增语法

ECMAScript 6(ES6) 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。

ECMAScript 6的原则是不改变原理的基础上，让API变的更简化。

下面就简单介绍在ES6中常用的几种语法。

1. Let和Const

ES6推荐使用let声明局部变量。原来使用var声明变量，会导致出现声明提前的现象，并且没有块级作用域。而使用let声明变量后阻止了变量提升的现象，并且让let所在的花括号内形成块级作用域。建议在开发中优先使用const。

比如：

	var x = '全局变量';
	{
  		let x = '局部变量';
  		console.log(x); // 局部变量
	}
	console.log(x); // 全局变量

而const则表示声明常量，const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改。

比如：

	const a = 1;
	a = 0 ;//报错

注意：

（1） let 关键词声明的变量不具备变量提升（hoisting）特性；
（2） let 和 const 声明只在最靠近的一个块中（花括号内）有效；
（3） 当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING；
（4） const 在声明时必须被赋值；
（5） const常量是指对象的指向不能修改，但是对象内的属性可以改变。

2. 模版字符串

在ES6之前，往往这么处理模板字符串：通过“\”和“+”来构建模板（" + name + ", " + seatNumber + ", " + sex + "）。

而对于ES6来说，新的模版字符串则以反引号表示普通的字符串，也可以表示多行字符串，同时还可以插入变量（用${}来界定）。

比如：

	let str1 = '名字:'+name + ' ,今年'+age+'岁';
	let str2 = `名字:${name}, 今年${age}岁`;

3. 参数增强

在ES6中丰富了参数的用法。

3.1 默认参数

在ES6中可以给函数的形参提前设置一个默认值，调用函数时，如果没有赋值实参，就自动启用默认值代替。

语法：

	function fun(形参1, 形参2,..., 形参n=默认值){
		函数体;
	};

注意：

在函数中，带默认值的形参必须出现在参数列表的末尾，而且通常只有一个（因为如果默认值出现在中间位置，可能会因为实参数量和顺序问题曹成歧义）。

3.2 剩余参数

在函数中，通常有一个类数组对象arguments来接住实参，但由于该对象不是纯正的数组类型，导致数组中的API不能使用，并且该类数组对象只能接住全部的实参值，不能有选择的筛选实参列表，因此ES6中推荐使用剩余参数来解决问题。

语法：

	function fun(形参1, 形参2,...数组名){
    	//数组中就接住了除形参1,形参2以外的剩余的实参
      	//且"数组"是纯正的数组类型，可以使用所有数组家的API
    };

使用剩余参数，就可以使用数组中的所有API，并且可以有选择的获得剩余参数。

3.3 散播

在ES6中，可以使用散播（spread）来专门打散数组类型参数为单个值。虽然使用apply()也可以打散数组类型的参数，但是，它还会将this对象的值更改，因此在ES6中推荐使用散播（spread）。

语法：

//在调用函数时，现将数组打散后，再将数组值分别传递给函数
函数名(...数组名);
//相当于：函数名(数组[0],数组[1],数组[2],...);

4. 箭头函数

箭头函数（Arrow Functions）在ES6中就是函数一种简写形式，能简写一切匿名函数。

使用箭头函数的步骤：

（1） 将function关键字变为箭头=>;
（2） 如果函数的参数只有一个，则可以省略包裹参数的圆括号——()；
（3） 如果函数体中只有一句话，则可以省略大括号——{}；
（4） 如果函数体中只有一句话且为return语句，则return关键字必须省略。

注意：

当使用箭头函数之后，箭头函数内的this对象的指向将向外层作用域中一层层查找，直到查找到有this的定义时，指向该this。

因此，如果函数中的无与this相关的函数体或者希望函数内外的this指向相同时可以使用箭头函数，但如果不希望函数体中的this与外部有关时则最好不要使用箭头函数。

5. 解构

解构是将大的对象（泛指）中的部分成员提取后单独使用的过程。

5.1 数组解构

语法：（注意要下标对下标）

	  let arr=[elem1, elem2,...];
           		||    ||
      let [    变量1,变量2,...]=arr;
   	  变量1=elem1;
  	  变量2=elem2;

比如：

	let arr = [1, 2, 3];
	let [a, b, c] = arr;
	console.log(a,b,c) 
	// 1,2,3

5.2 对象解构

语法：（注意要属性对属性）

	var obj={属性1:值1,    属性2:值2,  ... };
                 ||            ||
    var {	属性1: 变量1, 属性2:变量2, ... }=obj;
    变量1=值1;
    变量2=值2;

比如：

	const MYOBJ = {
    	className: 'trigger-button',
    	loading: false,
    	clicked: true,
	};
	const { loading, clicked } = MYOBJ;
	console.log(loading, clicked);
	// false,true

5.3 参数解构

参数解构其实就是对象解构在函数参数传递时的应用。
当在函数中的多个形参都不确定是否有值时，就可以使用参数解构。

语法：

//在定义函数时：将所有的形参都定义在对象结构中。
	function fun({
		url:url, 
        type:type, 
        data:data, 
        dataType:dataType
     }){
		函数体;
     };
//可简写为：function fun({url, type, data, dataType}){};

//在调用函数时：所有的实参都要放在一个对象结构中整体传入函数。
	 fun({
       url:"http://localhost:3000/index",
       type:"get",
       //data:,
       dataType:"json"
     });
//	其结果实际上是：
//	   形参url ="http://localhost:3000/index
//     形参type="get"
//     形参data=undefined
//     形参dataType="json"

使用参数结构，可以忽略参数个数和参数一一对应的顺序关系。当实参中没有与形参相对应的参数时，则在实参中，该参数为undefined。

6. Promise

在JavaScript程序的编写中，有时会因为回调函数的嵌套层级太深导致代码可读性差而烦恼，这种多层回调函数的嵌套被称为回调地狱（Callback Hell）。为了解决回调地狱的问题，可以使用ES6中的Promise（承诺）。Promise是异步编程的一种解决方案。

Promise是一个构造函数，在Promise容器中，可以存放一个异步任务。该异步任务有三种状态，分别是正在执行（Pending）、执行成功（resolved）、执行失败（rejected）。需要注意的是，Promise本身不是异步的，但其内部往往都是封装一个异步任务，而且异步任务的状态只能是三种中的一种。

实际的示例如下图所示：

这里使用是较复杂的形式来用Promise（承诺）定义异步函数：
语法：

	function fun(){
    	return new Promise(function(open){
       		异步任务的代码片段
			… …
         	在异步任务最后一句话之后，自动执行:open()
     	})
   	}

其中，return:是为了让函数外部知道函数fun支持Promise；new Promise()是造一个带开关和挂钩的盒子，用于与下一项任务连接；而function()则是必须的，因为new Promise中封装的是一段代码片段，所以必须放在function中；open则是new Promise附赠的开关。打开开关，继续指向下一项任务。如果不开开关，则停留在当前任务不再继续执行，默认是打开的。

异步函数执行时：

   fun().then(第二项任务函数).then(...) ... 

如果第二项任务函数也是支持promise的，则可继续使用.then()（继续异步下去）。.then仅是一个连接器，将下一项任务函数，连接到前一项任务的open开关上。当前一项任务打开开关open()时，自动执行.then中连接的下一项任务函数。

执行的过程大致是：上一项任务的open()=>.then(下一项任务)=>下一项任务()。