ECMAScript 6.0 简要学习

　　由于在学习vue的时候有许多自己不懂的语法，于是简单的学习一下ES6。

1.ES简介

　　ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

　　ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能

　　JavaScript 是大家所了解的语言名称，但是这个语言名称是商标（ Oracle 公司注册的商标）。因此，JavaScript 的正式名称是 ECMAScript 。1996年11月，JavaScript 的创造者网景公司将 JS 提交给国际化标准组织 ECMA（European computer manufactures association，欧洲计算机制造联合会），希望这种语言能够成为国际标准，随后 ECMA 发布了规定浏览器脚本语言的标准，即 ECMAScript。这也有利于这门语言的开放和中立。

2.ES6新特性

　　在这里简要的学习一下ES6的比较重要的新特性，在自己的平时工作中也没有过多的用到的ES6简要记录。

1.let与const关键字(重要)

　　这两个关键字都是声明变量的关键字，其与var声明的变量有一定的区别，区别如下：

1.let解释

(1)let 声明的变量只在 let 命令所在的代码块内有效

{
  let a = 0;
  var b = 1;
}
a  // ReferenceError: a is not defined
b  // 1

(2)let 只能声明一次 var 可以声明多次:

let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4

(3)let 不存在变量提升，var 会变量提升:

console.log(a);  //ReferenceError: a is not defined
let a = "apple";
 
console.log(b);  //undefined
var b = "banana";

2.const关键字

　　const声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。有点类似于java的final修饰的变量，是引用不可变。

　　ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错。

2.解构赋值

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

1.数组模型的解构

基本：
let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

嵌套：
let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

忽略：
let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

不完全解构：
let [a = 1, b] = []; // a = 1, b = undefined

剩余运算符：
let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

字符串等：
let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

2.对象模型的结构

基本：
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

剩余运算符：
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

解构默认值：
let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

JS也是引用传值：

let user = {username: "zs", age: 25, likes: ["篮球", "羽毛球"]}
var {username} = user
// 等价于 var username = user.username
console.log("username 1", username)

username = "ls"
console.log("username 2", username)
console.log("user 1", user)
console.log("user ~~~~~")

var {likes} = user
console.log("likes 1", likes)
likes.push("乒乓球")
console.log("likes 2", likes)
console.log("user 2", user)

// 结果
username 1 zs
username 2 ls
user 1 { username: 'zs', age: 25, likes: [ '篮球', '羽毛球' ] }
user ~~~~~
likes 1 [ '篮球', '羽毛球' ]
likes 2 [ '篮球', '羽毛球', '乒乓球' ]
user 2 { username: 'zs', age: 25, likes: [ '篮球', '羽毛球', '乒乓球' ] }

3.Symbol类型

ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

ES6 数据类型除了 Number 、 String 、 Boolean 、 Objec t、 null 和 undefined ，还新增了 Symbol 。

　　Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。可以接受一个字符串作为参数，为新创建的 Symbol 提供描述，用来显示在控制台或者作为字符串的时候使用，便于区分。

            let sy = Symbol("KK");
            console.log(sy); // Symbol(KK)
            console.log(typeof(sy)); // "symbol"

            // 相同参数 Symbol() 返回的值不相等
            let sy1 = Symbol("kk");
            console.log(sy === sy1); // false

4.Map与Set

　　Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。Set 对象存储的值总是唯一的。

　　有点类似于Java的Map与Set。

5.Reflect 与 Proxy

　　Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。

　　Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。

　　Reflect 可以用于获取目标对象的行为，它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的。

　　有点类似于Java的反射和代理。

6.字符串

　　新增了一些方法。包括判断包含，是否以指定字符串结束、开始等操作。更加趋向于apache的StringUtils。

　　也扩展了一些东西。

(1)字符的 Unicode 表示法

　　ES6 加强了对 Unicode 的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。

console.log("\u0061"); // a

(2).字符串的遍历器接口

　　ES6 为字符串添加了遍历器接口，使得字符串可以被for...of循环遍历。

    for(let codePoint of 'foo') {
        console.log(codePoint)
    }
    // f
    // o
    // o

(3)直接输入 U+2028 和 U+2029

    console.log('中' === '\u4e2d') // true

