ES6新特性

---

前言

ES6新特性
参考自：
1: 菜鸟教程
2: 《ES6标准入门——阮一峰》总结
3: javatpoint

---

1、let 与 const

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的"代码块内"有效；const 声明一个只读的常量，一旦声明，常量的值就不能改变。

1.let

1）代码块内有效 不能重复声明

//for 循环计数器很适合用 le
for (var i = 0; i < 10; i++) {
  setTimeout(function(){
    console.log(i);
  })
}
 输出十个 10

for (let j = 0; j < 10; j++) {
  setTimeout(function(){
    console.log(j);
  })
}
// 输出 0123456789  每次循环的j都是不同的变量

2）不存在变量提升

console.log(a);  //ReferenceError: a is not defined
let a = "apple";
console.log(b);  //undefined
var b = "banana";
// 输出 0123456789  每次循环的j都是不同的变量

2.const

代码块内有效 不能重复声明
const 如何做到变量在声明初始化之后不允许改变的？
其实 const 其实保证的不是变量的值不变，而是保证变量指向的内存地址所保存的数据不允许改动。
对于简单类型（数值 number、字符串 string 、布尔值 boolean）,值就保存在变量指向的那个内存地址，因此 const 声明的简单类型变量等同于常量。
所以 const 只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了，所以使用 const 声明复杂类型对象时要慎重。

2、ES6 解构赋值

解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

1.数组模型的解构（Array）

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

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

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

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

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

6）字符串等
在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据。
let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

7）解构默认值
let [a = 2] = [undefined]; // a = 2
当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。

let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2
a 与 b 匹配结果为 undefined ，触发默认值：a = 3; b = a =3
a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1
a 与 b 正常解构赋值，匹配结果：a = 1，b = 2

2.对象模型的解构（Object）

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

2）可嵌套可忽略
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

3）不完全解构
let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

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

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

3、ES6 Symbol

ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。
ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol 。

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

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

使用场景

1）"作为属性名" 用法
由于每一个 Symbol 的值都是不相等的，所以 Symbol 作为对象的属性名，可以保证属性不重名。
let sy = Symbol("key1");
// 写法1
let syObject = {};
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}

"Symbol" 作为对象属性名时不能用 ".运算符"，要用方括号。因为".运算符"后面是字符串，所以取到的是字符串 sy 属性，而不是 Symbol 值 sy 属性。
let syObject = {};
syObject[sy] = "kk";
syObject[sy];  // "kk"
syObject.sy;   // undefined

2）"定义常量"
在某些情形下需要保证常量是独特的

3）"Symbol.for()"
Symbol.for() 类似单例模式，首先会在全局搜索被登记的 Symbol 中是否有该字符串参数作为名称的 Symbol 值，如果有即返回该 Symbol 值，
若没有则新建并返回一个以该字符串参数为名称的 Symbol 值，并登记在全局环境中供搜索。
let yellow0 = Symbol("Yellow");
let yellow1 = Symbol.for("Yellow");
yellow0 === yellow1;      // false
let yellow2 = Symbol.for("Yellow");
yellow1 === yellow2;     // true

4）"Symbol.keyFor()"
Symbol.keyFor() 返回一个已登记的 Symbol 类型值的 key ，用来检测该字符串参数作为名称的 Symbol 值是否已被登记。
let yellow1 = Symbol.for("Yellow");
Symbol.keyFor(yellow1);    // "Yellow"

4、Map 与 Set

1.Map 对象

1）Map 对象保存键值对。“任何值”(对象或者原始值) 都可以作为一个键或一个值。

"key 是字符串"
var myMap = new Map();
var keyString = "a string"; 
myMap.set(keyString, "和键'a string'关联的值");
myMap.get(keyString);    // "和键'a string'关联的值"
myMap.get("a string");   // "和键'a string'关联的值"
                         // 因为 keyString === 'a string'

"key 是对象"
var myMap = new Map();
var keyObj = {}, 
myMap.set(keyObj, "和键 keyObj 关联的值");
myMap.get(keyObj); // "和键 keyObj 关联的值"
myMap.get({}); // undefined, 因为 keyObj !== {}

"key 是函数"
var myMap = new Map();
var keyFunc = function () {}, // 函数
myMap.set(keyFunc, "和键 keyFunc 关联的值");
myMap.get(keyFunc); // "和键 keyFunc 关联的值"
myMap.get(function() {}) // undefined, 因为 keyFunc !== function () {}

"key 是 NaN"
var myMap = new Map();
myMap.set(NaN, "not a number");
myMap.get(NaN); // "not a number"
var otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"
//虽然 NaN 和任何值甚至和自己都不相等(NaN !== NaN 返回true)，NaN作为Map的键来说是没有区别的。

2）Map 的迭代

"for...of"
// 将会显示两个 log。 一个是 "0 = zero" 另一个是 "1 = one"
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
for (var key of myMap.keys()) {
  console.log(key);
}
for (var value of myMap.values()) {
  console.log(value);
}

"forEach()"
myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)

3） Map 对象的操作

"Map 与 Array的转换"
var kvArray = [["key1", "value1"], ["key2", "value2"]];
// Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
var myMap = new Map(kvArray);
// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
var outArray = Array.from(myMap);

"Map 的克隆"
var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
var myMap2 = new Map(myMap1);
console.log(original === clone); 
// 打印 false。 Map 对象构造函数生成实例，迭代出新的对象。

"Map 的合并"
var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos，three
var merged = new Map([...first, ...second]);

2.Set 对象

Set 对象允许你存储任何类型的"唯一值"，无论是原始值或者是对象引用。

1）Set 中的特殊值

Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待：
1）+0 与 -0 在存储判断唯一性的时候是恒等的，所以不会重复；
2）undefined 与 undefined 是恒等的，所以不会重复；
3）NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，不会重复。

