es6基本介绍及使用

1.什么是es6

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

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实例，表示异步操作的结果有可能是一个值，也有可能是另一个异步操作。