(4)JSON.stringify() 的改造

　　根据标准，JSON 数据必须是 UTF-8 编码。但是，现在的JSON.stringify()方法有可能返回不符合 UTF-8 标准的字符串。

(5)模板字符串

　　模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

例如：

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

    $('#app').html(`
        <ul>
          <li>first</li>
          <li>second</li>
        </ul>
        <p>
            这里是段落
        </p>
    `);

模板字符串中嵌入变量，需要将变量名写在${}之中。

        <div id="app">
        </div>
        <script>
    let user = {name: 'zs'};
    
    $('#app').html(`
        <ul>
          <li>first</li>
          <li>second</li>
        </ul>
        <p>
            这里是段落${user.name}
        </p>
    `);
</script>

结果：

大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

        <script>
            let x = 1;
            let y = 2;

            console.log(`${x} + ${y} = ${x + y}`)
            // "1 + 2 = 3"

            console.log(`${x} + ${y * 2} = ${x + y * 2}`);
            // "1 + 4 = 5"

            let obj = {
                x: 1,
                y: 2
            };
            console.log(`${obj.x + obj.y}`);
            // "3"
        </script>

模板字符串之中还能调用函数。

            function fn() {
                return "Hello World";
            }

            `foo ${fn()} bar`
            // foo Hello World bar

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。
如果模板字符串中的变量没有声明，将报错。
由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出。

            // 变量place没有声明
            let msg = `Hello, ${place}`;
            // 报错

            `Hello ${'World'}`
            // "Hello World"

模板字符串甚至还能嵌套。

            const tmpl = addrs => `
              <table>
              ${addrs.map(addr => `
                <tr><td>${addr.first}</td></tr>
                <tr><td>${addr.last}</td></tr>
              `).join('')}
              </table>
            `;
            
            const data = [
                { first: '<Jane>', last: 'Bond' },
                { first: 'Lars', last: '<Croft>' },
            ];
            
            console.log(tmpl(data));
            // <table>
            //
            //   <tr><td><Jane></td></tr>
            //   <tr><td>Bond</td></tr>
            //
            //   <tr><td>Lars</td></tr>
            //   <tr><td><Croft></td></tr>
            //
            // </table>

如果需要引用模板字符串本身，在需要时执行，可以写成函数。

            let func = (name) => `Hello ${name}!`;
            func('Jack') // "Hello Jack!"

(6)模板编译

　　通过模板字符串生成正式模板实例。

如下模板：

        let template = `
        <ul>
          <% for(let i=0; i < data.supplies.length; i++) { %>
            <li><%= data.supplies[i] %></li>
          <% } %>
        </ul>
        `;

　　上面代码在模板字符串之中，放置了一个常规模板。该模板使用<%...%>放置 JavaScript 代码，使用<%= ... %>输出 JavaScript 表达式。

通过模板编译函数compile来生成最终的模板：

        function compile(template){
          const evalExpr = /<%=(.+?)%>/g;
          const expr = /<%([\s\S]+?)%>/g;
        
          template = template
            .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
            .replace(expr, '`); \n $1 \n  echo(`');
        
          template = 'echo(`' + template + '`);';
        
          let script =
          `(function parse(data){
            let output = "";
        
            function echo(html){
              output += html;
            }
        
            ${ template }
        
            return output;
          })`;
        
          return script;
        }

最终用法如下：

        let parse = eval(compile(template));
        $("#app").append(parse({ supplies: [ "broom", "mop", "cleaner" ] }));

结果：

(7)标签模板

　　模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。

            alert `123`
            // 等同于
            alert(123)

　　标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

　　但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。

7.ES6 数值

　　对数字进行了扩展，包括Number类。

8.对象(重要)

(1)属性的简洁表示法

const age = 12;
const name = "Amy";
const person = {age, name};
person   //{age: 12, name: "Amy"}
//等同于
const person = {age: age, name: name}

(2)方法名也可以简写

const person = {
  sayHi(){
    console.log("Hi");
  }
}
person.sayHi();  //"Hi"
//等同于
const person = {
  sayHi:function(){
    console.log("Hi");
  }
}
person.sayHi();//"Hi"