2）类型转换

"Array"
// Array 转 Set
var mySet = new Set(["value1", "value2", "value3"]);
// 用...操作符，将 Set 转 Array
var myArray = [...mySet];

"String"
// String 转 Set
var mySet = new Set('hello');  // Set(4) {"h", "e", "l", "o"}
// 注：Set 中 toString 方法是不能将 Set 转换成 String

3）Set 对象作用

	1）数组去重
	var mySet = new Set([1, 2, 3, 4, 4]);
	[...mySet]; // [1, 2, 3, 4]

	2）并集
	var a = new Set([1, 2, 3]);
	var b = new Set([4, 3, 2]);
	var union = new Set([...a, ...b]); // {1, 2, 3, 4}

	3）交集
	var a = new Set([1, 2, 3]);
	var b = new Set([4, 3, 2]);
	var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

	4）差集
	var a = new Set([1, 2, 3]);
	var b = new Set([4, 3, 2]);
	var difference = new Set([...a].filter(x => !b.has(x))); // {1}
	

5、Reflect 与 Proxy

1.基本用法

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

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

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

1）Proxy

let target = {
    name: 'Tom',
    age: 24
}
let handler = {
    get: function(target, key) {
        console.log('getting '+key);
        return target[key]; // 不是target.key
    },
    set: function(target, key, value) {
        console.log('setting '+key);
        target[key] = value;
    }
}
let proxy = new Proxy(target, handler)
proxy.name     // 实际执行 handler.get
proxy.age = 25 // 实际执行 handler.set
// getting name
// setting age
// 25

// target 可以为空对象
let targetEpt = {}
let proxyEpt = new Proxy(targetEpt, handler)
// 调用 get 方法，此时目标对象为空，没有 name 属性
proxyEpt.name // getting name
// 调用 set 方法，向目标对象中添加了 name 属性
proxyEpt.name = 'Tom'
// setting name
// "Tom"
// 再次调用 get ，此时已经存在 name 属性
proxyEpt.name
// getting name
// "Tom"

// handler 对象也可以为空，相当于不设置拦截操作，直接访问目标对象
let targetEmpty = {}
let proxyEmpty = new Proxy(targetEmpty,{})
proxyEmpty.name = "Tom"
targetEmpty// {name: "Tom"}

2）实例方法

	1）get(target, propKey, receiver)//参数含义参考5-1-1的例子
	用于 target 对象上 propKey 的读取操作。

	2）set(target, propKey, value, receiver)//参数含义参考5-1-1的例子
	用于拦截 target 对象上的 propKey 的赋值操作。如果目标对象自身的某个属性，不可写且不可配置，那么set方法将不起作用。
	"第四个参数 receiver "表示原始操作行为所在对象，一般是 Proxy 实例本身。

	3）apply(target, ctx, args)
	用于拦截"函数的调用"、"call" 和 "apply" 操作。
	"target" 表示目标对象，"ctx" 表示目标对象上下文，"args" 表示目标对象的参数数组。
	function sub(a, b){
    	return a - b;
	}
	let handler = {
    	apply: function(target, ctx, args){
        	console.log('handle apply');
        	return Reflect.apply(...arguments);
    	}
	}
	let proxy = new Proxy(sub, handler)
	proxy(2, 1) 
	// handle apply
	// 1

	Reflect.apply(target, thisArgument, argumentsList)  
	//参考//https://www.javatpoint.com/javascript-reflect-apply-method
	"target": 被调用的函数对象
    "thisArgument": 被调用目标中的 this 对象
    "ArgumentsList": 要调用函数的参数列表

	4）has(target, propKey)
	用于拦截 HasProperty 操作，即在判断 target 对象是否存在 propKey 属性时，会被这个方法拦截。
	此方法不判断一个属性是对象自身的属性，还是继承的属性。
	ep:
	let  handler = {
    	has: function(target, propKey){
        	console.log("handle has");
        	return propKey in target;
    	}
	}
	let exam = {name: "Tom"}
	let proxy = new Proxy(exam, handler)
	'name' in proxy
	// handle has
	// true
	注意：此方法不拦截 for ... in 循环。

	5）construct(target, args)
	用于拦截 new 命令。"返回值必须为对象。"

	6）deleteProperty(target, propKey)
	用于拦截 delete 操作，如果这个方法抛出错误或者返回 false ，propKey 属性就无法被 delete 命令删除。

	7）defineProperty(target, propKey, propDesc)
	用于拦截 "Object.definePro"
	若目标对象不可扩展，增加目标对象上不存在的属性会报错；若属性不可写或不可配置，则不能改变这些属性。
	let handler = {
	    defineProperty: function(target, propKey, propDesc){
    	    console.log("handle defineProperty");
   		    return true;
 	   }
	}
	let target = {}
	let proxy = new Proxy(target, handler)
	proxy.name = "Tom"
	// handle defineProperty
	target
	// {name: "Tom"}
	// defineProperty 返回值为false，添加属性操作无效
	let handler1 = {
	    defineProperty: function(target, propKey, propDesc){
	        console.log("handle defineProperty");
	        return false;
	    }
	}
	let target1 = {}
	let proxy1 = new Proxy(target1, handler1)
	proxy1.name = "Jerry"
	target1
	// {}


	8）erty 操作 - getOwnPropertyDescriptor(target, propKey)
	用于拦截 Object.getOwnPropertyD() 返回值为属性描述对象或者 undefined 。

	9）ptor 属性
	getPrototypeOf(target)
	主要用于拦截获取对象原型的操作。包括以下操作：
		- Object.prototype._proto_
		- Object.prototype.isPrototypeOf()
		- Object.getPrototypeOf()
		- Reflect.getPrototypeOf()
		- instanceof

	10）isExtensible(target)
	用于拦截 Object.isExtensible 操作。
	该方法只能返回布尔值，否则返回值会被自动转为布尔值。

	11）ownKeys(target)
	用于拦截对象自身属性的读取操作。主要包括以下操作：
		- Object.getOwnPropertyNames()
		- Object.getOwnPropertySymbols()
		- Object.keys()
		- or...in

	12）preventExtensions(target)
	拦截 Object.preventExtensions 操作。
	该方法必须返回一个布尔值，否则会自动转为布尔值。

	13）setPrototypeOf
	主要用来拦截 Object.setPrototypeOf 方法。

	14）Proxy.revocable()
	用于返回一个可取消（废除）的 Proxy 实例。
	

