es6 & es7& es8语法总结

1. let const 作用域

2.变量解构赋值，ps：如果解构不成功，变量的值就等于undefined。

1）数组解构：

例：

\tlet [a, b, c] = [1, 2, 3];\t// a=1 b =2 c=3 
\tlet [foo, [[bar], baz]] = [1, [[2], 3]];
\tlet [ , , third] = ["foo", "bar", "baz"]; // third "baz"
\t解构赋值允许指定默认值,例如：let [foo = true] = []; //foo true

2）对象解构：

例：

\t\tlet { bar, foo } = { foo: "aaa", bar: "bbb" };\t\tfoo // "aaa" bar // "bbb"
\t\tlet { foo: baz } = { foo: "aaa", bar: "bbb" };\t\tbaz // "aaa" foo // error: foo is not defined

函数扩展，参数可以设置默认值

3）字符床解构

例：

 const [a, b, c, d, e] = 'hello';\t\ta // "h"\tb // "e"\tc // "l"\td // "l" \te // "o"

类似数组的对象都有一个length属性，因此还可以对这个属性解构：let {length : len} = 'hello';len // 5

4）数值和布尔值的解构赋值

例如：解构赋值时，如果等号右边是数值和布尔值，则会先转为对象

\tlet {toString: s} = 123;\t\ts === Number.prototype.toString // true

5）函数参数的解构赋值

例如：

\tlet {toString: s} = 123;\ts === Number.prototype.toString // true

3. 函数扩展：参数可设置默认值

例：

\tfunction log(x, y = 'World') {
 \t\tconsole.log(x, y);
\t}

4. 数组扩展：将一个数组转为用逗号分隔的参数序列

例如：

 function add(x, y) {
 return x + y;
 }
const numbers = [4, 38];
add(...numbers) // 42

5. 对象的扩展：

let birth = '2000/01/01';
const Person = {
 name: '张三',
 //等同于birth: birth
 birth,
 // 等同于hello: function ()...
 hello() { console.log('我的名字是', this.name); }
};

比较两个值是否相等：Object.is('foo', 'foo')

对象的合并：Object.assign()

例：

\t\tconst target = { a: 1 };
\t const source1 = { b: 2 };
\t const source2 = { c: 3 }; 
\t Object.assign(target, source1, source2); target // {a:1, b:2, c:3}

6. symbol

1）新的原始数据类型Symbol，表示独一无二的值，

 // 没有参数的情况
 let s1 = Symbol();\tlet s2 = Symbol();
 s1 === s2 // false
 // 有参数的情况
 let s1 = Symbol('foo');\tlet s2 = Symbol('foo');
 s1 === s2 // false

2）作为属性名可以保证不会与其他属性名产生冲突

 let mySymbol = Symbol();
 let a = {};
 // 第一种写法
 a[mySymbol] = 'Hello!';

7. set和map的数据结构

1）set本身是一个构造函数，类似于数组，但是成员的值都是唯一的，没有重复的值

操作方法：

\tlet set = new Set();\t//参数可放数组或者类似数组的对象
\tset.add(2);\t\t添加某个值，返回 Set 结构本身。
 s.delete(2);\t\t删除某个值，返回一个布尔值，表示删除是否成功。 

 s.has(2) \t\t\t回一个布尔值，表示该值是否为Set的成员。
 set.clear();\t\t清除所有成员，没有返回值。

可用于数组去重：

 function dedupe(array) {
 \treturn Array.from(new Set(array));\t//Array.from方法可以将 Set 结构转为数组
 }
 dedupe([1, 1, 2, 3]) // [1, 2, 3]

2)Map 类似于对象

8. proxy用于修改某些操作的默认行为，等同于在语言层面做出修改

例如：

 var person = { name: "张三"};
 var proxy = new Proxy(person, {
 get: function(target, property) {
 if (property in target) {
 return target[property];
 } else {
 throw new ReferenceError("Property \\"" + property + "\\" does not exist.");
 }
 }
 });
 proxy.name // "张三"
 proxy.age // 抛出一个错误

9 .reflect与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API;

1) 将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上

2) 修改某些Object方法的返回结果，让其变得更合理。

10.promise是异步编程的一种解决方案，相当于一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

此外，Promise对象提供统一的接口，使得控制异步操作更加容易