9.数组

　　增加了一些创建数组的方法以及数组转换的方法，也增加了数组遍历的方法。

测试数据：

let data = [{"username":"zs","age":25,"sex":"男"},{"username":"ls","age":20,"sex":"女"},{"username":"tq","age":30,"sex":"女男"}]

1、使用forEach()，可为数组中的每个元素调用一个函数；会改变原来数组的元素。没有返回值。

data.forEach(function(item, index){
    console.log("item", item)
    console.log("index", index)
    item.username = item.username + " updated";
});
// 对应箭头函数
data.forEach((item, index) => {
    console.log("item", item)
    console.log("index", index)
    item.username = item.username + " updated";
});

# 结果
item { username: 'zs', age: 25, sex: '男' }
index 0
item { username: 'ls', age: 20, sex: '女' }
index 1
item { username: 'tq', age: 30, sex: '女' }
index 2
data [
  { username: 'zs updated', age: 25, sex: '男' },
  { username: 'ls updated', age: 20, sex: '女' },
  { username: 'tq updated', age: 30, sex: '女' }
]

2、使用map()，对数组的每个元素调用指定的回调函数。返回值可有可无。
都支持三个参数分别是item（当前每一项）、index（索引值）、arr（原数组）
forEach(): 不改变数据,只是用数据做一些事情，没有返回值，不能链式调用
map(): 你需要返回一个新数组，有返回值，可以链式调用。一般用于深拷贝。

(1). 下面等价于forEach
data.map((item, index, arr) => {
    console.log("item", item)
    console.log("index", index)
    console.log("arr", arr)
    item.username = item.username + " updated";
});

console.log("data", data)
// 结果：
item { username: 'zs', age: 25, sex: '男' }
index 0
arr [
  { username: 'zs', age: 25, sex: '男' },
  { username: 'ls', age: 20, sex: '女' },
  { username: 'tq', age: 30, sex: '女' }
]
item { username: 'ls', age: 20, sex: '女' }
index 1
arr [
  { username: 'zs updated', age: 25, sex: '男' },
  { username: 'ls', age: 20, sex: '女' },
  { username: 'tq', age: 30, sex: '女' }
]
item { username: 'tq', age: 30, sex: '女' }
index 2
arr [
  { username: 'zs updated', age: 25, sex: '男' },
  { username: 'ls updated', age: 20, sex: '女' },
  { username: 'tq', age: 30, sex: '女' }
]
data [
  { username: 'zs updated', age: 25, sex: '男' },
  { username: 'ls updated', age: 20, sex: '女' },
  { username: 'tq updated', age: 30, sex: '女' }
]
(2). 深拷贝
let data2 = data.map((item, index, arr) => {
    return {
        "username": item.username + " updated",
        "age": item.age,
        "sex": item.sex
    }
});

console.log("data", data)
console.log("data2", data2)
// 结果
data [
  { username: 'zs', age: 25, sex: '男' },
  { username: 'ls', age: 20, sex: '女' },
  { username: 'tq', age: 30, sex: '女' }
]
data2 [
  { username: 'zs updated', age: 25, sex: '男' },
  { username: 'ls updated', age: 20, sex: '女' },
  { username: 'tq updated', age: 30, sex: '女' }
]

3、使用filter()，会调用一个回调函数来过滤数组中的元素，返回符合条件的所有元素；

let data2 = data.filter(item => {
    return item.age > 22
});

console.log("data2", data2)

// 需要返回一个boolean 类型值，用于判断数据是否需要。
结果：
data2 [
  { username: 'zs', age: 25, sex: '男' },
  { username: 'tq', age: 30, sex: '女' }
]

4、使用some()，遍历数组，以检测数组中是否存在指定条件的元素；

let data2 = data.some(item => {
    console.log("item", item)
    return item.age == 20
});

console.log("data2", data2)

结果：
item { username: 'zs', age: 25, sex: '男' }
item { username: 'ls', age: 20, sex: '女' }
data2 true

5、使用every()，可判断数组元素是否都符合条件；

let data2 = data.every(item => {
    console.log("item", item)
    return item.age == 20
});