2.Reflect

ES6 中将 Object 的一些明显属于语言内部的方法移植到了 Reflect 对象上
（当前某些方法会同时存在于 Object 和 Reflect 对象上），未来的新方法会只部署在 Reflect 对象上。

Reflect 对象对某些方法的返回结果进行了修改，使其更合理。
Reflect 对象使用函数的方式实现了 Object 的命令式操作。

1）Reflect.get(target, name, receiver)
查找并返回 target 对象的 name 属性。

2）Reflect.set(target, name, value, receiver)
将 target 的 name 属性设置为 value。返回值为 boolean ，true 表示修改成功，false 表示失败。当 target 为不存在的对象时，会报错。

3）Reflect.has(obj, name)
是 name in obj 指令的函数化，用于查找 name 属性在 obj 对象中是否存在。返回值为 boolean。如果 obj 不是对象则会报错 TypeError。

4）Reflect.deleteProperty(obj, property)
是 delete obj[property] 的函数化，用于删除 obj 对象的 property 属性，返回值为 boolean。如果 obj 不是对象则会报错 TypeError。

5）Reflect.construct(obj, args)
等同于 new target(...args)。

6）Reflect.getPrototypeOf(obj)
用于读取 obj 的 _proto_ 属性。在 obj 不是对象时不会像 Object 一样把 obj 转为对象，而是会报错。

7）Reflect.setPrototypeOf(obj, newProto)
用于设置目标对象的 prototype。

8）Reflect.apply(func, thisArg, args)
等同于 Function.prototype.apply.call(func, thisArg, args) 。
func 表示目标函数；
thisArg 表示目标函数绑定的 this 对象；
args 表示目标函数调用时传入的参数列表，可以是数组或类似数组的对象。
若目标函数无法调用，会抛出 TypeError 。

9）Reflect.defineProperty(target, propertyKey, attributes)
用于为目标对象定义属性。如果 target 不是对象，会抛出错误。

10）Reflect.getOwnPropertyDescriptor(target, propertyKey)
用于得到 target 对象的 propertyKey 属性的描述对象。在 target 不是对象时，会抛出错误表示参数非法，不会将非对象转换为对象。

11）Reflect.isExtensible(target)
用于判断 target 对象是否可扩展。返回值为 boolean 。如果 target 参数不是对象，会抛出错误。

12）Reflect.preventExtensions(target)
用于让 target 对象变为不可扩展。如果 target 参数不是对象，会抛出错误。

13）Reflect.ownKeys(target)
用于返回 target 对象的所有属性，等同于 Object.getOwnPropertyNames 与 Object.getOwnPropertySymbols 之和。

3.组合使用

Reflect 对象的方法与 Proxy 对象的方法是一一对应的。
所以 Proxy 对象的方法可以通过调用 Reflect 对象的方法获取默认行为，然后进行额外操作。

let exam = {
    name: "Tom",
    age: 24
}
let handler = {
    get: function(target, key){
        console.log("getting "+key);
        return Reflect.get(target,key);
    },
    set: function(target, key, value){
        console.log("setting "+key+" to "+value)
        Reflect.set(target, key, value);
    }
}
let proxy = new Proxy(exam, handler)
proxy.name = "Jerry"
proxy.name
// setting name to Jerry
// getting name
// "Jerry"

6、ES6 字符串

子串的识别
ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法。

includes()：返回布尔值，判断是否找到参数字符串。
startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。

以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引。

let string = "apple,banana,orange";
string.includes("banana");     // true
string.startsWith("apple");    // true
string.endsWith("apple");      // false
string.startsWith("banana",6)  // true

字符串重复

repeat()：返回新的字符串，表示将字符串重复指定次数返回。

console.log("Hello,".repeat(2));  // "Hello,Hello,"
//如果参数是小数，向下取整

字符串补全
padStart：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。
padEnd：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。
以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。