特点：1）对象的状态不受外界影响 ；2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。

例如：

 const promise = new Promise(function(resolve, reject) {
 // ... some code
 if (/* 异步操作成功 */){
 resolve(value);\t\t//将Promise对象的状态从“未完成”变为“成功”
 } else {
 reject(error);\t\t//将Promise对象的状态从“未完成”变为“失败”
 }
 });

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数

 promise.then(function(value) { 

 // success
 }, function(error) {
 // failure
 });

\t1）. Promise.prototype.then(fn1,fn2)\t\t//第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数
\t2). Promise.prototype.catch()\t\t\t//用于指定发生错误时的回调函数。
\t3).Promise.prototype.finally()\t\t\t//用于指定不管 Promise 对象最后状态如何，都会执行的操作
\t4）Promise.all() \t\t\t\t\t\t//用于将多个 Promise 实例包装成一个新的 Promise 实例。
\t5).Promise.race\t\t\t\t\t\t//方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。
\t6).Promise.resolve\t\t\t\t\t//将现有对象转为 Promise 对象

11. Generator 函数管理流程，其实提供了一种可以暂停执行的函数

特征：1）function关键字与函数名之间有一个星号；

2）函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

执行 Generator 函数会返回一个遍历器对象

例如：

 function* helloWorldGenerator() {
 yield 'hello';
 yield 'world';
 return 'ending';
 }
 var hw = helloWorldGenerator(); 

 hw.next()\t// { value: 'hello', done: false }
 hw.next()\t// { value: 'world', done: false }
 hw.next()\t// { value: 'ending', done: true }
 hw.next()\t// { value: undefined, done: true }

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

async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

改造Generator 函数，和普通函数一样调用后自动往下执行

例如：

 function timeout(ms) {
 return new Promise((resolve) => {
 setTimeout(resolve, ms);
 \tconosle.log(1111)
 });
 }
 async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value);
 }
 asyncPrint('hello world', 50); \t // 1111 'hello world'

13. get/set访问器：

作用：1. 限制一个变量是否可以被访问或是否可以被重写 2. 在访问或重写时可以执行其他语句进行处理

es7

1、求幂运算

\t\t3 ** 2 // 9

2、Array.prototype.includes() 查找一个值在不在数组里，若在，则返回true，反之返回false

\t['a', 'b', 'c'].includes('a') // true
\t['a', 'b', 'c'].includes('d') // false

接收两个参数：要搜索的值和搜索的开始索引。当第二个参数被传入时，该方法会从索引处开始往后搜索（默认索引值为0）。若搜索值在数组中存在则返回true，否则返回false

\t['a', 'b', 'c', 'd'].includes('b') // true
 ['a', 'b', 'c', 'd'].includes('b', 1) // true
 ['a', 'b', 'c', 'd'].includes('b', 2) // false

ps: ['a', 'b', 'c'].indexOf('a') > -1 也可以用来判断数组中是否含有某项，

区别在于：1、includes更简便

2、includes更精确，includes()方法中，两个NaN被认为是相等的，即使在NaN === NaN，和indexOf()的行为不同，indexOf()严格使用===判断

\tlet demo = [1, NaN, 2, 3]
\tdemo.indexOf(NaN) //-1
\tdemo.includes(NaN) //true 

es8

1、异步函数(Async functions)

目标：实现现JavaScript语言的异步编程，避免“回调函数地狱”，解决Promise链式调用造成的代码冗余

实现：

引入了另外一种异步编程的机制：Generator（带星号），Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行

 function* helloWorldGenerator() {
 yield 'hello';
 yield 'world';
 return 'ending';
 }
 var hw = helloWorldGenerator();
 \thw.next() // { value: 'hello', done: false }
 hw.next() // { value: 'world', done: false }
 \tES8引入了async函数，自动执行Generator函数的方法
 \tasync function asyncFunc(params) {
 \tconst result1 = await this.login()
 \tconst result2 = await this.getInfo()
 \t}

2、Object.entries()和Object.values()

\tObject.entries({ one: 1, two: 2 }) //[['one', 1], ['two', 2]]
 Object.entries([1, 2]) //[['0', 1], ['1', 2]] 

\tObject.values({ one: 1, two: 2 }) //[1, 2]
 Object.values({ 3: 'a', 4: 'b', 1: 'c' }) //['c', 'a', 'b']