console.log("data2", data2)
// 结果
item { username: 'zs', age: 25, sex: '男' }
data2 false

6、使用reduce(), 实现合并元素效果

let data2 = data.reduce((item, item2, index) => {
    console.log("item", item)
    console.log("item2", item2)
    console.log("index", index)
    return {
        "username":item.username,
        "age":item.age + item2.age,
        "sex":item2.sex
    }
});

console.log("data", data)
console.log("data2", data2)
// 结果
item { username: 'zs', age: 25, sex: '男' }
item2 { username: 'ls', age: 20, sex: '女' }
index 1
item { username: 'zs', age: 45, sex: '女' }
item2 { username: 'tq', age: 30, sex: '女' }
index 2
data [
  { username: 'zs', age: 25, sex: '男' },
  { username: 'ls', age: 20, sex: '女' },
  { username: 'tq', age: 30, sex: '女' }
]
data2 { username: 'zs', age: 75, sex: '女' }

7. find 查找满足条件的第一个元素

let data2 = data.find(item => {
    console.log("item", item);
    return item.sex == "女"
});

console.log("data2", data2)

// 结果
item { username: 'zs', age: 25, sex: '男' }
item { username: 'ls', age: 20, sex: '女' }
data2 { username: 'ls', age: 20, sex: '女' }

10.函数(重要)

　　这里有两个重要的改变。一个是函数的参数支持默认值以及不定参数，一个是箭头函数。

(1)参数默认值和不定参数

默认参数：
function fn(name,age=17){
 console.log(name+","+age);
}
fn("Amy",18);  // Amy,18
fn("Amy","");  // Amy,
fn("Amy");     // Amy,17

不定参数：
function f(...values){
    console.log(values.length);
}
f(1,2);      //2
f(1,2,3,4);  //4

(2)箭头函数

基本语法：

参数 => 函数体

注意：

当箭头函数没有参数或者有多个参数，要用 () 括起来。

var f = (a,b) => a+b;
f(6,2);  //8

当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。

var f = (a,b) => {
 let result = a+b;
 return result;
}
f(6,2);  // 8

当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来

// 报错
var f = (id,name) => {id: id, name: name};
f(6,2);  // SyntaxError: Unexpected token :
 
// 不报错
var f = (id,name) => ({id: id, name: name});
f(6,2);  // {id: 6, name: 2}

注意：

(1)箭头函数没有 this、super、arguments 和 new.target 绑定。

            var func = () => {
                // 箭头函数里面没有 this 对象，
                // 此时的 this 是外层的 this 对象，即 Window 
                console.log(this)
            }
            func(55) // Window 

            var func = () => {
                console.log(arguments)
            }
            func(55); // ReferenceError: arguments is not defined

(2)回调函数中的箭头函数的this指向外层的实例对象

function fn(){
  setTimeout(()=>{
    // 定义时，this 绑定的是 fn 中的 this 对象
    console.log(this.a);
  },0)
}
var a = 20;
// fn 的 this 对象为 {a: 19}
fn.call({a: 18});  // 18

　　call函数第一个参数相当于传递的上下文。

11.迭代器-Iterator

迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现。

迭代器是用于遍历数据结构元素的指针（如数据库中的游标）。

基本用法：

　　通过 Symbol.iterator 创建一个迭代器，指向当前数据结构的起始位置。随后通过 next 方法进行向下迭代指向下一个位置， next 方法会返回当前位置的对象，对象包含了 value 和 done 两个属性， value 是当前属性的值， done 用于判断是否遍历结束，当 done 为 true 时则遍历结束

const items = ["zero", "one", "two"];
const it = items[Symbol.iterator]();
 
it.next();
>{value: "zero", done: false}
it.next();
>{value: "one", done: false}
it.next();
>{value: "two", done: false}
it.next();
>{value: undefined, done: true}

for...of 循环（参见下文的 for...of 循环）对数据结构进行迭代：

for (let item of ["zero", "one", "two"]) {
  console.log(item);
}
// output:
// zero
// one
// two

12.Class 类

　　在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。class 的本质是 function。它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。

13.模块(重要)

　　ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。

