ES6知识体系整理

@目录

1.ES6介绍@

• ECMAScript第六个版本 ECMAScript 是一个语言的标准 if switch var
  可以在JavaScript JavaScript ECMAscript + WEBapi（DOM、BOM） = JavaScript
  ActionScript + WEBapi（DOM、BOM）= flash ES是定义标准的，js是实现者，es的历史
  现在用到的最多的版本是ES3.1
  2013.12ES6.0草案发布

2.变量@

var、let、const
var 具备变量提升 可以重复声明

let:
1.let声明的变量不会挂在window中，不会造成全局变量的污染
2.新增了一个块级作用域{}，以前只有函数作用域，全局作用域
3.let是不允许重复声明
4.let不会有声明提前（只是人为看到的效果，实际上是有声明提前，提前临时性的死区中：Cannot access ‘num’ before initialization）

const 常量：
1.跟let完全相同 增加几个点
2.不允许被修改,不允许改变内存空间的地址
3.const声明和赋值必须一次性完成，并且后期不允许改变存储空间的地址

3.类和对象的改进@

1. 提供了关键字 class 定义类

2. 提供了关键字 extends 继承一个类

3. super()执行父类的初始化函数

4. 提供了对象字面量, 定义一个函数

4.解构赋值：@

let [a,b,c] = [1,2,3];
	     console.log(a,b,c);    //1,2,3

5.模板字符串 @

• ${表达式}字符串

 - var day = "今天天气不错"
        var str = "dsadasd"
         // console.log(`${day}${str}玩`)

6.函数 @

• 箭头函数：

• 箭头函数：
  语法：箭头函数是一个函数表达式，理论上，任何使用函数表达式都可以改成箭头函数
  (参数1，参数2)… => {

  }

nst obj = {
                count: 0,
                start: function() {
                    setInterval(() => {
                        console.log(this)
                        this.count++; //属于直接调用函数， this指向window
                        console.log(this.count)
                    }, 1000)
                },
                regEvert: function() {
                    var that =this  //备份this
                    window.onclick = () => {
                        console.log(this.count) //属于如果是DOM事件函数, this指向事件源对象
                    }
                },
                print: () => {
                    console.log(this)
                }

            }
            // obj.start();
            // obj.regEvert();
        const a = obj.print;
        a();
       // 箭头函数可以用来简写
       // 只有一条返回语句可以省略括号 用return  如下面这个例子
          const isodd=function(num){
                 return num%2 !==0;
              }
              //简写后
               const isodd = num => num % 2 !== 0;
        console.log(isodd(9))

7.对象@

1. ES6新增
   1.属性简写

   2.方法简写
   

 function createUser(loginid, loginpwd, nickName) {
     const say = function() {
         console.log(loginid, loginpwd)
     }
     return {/        loginid,
         loginpwd,
         nickName,
         say,
         fnc() { //方法速写，不是箭头函数  this指向这个对象
            console.log(this.loginid, this.loginpwd)
         }
     }
 }
 const user = createUser("01", "das", "das");
console.log(user);
 user.say();
 user.fnc();

    3.计算属性名

  const p1 = "name" //我们知道属性名，有后台返回给你的
    const p2 = "age";
    const p3 = "say"
    const user = {
        [p1]: "fyl",
        [p2]: 20,
        [p3]() {
            console.log(this[p1], this[p2]);
        }
    }
    console.log(user[p1])
    user[p3]();

8.新APl @

es提供新的数据类型有哪些?
Map映射, 存储多个键值对数据, 类似对象
Set集合, 存储多个不重复的数据

**.Map的用法
创建Map: new Map()
存储值 map.set(key,value)
获取值 map.get(key)
遍历 for(var [k,v] of map)
删除值 map.delete(k)
清空 map.clear()

.Set用法
创建Set: new Set()
添加值: set.add()
删除值: set.delete()
清空: set.clear()
遍历: for(var v in set.keys())**

9.promise

用同步的方法去处理异步，回调和事件处理来解决异步的问题	

unsettled未决阶段
settled 已决阶段
ES6事件总是从 未决阶段逐步发展到已决阶段，并且,未决阶段拥有控制通往已决阶段的能力

ES6将程序分为三种状态 Pending resolved rejected

