es6基本介绍及使用
1.什么是es6
ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
es6入门文档：http://caibaojian.com/es6/
2.node中使用es6
Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
2.1配置文件 .babelrc
Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。该文件用来设置转码规则和插件，基本格式如下：
{
"presets": [],
"plugins": []
}
2.2安装es6转换模块
presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。
// ES2015转码规则
$ npm install --save-dev babel-preset-es2015
// react转码规则
$ npm install --save-dev babel-preset-react
// ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
然后，将这些规则加入.babelrc。
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}
注意，Babel工具和模块的使用，都必须先写好.babelrc。
2.3全局安装命令行工具
Babel提供babel-cli工具，用于命令行转码。
cnpm install babel‐cli ‐g
2.4使用
babel-node js文件名
3.语法新特性
3.1 变量声明let
在es6之前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部，这是函数变量的提升。如下：
function aa() {
if(bool) {
//声明变量
var test = 'hello man'
} else {
console.log(test)
}
}
上面代码实际是：
function aa() {
var test // 变量提升
if(bool) {
test = 'hello man'
} else {
//此处访问test 值为undefined
console.log(test)
}
//此处访问test 值为undefined
}
es6后，通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域(在一个函数内部 ，在一个代码块内部)。如下：
//变量声明let
function test(b){
if(b){
//var 全局变量; let 局部变量
let a = 'abc';
}
//a 在此处访问不到
console.log(a);
}
test(true);
终端运行：node demo1，会报错：ReferenceError: a is not defined
3.2 常量声明
const用于常量声明：
//常量声明，常量不能进行改变
const name = 'abc';
// name = "xyz"; //再次赋值会报错
console.log(name);
3.3 模板字符串
反引号(``)，是es6模板字符串
1.字符串格式化
将表达式嵌入字符串中进行拼接。用${}来界定。
//1.字符串拼接
//ES5
var name = 'abc';
console.log("你好，"+name+"欢迎来到十次方世界");
//ES6 模板字符串
let name2 = 'xyz';
//反引号`是esc键下面的英文符 ${}界定
console.log(`你好，${name2}欢迎来到十次方世界`);
2.换行
//2.换行
//ES5
var info = "Hi \
man!"
//ES6
var info = `<div>
<span>hello world</span>
</div>`
3.4 函数默认参数
es6为函数参数提供了默认值。在定义函数时便初始化函数参数，以便在参数没有被传递前去使用。
//函数默认参数
function test(num = 200){
console.log(num);
}
test();
test(500);
3.5 箭头函数
就是函数的快捷写法。最直观的三个特点：
1.不需要function关键字来创建函数
2.省略return关键字
3.继承当前上下文的 this 关键字
//ES5
var add = function(a,b){
return a+b;
}
//ES6
var add2 = (a,b) => {
return a+b;
}
//当函数体中只有return语句时，可简写成下面
var add3 = (a,b) => a+b;
console.log(add(100,200));
console.log(add2(100,200));
console.log(add3(100,200));
3.6 对象初始化简写
ES6允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。
function f(x, y) {
return {x, y};
}
// 等同于
function f(x, y) {
return {x: x, y: y};
}
f(1, 2) // Object {x: 1, y: 2}
//JSON.stringify()把jsonObject转化为jsonString
console.log(JSON.stringify(people("abc",12)));
除了属性简写，方法也可以简写。
var birth = '2000/01/01';
var Person = {
name: '张三',
//等同于birth: birth
birth,
// 等同于hello: function ()...
hello() { console.log('我的名字是', this.name); }
};
3.7 变量的解构赋值
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
1.数组的解构赋值
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
//解构不成功，变量的值都会等于`undefined`
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
//不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
//默认值
var [foo = true] = [];
foo // true
[x, y = 'b'] = ['a']; // x='a', y='b'
[x, y = 'b'] = ['a', undefined]; // x='a', y='b'
2.对象的解构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
//1.属性名与变量名一致
var { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
var { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
//2.属性名与变量名不一致
var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。注意，采用这种写法时，变量的声明和赋值是一体的。对于let和const来说，变量不能重新声明，所以一旦赋值的变量以前声明过，就会报错。
let foo;
({foo} = {foo: 1}); // 成功
let baz;
({bar: baz} = {bar: 1}); // 成功
let命令下面一行的圆括号是必须的，否则会报错。因为解析器会将起首的大括号，理解成一个代码块，而不是赋值语句。
解构也可以用于嵌套结构的对象：
var obj = {
p: [
'Hello',
{ y: 'World' }
]
};
var { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
注意，这时p是模式，不是变量，因此不会被赋值。
3.8 Spread Operator
扩展运算符（...）组装对象或数组。
//组装数组
const color = ['red','green']
const colorful = [...color,'pink']
console.log(colorful) //[ 'red', 'green', 'pink' ]
//组装对象
const people = {name: 'xyz', address: 'aaaaa'}
const peopleful = {...people, age: 18}
console.log( JSON.stringify(peopleful))//{"name":"xyz","address":"aaaaa","age":18}
3.9 import和export
import导入模块、export导出模块。
创建lib.js
let fn0 = function(){
console.log('fno...')
}
export {fn0}
创建demo9.js
import {fn0} from './lib'
fn0()
注意：node(v8.x)本身并不支持import关键字，所以我们需要使用babel的命令行工具来执行
babel-node demo9
3.10 Promise对象
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
Promise对象有以下两个特点：
1.对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。
2.一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。
基本用法：
ES6规定，Promise对象是一个构造函数，用来生成Promise实例。
var promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。
Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
Promise新建后就会立即执行。
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('Resolved.');
});
console.log('Hi!');
// Promise
// Hi!
// Resolved
Promise新建后立即执行，所以首先输出的是“Promise”。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以“Resolved”最后输出。
下面是一个用Promise对象实现的Ajax操作的例子：
var getJSON = function(url) {
var promise = new Promise(function(resolve, reject){
var client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
function handler() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
});
return promise;
};
getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});
getJSON是对XMLHttpRequest对象的封装，用于发出一个针对JSON数据的HTTP请求，并且返回一个Promise对象。需要注意的是，在getJSON内部，resolve函数和reject函数调用时，都带有参数。
如果调用resolve函数和reject函数时带有参数，那么它们的参数会被传递给回调函数。reject函数的参数通常是Error对象的实例，表示抛出的错误；resolve函数的参数除了正常的值以外，还可能是另一个Promise实例，表示异步操作的结果有可能是一个值，也有可能是另一个异步操作。