　　ES6 的模块化分为导出（export） @与导入（import）两个模块。

特点：

ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。

模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。

每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。

每一个模块只加载一次（是单例的），若再去加载同目录下同文件，直接从内存中读取。

建议使用大括号指定所要输出的一组变量写在文档尾部，明确导出的接口。

函数与类都需要有对应的名称，导出文档尾部也避免了无对应名称。

1. 基本用法：

index.html (注意script的type设为module)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/test2.js" type="module" charset="utf-8"></script>
    </head>

    <body>
        <div id="app">
        </div>
        <script type="text/javascript">
        </script>
    </body>

</html>

test2.js

import { myName, myAge, myfn } from "./test.js";
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myAge);// 20
console.log(myName);// Tom

test.js

let myName = "Tom";
let myAge = 20;
let myfn = function(){
    return "My name is" + myName + "! I'm '" + myAge + "years old."
}

export { myName, myAge, myfn }

2.as 的用法-起别名

export 命令导出的接口名称，须和模块内部的变量有一一对应关系。

导入的变量名，须和导出的接口名称相同，即顺序可以不一致。

/*-----export [test.js]-----*/
let myName = "Tom";
export { myName as exportName }
 
/*-----import [xxx.js]-----*/
import { exportName } from "./test.js";
console.log(exportName);// Tom
使用 as 重新定义导出的接口名称，隐藏模块内部的变量
/*-----export [test1.js]-----*/
let myName = "Tom";
export { myName }
/*-----export [test2.js]-----*/
let myName = "Jerry";
export { myName }
/*-----import [xxx.js]-----*/
import { myName as name1 } from "./test1.js";
import { myName as name2 } from "./test2.js";
console.log(name1);// Tom
console.log(name2);// Jerry

3.import 命令的特点

只读属性：不允许在加载模块的脚本里面，改写接口的引用指向，即可以改写 import 变量类型为对象的属性值，不能改写 import 变量类型为基本类型的值。

单例模式：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import 。

静态执行特性：import 是静态执行，所以不能使用表达式和变量。

4.export default 命令

　　在一个文件或模块中，export、import 可以有多个，export default 仅有一个。

　　export default 中的 default 是对应的导出接口变量。

　　通过 export 方式导出，在导入时要加{ }，export default 则不需要。

　　export default 向外暴露的成员，可以使用任意变量来接收。

var a = "My name is Tom!";
export default a; // 仅有一个
export default var c = "error"; 
// error，default 已经是对应的导出变量，不能跟着变量声明语句
 
import b from "./xxx.js"; // 不需要加{}， 使用任意变量接收

5.复合使用

export 与 import 可以在同一模块使用，使用特点：

　　可以将导出接口改名，包括 default。

　　复合使用 export 与 import ，也可以导出全部，当前模块导出的接口会覆盖继承导出的

export { foo, bar } from "methods";
 
// 约等于下面两段语句，不过上面导入导出方式该模块没有导入 foo 与 bar
import { foo, bar } from "methods";
export { foo, bar };
 
/* ------- 特点 1 --------*/
// 普通改名
export { foo as bar } from "methods";
// 将 foo 转导成 default
export { foo as default } from "methods";
// 将 default 转导成 foo
export { default as foo } from "methods";
 
/* ------- 特点 2 --------*/
export * from "methods";

14.Promise 对象

　　是异步编程的一种解决方案。

从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

Promise对象有以下特点：

(1)Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。

(2)Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。

1.then方法：

(1)接收两个函数作为参数，第一个参数是 Promise 执行成功时(fulfilled 状态)的回调，第二个参数是 Promise 执行失败时(rejected 状态)的回调，两个函数只会有一个被调用。

        var myFirstPromise = new Promise(function(resolve, reject) {
            //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
            //在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.
            setTimeout(function() {
                resolve("成功!"); //代码正常执行！
                //                reject("失败"); // 异常执行
            }, 250);
        });

        myFirstPromise.then(function(successMessage) {
            document.write(successMessage);
        }, function(errorMsg) {
            document.write(errorMsg);
        });

结果：