• Pending :挂起(等待)处于未决阶段,表示事情还是挂起，最后的结果没有出来
• resolved:已处理 处于已决阶段，表示整个事情已决出现结果，并且可以按照正常的逻辑进行下去
• rejected:已拒绝 处于已决阶段，表示整个事情已决出现结果，并且一个无法按照正常逻辑进行下去的结果

把事情推向resolved 状态的过程，可能会传递一些数据,这些数据一般为错误信息，无论哪个状态都是不能逆的，当事情已经到达已决阶段后，通常要进行后续的处理，不同的已决问题，决定了不同的后续处理

后续的处理可能会有多个，因此会形成任务队列，这些后续处理会按照顺序，当达到对应的状态后依次执行 
const pro = new Promise((resolve,reject) => {
	未决阶段
	通过调用resolve函数将promise推向已决阶段的resolve状态
	通过调用reject函数将promise推向已决阶段的reject状态
	resolve 和 reject 只能使用一个，如果使用了多个，也只有第一个有用
	传递参数只能有一个，表示推向状态的数据
	resolve({})
	reject(456)
resolved 这是一个正常的已决状态，后续处理表示为 thenable
rejected 这是一个非正常的已决状态，后续处理表示为 catchable
})

举了例子
```javascript
const pro = new Promise((resolve, reject) => {
        //     //负责把promise对象推向 不同的状态
        //     resolve() //是推向完成阶段的成功阶段
        //     reject() //推向了一个失败的状态
        // })
pro.then(data=>{
	thenable函数，promise已经是已决阶段，resolve状态

},err => {
	catchable   reject状态
})

then(data=>{},err=>{}) //注册一个后续处理函数,当成promise为resolved状态是运行该函数,
        //   //promise为rejected状态的时候运行该函数的第二个参数
        //   catch() //注册一个后续处理函数,当成promise为rejected状态是运行该函数,习惯把失败写到catch中
	

 构造函数成员(静态成员)
        1.resolve
        Promise.resolve(1)

        const pro = new Promise((resolve, reject) => {
            resolve(1)
        })
        2.reject
        const pro = new Promise((resolve, reject) => {
            reject(1)
        })
        特殊情况：如果传递是promise，则直接返回传递promise对象

看上去是不是很麻烦，所以在ES2016中 新增了两个关键字 async await 为了简化promise的写法

async 用于去修饰函数(函数声明和函数表达式)，放在函数的开始位置,被修饰的函数一定返回promise对象
        // 简化了promise的创建  
        async function test() {
            // return 123;  
            // throw 123
        }
        const pro = test();
        console.log(pro)

9.迭代器和生成器

**在说迭代器和生成器之前我们先提出几个问题**

1. 迭代器是什么？答：是一个数据集合中按照一定的顺序,不断的取出数据的过程
2. 迭代和遍历有什么区别？答：迭代强调是依次取出，不能确定取出的有多少，也不能保证把数据全部取出来
3. 迭代模式：一种设计模式，用于同一迭代的过程，并且规范迭代器的规格
4. 迭代器的功能：① 迭代器有得到下一个数据的能力 ②有后续数据的能力
5. .迭代器 ： 对迭代过程的封装，通常为对象,不同的语言中，表现出来的迭代形式不一样

直接上迭代器的代码吗

   const arr = [1, 2, 3, 4, 5]
            //     for()

        const iterator = { //用于迭代数组的对象
            i: 0,
            next() {
                var result = {
                    value: arr[this.i],
                    done: this.i >= arr.length,
                }
                this.i++;
                return result;
            }

        }
        console.log(iterator); //这个对象为迭代器
        console.log(iterator.next());


        let data = iterator.next();
        while (!data.done) {
            console.log(data.value)
            data = iterator.next();
        }
        console.log(`迭代完成`)

迭代器还提供了一个for-of循环

  const divs = document.getElementsByTagName('div');
        for (const item of divs) {
            console.log(item)
        }

生成器

1. 什么是生成器 ：生成器就是通过构造函数generator创建出来的对象,生成器即是一个迭代器，同时又是一个可迭代的对象

2. 创建 只需要把函数变成generaot函数 加一个*
   // function* test() {

   // }
   

3.生成的内部执行
        // 关键字 yield 只能在函数内部使用,表示产生一个迭代数据
        // 每一次调用生成器的next方法,会将生成器函数运行到下一个yield关键字位置
        function* test() {
            console.log(123);

        }
        const generator = test();
        generator.next(); 

//还没更新完有时间在继续更新