模板字符串
模板字符串相当于加强版的字符串，用反引号 “`”,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

	let string = `Hello'\n'world`;
	console.log(string); 
	// "Hello'
	// 'world"
	1）多行字符串:
	let string1 =  `Hey,
	can you stop angry now?`;
	console.log(string1);
	// Hey,
	// can you stop angry now?

	2）字符串插入变量和表达式。
	变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
	let name = "Mike";
	let age = 27;
	let info = `My Name is ${name},I am ${age+1} years old next year.`
	console.log(info);
	// My Name is Mike,I am 28 years old next year.

	3）字符串中调用函数：
	function f(){
  	return "have fun!";
	}
	let string2= `Game start,${f()}`;
	console.log(string2);  // Game start,have fun!

标签模板

标签模板，是一个函数的调用，其中调用的参数是模板字符串。
alert`Hello world!`;
// 等价于
alert('Hello world!');

当模板字符串中带有变量，会将模板字符串参数处理成多个参数。
function f(stringArr,...values){
 let result = "";
 for(let i=0;i<stringArr.length;i++){
  result += stringArr[i];
  if(values[i]){
   result += values[i];
  }
 }
 return result;
}
let name = 'Mike';
let age = 27;
f`My Name is ${name},I am ${age+1} years old next year.`;
// "My Name is Mike,I am 28 years old next year."
 
f`My Name is ${name},I am ${age+1} years old next year.`;
// 等价于
f(['My Name is',',I am ',' years old next year.'],'Mike',28);

应用

1）过滤 HTML 字符串，防止用户输入恶意内容。

	function f(stringArr,...values){
 	let result = "";
 	for(let i=0;i<stringArr.length;i++){
  		result += stringArr[i];
   		if(values[i]){
     		result += String(values[i]).replace(/&/g, "&amp;")
               	.replace(/</g, "&lt;")
               	.replace(/>/g, "&gt;");
    	}
 	}
	 return result;
	}
	name = '<Amy&MIke>';
	f`<p>Hi, ${name}.I would like send you some message.</p>`;
	// <p>Hi, &lt;Amy&amp;MIke&gt;.I would like send you some message.</p>

2）国际化处理（转化多国语言）

	i18n`Hello ${name}, you are visitor number ${visitorNumber}.`;  
	// 你好**，你是第**位访问者

7、ES6 数值

1.数值的表示

"二进制"表示法新写法: 前缀 0b 或 0B 。
console.log(0b11 === 3); // true
console.log(0B11 === 3); // true
"八进制"表示法新写法: 前缀 0o 或 0O 。
console.log(0o11 === 9); // true
console.log(0O11 === 9); // true

2.常量

1） Number.EPSILON

Number.EPSILON 属性表示 1 与大于 1 的最小浮点数之间的差。
它的值接近于 2.2204460492503130808472633361816E-16，或者 2-52。

测试数值是否在误差范围内:
0.1 + 0.2 === 0.3; // false
// 在误差范围内即视为相等
equal = (Math.abs(0.1 - 0.3 + 0.2) < Number.EPSILON); // true

2）最大/最小安全整数

安全整数
安全整数表示在 JavaScript 中能够精确表示的整数，安全整数的范围在 2 的 -53 次方到 2 的 53 次方之间（不包括两个端点），
超过这个范围的整数无法精确表示。

最大安全整数
安全整数范围的上限，即 2 的 53 次方减 1 。
Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2; // true
Number.MAX_SAFE_INTEGER === Number.MAX_SAFE_INTEGER + 1;     // false
Number.MAX_SAFE_INTEGER - 1 === Number.MAX_SAFE_INTEGER - 2; // false

最小安全整数
安全整数范围的下限，即 2 的 53 次方减 1 的负数。
Number.MIN_SAFE_INTEGER + 1 === Number.MIN_SAFE_INTEGER + 2; // false
Number.MIN_SAFE_INTEGER === Number.MIN_SAFE_INTEGER - 1;     // false
Number.MIN_SAFE_INTEGER - 1 === Number.MIN_SAFE_INTEGER - 2; // true

3.方法

Number 对象新方法

1）Number.isFinite()
用于检查一个数值是否为有限的（ finite ），即不是 Infinity

从全局移植到 Number 对象的方法
逐步减少全局方法，用于全局变量的模块化。
方法的行为没有发生改变。

2）Number.parseInt()
用于将给定字符串转化为指定进制的整数。//ES5是全局函数

Math 对象的扩展
ES6 在 Math 对象上新增了 17 个数学相关的静态方法，这些方法只能在 Math 中调用。

普通计算
1）Math.cbrt//用于计算一个数的立方根。

2）Math.imul//两个数以 32 位带符号整数形式相乘的结果，返回的也是一个 32 位的带符号整数。
	// 大多数情况下，结果与 a * b 相同 
	Math.imul(1, 2);   // 2
	// 用于正确返回大数乘法结果中的低位数值
	Math.imul(0x7fffffff, 0x7fffffff); // 1

3）Math.hypot//用于计算所有参数的平方和的平方根。

数字处理
4）Math.trunc //用于返回数字的整数部分。

5）Math.fround //用于获取数字的32位单精度浮点数形式。

判断
6）Math.sign //判断数字的符号（正、负、0）
对数方法
7）Math.expm1() //用于计算 e 的 x 次方减 1 的结果，即 Math.exp(x) - 1 。

8）Math.log10(x) //用于计算以 10 为底的 x 的对数。

9）Math.log2() //用于计算 2 为底的 x 的对数。

双曲函数方法
11）Math.sinh(x): //用于计算双曲正弦。
12）Math.cosh(x): //用于计算双曲余弦。
13）Math.tanh(x): //用于计算双曲正切。
14）Math.asinh(x): //用于计算反双曲正弦。
15）Math.acosh(x): //用于计算反双曲余弦。
16）Math.atanh(x): //用于计算反双曲正切。

17）** - 指数运算符
1 ** 2; // 1
// 右结合，从右至左计算
2 ** 2 ** 3; // 256
// **=
let exam = 2;
exam ** = 2; // 4

8、ES6 对象

1.对象字面量

	1）属性的简洁表示法
	ES6允许对象的属性直接写变量，这时候属性名是变量名，属性值是变量值。
	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"
	//等同于 es5 写法
	const person = {
  		sayHi:function(){
    		console.log("Hi");
  		}
	}
	person.sayHi();//"Hi"

	3）属性名表达式
	ES6允许用表达式作为属性名，但是一定要将表达式放在"方括号内"。
	const obj = {
 		["he"+"llo"](){
   		return "Hi";
  		}
	}
	obj.hello();  //"Hi"

2.对象的拓展运算符

拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

	//基本用法
	let person = {name: "Amy", age: 15};
	let someone = { ...person };
	someone;  //{name: "Amy", age: 15}
	//可用于合并两个对象
	let age = {age: 15};
	let name = {name: "Amy"};
	let person = {...age, ...name};
	person;  //{age: 15, name: "Amy"}

3.对象的新方法

Object.assign(target, source_1, ···)

用于将源对象的所有可枚举属性复制到目标对象中。

"基本用法"
let target = {a: 1};
let object2 = {b: 2};
let object3 = {c: 3};
Object.assign(target,object2,object3);  
// 第一个参数是目标对象，后面的参数是源对象
target;  // {a: 1, b: 2, c: 3
"注意点" 
1）assign 的属性拷贝是"浅拷贝"
	let sourceObj = { a: { b: 1}};
	let targetObj = {c: 3};
	Object.assign(targetObj, sourceObj);
	targetObj.a.b = 2;
	sourceObj.a.b;  // 2 - 拷贝的只是对象的引用

2）同名属性替换
	targetObj = { a: { b: 1, c:2}};
	sourceObj = { a: { b: "hh"}};
	Object.assign(targetObj, sourceObj);
	targetObj;  // {a: {b: "hh"}}

3）数组的处理
	Object.assign([2,3], [5]);  // [5,3]
	会将数组处理成对象，所以先将 [2,3] 转为 {0:2,1:3} ，然后再进行属性复制，所以源对象的 0 号属性覆盖了目标对象的 0。

Object.is(value1, value2)

用来比较两个值是否严格相等，与（===）基本类似。

"基本用法"
	Object.is("q","q");      // true
	Object.is(1,1);          // true
	Object.is([1],[1]);      // false
	Object.is({q:1},{q:1});  // false
"与（===）的区别"
	//一是+0不等于-0
	Object.is(+0,-0);  //false
	+0 === -0  //true
	//二是NaN等于本身
	Object.is(NaN,NaN); //true
	NaN === NaN  //false

9、ES6 数组

1.数组创建

9-1-1 Array.of()
将参数中所有值作为元素形成数组。

9-1-2 Array.from()
将类数组对象或可迭代对象转化为数组。
// 参数为数组,返回与原数组一样的数组
console.log(Array.from([1,2])); // [1, 2]
参数：
"Array.from(arrayLike[, mapFn[, thisArg]])"
返回值为转换后的数组。
	1）arrayLike
	想要转换的类数组对象或可迭代对象。
	console.log(Array.from([1, 2, 3])); // [1, 2, 3]

	2）mapFn
	可选，map 函数，用于对每个元素进行处理，放入数组的是处理后的元素。
	console.log(Array.from([1, 2, 3], (n) => n * 2)); // [2, 4, 6]

	3）thisArg
	可选，用于指定 map 函数执行时的 this 对象。
	let map = {
    	do: function(n) {
        	return n * 2;
    	}
	}
	let arrayLike = [1, 2, 3];
	console.log(Array.from(arrayLike, function (n){
    	return this.do(n);
	}, map)); // [2, 4, 6]

"类数组对象"
一个类数组对象必须含有 length 属性，且元素属性名必须是数值或者可转换为数值的字符。
let arr = Array.from({
  0: '1',
  1: '2',
  2: 3,
  length: 3
});
console.log(); // ['1', '2', 3]

"转换可迭代对象"
	1）转换 map
	2）转换 set
	3）转换字符串

2.扩展的方法

	"查找："
	1）find() 查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。
	let arr = Array.of(1, 2, 3, 4);
	console.log(arr.find(item => item > 2)); // 3
	2）findIndex() 查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。
	
	"填充"
	1）fill() 将一定范围索引的数组元素内容填充为单个指定的值。
	let arr = Array.of(1, 2, 3, 4);
	// 参数1：用来填充的值
	// 参数2：被填充的起始索引
	// 参数3(可选)：被填充的结束索引，默认为数组末尾
	console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]
	2）copyWithin() 将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。

	"遍历"
	1）entries() 遍历键值对。
	for(let [key, value] of ['a', 'b'].entries()){
    	console.log(key, value);
	}
	2）keys() 遍历键名
	3）values() 遍历键值。

	"包含"
	1）includes() 数组是否包含指定值。
	注意：与 Set 和 Map 的 has 方法区分；Set 的 has 方法用于查找值；Map 的 has 方法用于查找键名。

	"嵌套数组转一维数组"
	1）flat()
	console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
	2）flatMap() 先对数组中每个元素进行映射处理，再对数组执行 flat() 方法。

3.数组缓冲区

数组缓冲区是内存中的一段地址。
定型数组的基础。
实际字节数在创建时确定，之后只可修改其中的数据，不可修改大小。

9-3-1 创建数组缓冲区

通过构造函数创建:
let buffer = new ArrayBuffer(10);
console.log(buffer.byteLength); // 10
分割已有数组缓冲区
let buffer = new ArrayBuffer(10);
let buffer1 = buffer.slice(1, 3);
console.log(buffer1.byteLength); // 2

9-3-2 视图
视图是用来操作内存的接口。
视图可以操作数组缓冲区或缓冲区字节的子集,并按照其中一种数值数据类型来读取和写入数据。
DataView 类型是一种通用的数组缓冲区视图,其支持所有8种数值型数据类型。

// 默认 DataView 可操作数组缓冲区全部内容
let buffer = new ArrayBuffer(10);
    dataView = new DataView(buffer); 
dataView.setInt8(0,1);
console.log(dataView.getInt8(0)); // 1
// 通过设定偏移量(参数2)与长度(参数3)指定 DataView 可操作的字节范围
let buffer1 = new ArrayBuffer(10);
    dataView1 = new DataView(buffer1, 0, 3);
dataView1.setInt8(5,1); // RangeError

9-3-3 定型数组
数组缓冲区的特定类型的视图。
可以强制使用特定的数据类型，而不是使用通用的 DataView 对象来操作数组缓冲区。

9-4 扩展运算符

复制数组
let arr = [1, 2],
    arr1 = [...arr];
console.log(arr1); // [1, 2]
// 数组含空位
let arr2 = [1, , 3],
    arr3 = [...arr2];
console.log(arr3); [1, undefined, 3]

合并数组
console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]

10、ES6 函数

1.函数参数的扩展

1）默认参数

	"基本用法"
	function fn(name,age=17){
 		console.log(name+","+age);
	}
	fn("Amy",18);  // Amy,18
	fn("Amy","");  // Amy,
	fn("Amy");     // Amy,17
	//注意点1：使用函数默认参数时，不允许有同名参数。
	//注意点2：只有在未传递参数，或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的值传递。
	function fn(name,age=17){
    	console.log(name+","+age);
	}
	fn("Amy",null); // Amy,null

2）不定参数
不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。具名参数只能放在参数组的最后，并且有且只有一个不定参数。

"基本用法"
function f(...values){
    console.log(values.length);
}
f(1,2);      //2
f(1,2,3,4);  //4

2.箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：
参数 => 函数体

基本用法

var f = v => v;
//等价于
var f = function(a){
 return a;
}
f(1);  //1

//1）当箭头函数没有参数或者有多个参数，要用 () 括起来。
	var f = (a,b) => a+b;
	f(6,2);  //8

//2）当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
	var f = (a,b) => {
 		let result = a+b;
 		return result;
	}
	f(6,2);  // 8

//3）当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来
	// 报错
	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}

//4）箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。
	function fn(){
  		setTimeout(()=>{
    		// 定义时，this 绑定的是 fn 中的 this 对象
    		console.log(this.a);
  		},0)
	}
	var a = 20;
	// fn 的 this 对象为 {a: 19}
	fn.call({a: 18});  // 18

//5）不可以作为构造函数，也就是不能使用 new 命令，否则会报错

适合使用的场景
ES6 之前，JavaScript 的 this 对象一直很令人头大，回调函数，经常看到 var self = this 这样的代码，
为了将外部 this 传递到回调函数中，那么有了箭头函数，就不需要这样做了，直接使用 this 就行。

// 回调函数
var Person = {
    'age': 18,
    'sayHello': function () {
      setTimeout(function () {
        console.log(this.age);
      });
    }
};
var age = 20;
Person.sayHello();  // 20
 
var Person1 = {
    'age': 18,
    'sayHello': function () {
      setTimeout(()=>{
        console.log(this.age);
      });
    }
};
var age = 20;
Person1.sayHello();  // 18
//所以，当我们需要维护一个 this 上下文的时候，就可以使用箭头函数。

不适合使用的场景

需要动态 this 的时候

var button = document.getElementById('userClick');
button.addEventListener('click', () => {
     this.classList.toggle('on');
});

button 的监听函数是箭头函数，所以监听函数里面的 this 指向的是定义的时候外层的 this 对象，即 Window，导致无法操作到被点击的按钮对象。

11、ES6 迭代器

Iterator
Iterator 是 ES6 引入的一种新的遍历机制，迭代器有两个核心概念：

迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为 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}

以下是可迭代的对象
Array
String
Map
Set
Dom元素（正在进行中）
我们将使用"for…of 循环"对数据结构进行迭代。

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

for…of循环
for…of 是 ES6 新引入的循环，用于替代 for…in 和 forEach() ，并且支持新的迭代协议。
它可用于迭代常规的数据类型，如 Array 、 String 、 Map 和 Set 等等。

let myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
myMap.set(2, "two");
// 遍历 key 和 value
for (let [key, value] of myMap) {
  console.log(key + " = " + value);
}

let 、const 和 var 用于 for…of
如果使用 let 和 const ，每次迭代将会创建一个新的存储空间，这可以保证作用域在迭代的内部。

12、ES6 Class 类

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

1.基础用法

	12-1-1 类定义
	类表达式可以为匿名或命名。
	// 匿名类
	let Example = class {
    	constructor(a) {
        	this.a = a;
    	}
	}
	// 命名类
	let Example = class Example {
    	constructor(a) {
        	this.a = a;
   	 	}
	}

	12-1-2 类声明
	class Example {
    	constructor(a) {
        	this.a = a;
    	}
	}
	//注意要点：不可重复声明。

	12-1-3 类的主体

	--"属性"--

	1）"prototype"
	ES6 中，prototype 仍旧存在，虽然可以直接自类中定义方法，但是其实方法还是定义在 prototype 上的。 
	"覆盖方法 / 初始化时添加方法"
	Example.prototype={
    	//methods
	}

	2）"添加方法"
	Object.assign(Example.prototype,{
    	//methods
	})

	3）"静态属性"
	静态属性：class 本身的属性，即直接定义在类内部的属性（ Class.propname ），不需要实例化。 
	ES6 中规定，Class 内部只有静态方法，没有静态属性。
	class Example {
	// 新提案
    	static a = 2;
	}
	// 目前可行写法
	Example.b = 2;

	4）"公共属性"
	class Example{}
	Example.prototype.a = 2;

	5）"实例属性"
	实例属性：定义在实例对象（ this ）上的属性。
	class Example {
    	a = 2;
    	constructor () {
        	console.log(this.a);
    	}
	}

	6）"name 属性"
	返回跟在 class 后的类名(存在时)。
	let Example=class Exam {
    	constructor(a) {
        	this.a = a;
    	}
	}
	console.log(Example.name); // Exam
	let Example=class {
    	constructor(a) {
        	this.a = a;
    	}
	}
	console.log(Example.name); // Example

	--"方法"--

	1）"constructor" 方法
	constructor 方法是类的默认方法，创建类的实例化对象时被调用。
	class Example{
    	constructor(){// (返回对象)
      	console.log('我是constructor');
    	}
	}
	new Example(); // 我是constructor

	2）"静态方法"
	class Example{
    	static sum(a, b) {
        	console.log(a+b);
    	}
	}
	Example.sum(1, 2); // 3

	3）"原型方法"
	class Example {
    	sum(a, b) {
        	console.log(a + b);
    	}
	}
	let exam = new Example();
	exam.sum(1, 2); // 3
	//感觉和下面的效果一个样？？？
	class Example {}
	Example.prototype.sum = function(a, b) {
       		console.log(a + b);
    }

	4）"实例方法"
	class Example {
    	constructor() {
        	this.sum = (a, b) => {
            	console.log(a + b);
        	}
    	}
	}


	12-1-4 类的实例化
	class 的实例化必须通过 new 关键字。

	实例化对象 - 共享原型对象
	let exam1 = new Example(2, 1);
	let exam2 = new Example(3, 1);
	console.log(exam1._proto_ == exam2._proto_); // true



	12-1-5 decorator
	"decorator" 是一个函数，用来修改类的行为，在代码编译时产生作用。

	1）类修饰
	一个参数 - 第一个参数 target，指向类本身。
	function testable(target) {
    	target.isTestable = true;
	}
	@testable
	class Example {}
	Example.isTestable; // true

	2）多个参数 - 嵌套实现
	function testable(isTestable) {
    	return function(target) {
        	target.isTestable=isTestable;
    	}
	}
	@testable(true)
	class Example {}
	Example.isTestable; // true
	//实例属性 - 上面两个例子添加的是静态属性，若要添加实例属性，在类的 prototype 上操作即可。

	3）方法修饰
	三个参数：target（类的原型对象）、name（修饰的属性名）、descriptor（该属性的描述对象）。
	class Example {
    	@writable
    	sum(a, b) {
        	return a + b;
   	 	}
	}
	function writable(target, name, descriptor) {
    	descriptor.writable = false;
    	return descriptor; // 必须返回
	}
	修饰器"执行顺序" - 由外向内进入，由内向外执行。

2.封装与继承

1）getter / setter
“getter 不可单独出现”
“getter 与 setter 必须同级出现”

class Example{
    constructor(a, b) {
        this.a = a; // 实例化时调用 set 方法
        this.b = b;
    }
    get a(){
        console.log('getter');
        return this.a;
    }
    set a(a){
        console.log('setter');
        this.a = a; // 自身递归调用
    }
}
let exam = new Example(1,2); // 不断输出 setter ，最终导致 RangeError
class Example1{
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }
    get a(){
        console.log('getter');
        return this._a;
    }
    set a(a){
        console.log('setter');
        this._a = a;
    }
}
let exam1 = new Example1(1,2); // 只输出 setter , 不会调用 getter 方法
console.log(exam._a); // 1, 可以直接访问

2）extends
通过 extends 实现类的继承。

class Child extends Father { ... }

3）super

//子类 constructor 方法中必须有 super ，且必须出现在 this 之前。
class Child extends Father {
    constructor(a) {
        this.a = a;
        super();//而且调用父类构造函数,只能出现在子类的构造函数。
    }
}
//调用父类方法, super 作为对象，在普通方法中，指向父类的原型对象，在静态方法中，指向父类
class Child2 extends Father {
    constructor(){
        super();
        // 调用父类普通方法
        console.log(super.test()); // 0
    }
    static test3(){
        // 调用父类静态方法
        return super.test1+2;
    }
}
Child2.test3(); // 3

4）注意要点 - “不可继承常规对象”

var Father = { }
class Child extends Father {
     // ...
}
// Uncaught TypeError: Class extends value #<Object> is not a constructor or null
// 解决方案
Object.setPrototypeOf(Child.prototype, Father);

13、ES6 模块

在 ES6 前， 实现模块化使用的是 RequireJS 或者seaJS（分别是基于 AMD 规范的模块化库，和基于CMD 规范的模块化库）。
ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。
ES6 的模块化分为导出（export） @与导入（import）两个模块。

ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 “use strict;”。
模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

1.export 与 import

1）基本用法
模块导入导出各种类型的变量，如字符串，数值，函数，类。
导出的函数声明与类声明必须要有名称（export default 命令另外考虑）。
不仅能导出声明还能导出引用（例如函数）。
export 命令可以出现在模块的任何位置，但必需处于模块顶层。
import 命令会提升到整个模块的头部，首先执行。

/*-----export [test.js]-----*/
let myName = "Tom";
let myAge = 20;
let myfn = function(){
    return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass =  class myClass {
    static a = "yeah!";
}
export { myName, myAge, myfn, myClass }
 
/*-----import [xxx.js]-----*/
import { myName, myAge, myfn, myClass } from "./test.js";
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myAge);// 20
console.log(myName);// Tom
console.log(myClass.a );// yeah!

2）as 的用法

export 命令导出的接口名称，须和模块内部的变量有一一对应关系。
导入的变量名，须和导出的接口名称相同，即顺序可以不一致。

不同模块导出接口名称命名重复， 使用 as 重新定义变量名。

import { myName as name1 } from "./test1.js";
import { myName as name2 } from "./test2.js";

3）import 命令的特点

- 只读属性
- 单例模式
- 静态执行特性

4）export default 命令的特点

- 在一个文件或模块中，export、import 可以有多个，export default 仅有一个。
- export default 中的 default 是对应的导出接口变量。
- 通过 export 方式导出，在导入时要加{ }，export default 则不需要。
- export default 向外暴露的成员，可以使用任意变量来接收。

2.复合使用

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、ES6 Promise 对象

异步编程的一种解决方案
从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

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

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

const p2 = new Promise(function(resolve,reject){  
    //resolve('success3'); 
    reject('reject');
});
p2.then(function(value){ 
    console.log(value); // success3
}).catch(function(err){ 
    console.log(err); // reject
});

then 方法

• then 方法接收两个函数作为参数，"第一个参数"是 Promise 执行成功时的回调，"第二个参数"是 Promise 执行失败时的回调，两个函数只会有一个被调用。
• 可以添加多个回调函数，它们会按照插入顺序并且独立运行。

const p = new Promise(function(resolve,reject){
  resolve(1);
}).then(function(value){ // 第一个then // 1
  console.log(value);
  return value * 2;
}).then(function(value){ // 第二个then // 2
  console.log(value);
}).then(function(value){ // 第三个then // undefined
  console.log(value);
  return Promise.resolve('resolve'); 
}).then(function(value){ // 第四个then // resolve
  console.log(value);
  return Promise.reject('reject'); 
}).then(function(value){ // 第五个then //reject:reject
  console.log('resolve:' + value);
}, function(err) {
  console.log('reject:' + err);
});

Promise.all方法，Promise.race方法

• 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
• 上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p的返回值。

      var p = Promise.all([p1,p2,p3]);
      var p = Promise.race([p1,p2,p3]);

Promise.resolve 方法，Promise.reject 方法

• 有时需要将现有对象转为Promise对象，Promise.resolve 方法就起到这个作用。

      var p = Promise.resolve('Hello');
      p.then(function (s){
          console.log(s)
      });

15、ES6 Generator 函数

1.Generator 函数组成

Generator 有两个区分于普通函数的部分：

• 一是在 function 后面，函数名之前有个 * ；
• 二是函数内部有 yield 表达式。

其中 * 用来表示函数为 Generator 函数，yield 用来定义函数内部的状态。

function* func(){
 console.log("one");
 yield '1';
 console.log("two");
 yield '2'; 
 console.log("three");
 return '3';
}

2.执行机制

Generator 函数不会像普通函数一样立即执行，而是返回一个"指向内部状态对象的指针"，
所以要调用遍历器对象Iterator 的 “next” 方法，指针就会从函数头部或者上一次停下来的地方开始执行。
返回{value: undefined, done: false/true} //done==true代表函数执行结束

f.next();
// one
// {value: "1", done: false}
f.next();
// two
// {value: "2", done: false}
f.next();
// three
// {value: "3", done: true}
f.next();
// {value: undefined, done: true}

• next 方法
  一般情况下，next 方法不传入参数的时候，yield 表达式的返回值是 undefined 。
  当 next 传入参数的时候，该"参数"会作为"上一步yield的返回值"。

function* sendParameter(){
    console.log("strat");
    var x = yield '2';
    console.log("one:" + x);
    var y = yield '3';
    console.log("two:" + y);
    console.log("total:" + (x + y));
}
var sendp2 = sendParameter();
sendp2.next(10);
// strat
// {value: "2", done: false}
sendp2.next(20);
// one:20
// {value: "3", done: false}
sendp2.next(30);
// two:30
// total:50
// {value: undefined, done: true}

• return 方法
  return 方法返回给定值，并结束遍历 Generator 函数。
  return 方法提供参数时，返回该参数；不提供参数时，返回 undefined 。

• yield* 表达式
  yield* 表达式表示 yield 返回一个遍历器对象，用于在 Generator 函数内部，调用另一个 Generator 函数。

function* callee() {
    console.log('callee: ' + (yield));
}
function* caller() {
    while (true) {
        yield* callee();
    }
}
const callerObj = caller();
callerObj.next();
// {value: undefined, done: false}
callerObj.next("a");
// callee: a
// {value: undefined, done: false}
callerObj.next("b");
// callee: b
// {value: undefined, done: false}
 
// 等同于
function* caller() {
    while (true) {
        for (var value of callee) {
          yield value;
        }
    }
}

• throw()方法
• Generator.prototype.throw()
  Generator 函数返回的遍历器对象，都有一个throw方法，可以在函数体外抛出错误，然后在 Generator 函数体内捕获。

    var g = function* () {
      try {
        yield;
      } catch (e) {
        console.log('内部捕获到错误', e);
      }
    };
    var i = g();
    i.next();
    //外部抛出错误：
    i.throw('a');

2.使用场景

• 实现 Iterator
  为不具备 Iterator 接口的对象提供遍历方法。

function* objectEntries(obj) {
    const propKeys = Reflect.ownKeys(obj);
    for (const propKey of propKeys) {
        yield [propKey, obj[propKey]];
    }
}
 
const jane = { first: 'Jane', last: 'Doe' };
for (const [key,value] of objectEntries(jane)) {
    console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe

16、ES6 async 函数

参考： link1

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

• 语法

async function name([param[, param[, ... param]]]) { statements }
- name: 函数名称。
- param: 要传递给函数的参数的名称。
- statements: 函数体语句。
"返回值"
async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，
等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。
await 关键字仅在 "async function" 中有效。如果在 "async function" 函数体外使用 await ，你只会得到一个语法错误。

function testAwait(){
   return new Promise((resolve) => {
       setTimeout(function(){
          console.log("testAwait");
          resolve();
       }, 1000);
   });
}
 
async function helloAsync(){
   await testAwait();
   console.log("helloAsync");
 }
helloAsync();
// testAwait
// helloAsync

• await
  await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。
  [return_value] = await expression;
  expression: 一个 Promise 对象或者任何要等待的值。

正常情况下，await 命令后面是一个 Promise 对象，它也可以跟其他值，如字符串，布尔值，数值以及普通函数。

function testAwait(){
   console.log("testAwait");
}
async function helloAsync(){
   await testAwait();
   console.log("helloAsync");
}
helloAsync();
// testAwait
// helloAsync

await针对所跟不同表达式的处理方式：

• Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。
• 非 Promise 对象：直接返回对应的值。