成功!

        var myFirstPromise = new Promise(function(resolve, reject) {
            //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
            //在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.
            setTimeout(function() {
                //                resolve("成功!"); //代码正常执行！
                reject("失败"); // 异常执行
            }, 250);
        });

        myFirstPromise.then(function(successMessage) {
            document.write(successMessage);
        }, function(errorMsg) {
            document.write(errorMsg);
        });

结果：

失败

(2)可以添加多个回调函数，它们会按照插入顺序并且独立运行。then 方法将返回一个 resolved 或 rejected 状态的 Promise 对象用于链式调用，且 Promise 对象的值就是这个返回值

        var myFirstPromise = new Promise(function(resolve, reject) {
            //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
            //在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.
            setTimeout(function() {
                resolve(1); //代码正常执行！
            }, 250);
        });

        myFirstPromise.then(function(successMessage) {
            document.write(successMessage);
            return(successMessage + 1);
        }).then(function(successMessage) {
            document.write(successMessage);
            return(successMessage + 1);
        }).then(function(successMessage) {
            document.write(successMessage);
            return(successMessage + 1);
        });

结果：

123

2.Promise.resolve 方法：如果 Promise.resolve 方法的参数，不是具有 then 方法的对象（又称 thenable 对象），则返回一个新的 Promise 对象，且它的状态为fulfilled。

Promise.reject 方法：也会返回一个新的Promise实例，该实例的状态为rejected。Promise.reject方法的参数reason，会被传递给实例的回调函数。

        var myFirstPromise = new Promise(function(resolve, reject) {
            //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
            //在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.
            setTimeout(function() {
                resolve("成功1"); //代码正常执行！
            }, 250);
        });

        myFirstPromise.then(function(successMessage) {
            document.write(successMessage);
            return Promise.resolve(" 成功2 ");
        }).then(function(successMessage) {
            document.write(successMessage);
        });

结果：

成功1 成功2

        var myFirstPromise = new Promise(function(resolve, reject) {
            //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
            //在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.
            setTimeout(function() {
                reject("失败1"); //代码正常执行！
            }, 250);
        });

        myFirstPromise.then(null, function(errorMsg) {
            document.write(errorMsg);
            return Promise.reject(" 失败2 ");
        }).then(function(successMessage) {
            document.write(successMessage);
        });

结果：

失败1

3.Promise.prototype.catch方法：捕捉错误

Promise.prototype.catch 方法是 Promise.prototype.then(null, rejection) 的别名，用于指定发生错误时的回调函数。

getJSON("/posts.json").then(function(posts) {
  // some code
}).catch(function(error) {
  // 处理前一个回调函数运行时发生的错误
  console.log('发生错误！', error);
});

　　Promise 对象的错误具有"冒泡"性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个 catch 语句捕获。

例如：一个用 Promise 对象实现的 Ajax 操作的例子

function ajax(URL) {
    return new Promise(function (resolve, reject) {
        var req = new XMLHttpRequest(); 
        req.open('GET', URL, true);
        req.onload = function () {
        if (req.status === 200) { 
                resolve(req.responseText);
            } else {
                reject(new Error(req.statusText));
            } 
        };
        req.onerror = function () {
            reject(new Error(req.statusText));
        };
        req.send(); 
    });
}
var URL = "/try/ajax/testpromise.php"; 
ajax(URL).then(function onFulfilled(value){
    document.write('内容是：' + value); 
}).catch(function onRejected(error){
    document.write('错误：' + error); 
});

15.Generator 函数

　　ES6 新引入了 Generator 函数，可以通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案。

16. async 函数

　　async 是 ES7 才有的与异步操作有关的关键字，和 Promise ， Generator 有很大关联的。

语法：

async function name([param[, param[, ... param]]]) { statements }

name: 函数名称。
param: 要传递给函数的参数的名称。
statements: 函数体语句。

返回值：

　　async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

        async function helloAsync() {
            return "helloAsync";
        }

        console.log(helloAsync()) // Promise {<resolved>: "helloAsync"}

        helloAsync().then(v => {
            console.log(v); // helloAsync
        })

结果：

async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个语法错误。

await

await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。

语法：

[return_value] = await expression;

expression: 一个 Promise 对象或者任何要等待的值。