ES6-9

暑假第四周学习
ES6-9

一、迭代器

迭代器（iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署了iterator接口，就可以完成遍历操作。
作用：

为各种数据结构，提供一个统一的、简便的访问接口；
使得数据结构的成员能够按某种次序排列
ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费。
原生具备iterator接口的数据(可用for of遍历)
1、Array
2、arguments
3、set容器
4、map容器
5、String
6、TypedArray
7、NodeList

 // 原生测试  数组
        let arr3 = [1, 2, 'kobe', true];
        for(let i of arr3){
          console.log(i);
        }
        // 字符串  string
        let str = 'abcdefg';
        for(let item of str){
          console.log(item);
        }

二、 Generator函数（生成器函数）

概念：
1、ES6提供的解决异步编程的方案之一
2、Generator函数是一个状态机，内部封装了不同状态的数据
3、用来生成遍历器对象
4、可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果

 //yield函数代码分隔符
    function * generatorTest() {
      console.log('函数开始执行');
      yield 'hello';
      console.log('函数暂停后再次启动');
      yield 'generator';
    }
    //利用next方法来向下执行
    iterator.next();

解决回调地狱

  <script>
   function one(){
     setTimeout(() => {
       console.log(111)
       iterator.next()
     }, 1000);
   }
   function twe(){
     setTimeout(() => {
       console.log(222)
       iterator.next()
     },2000);
   }
   function three(){
     setTimeout(() => {
       console.log(333)
       iterator.next()
     }, 3000);
   }
   function * gen(){
     yield one();
     yield twe();
     yield three()
   }
   //调用生成器构造函数
   let iterator=gen()
   iterator.next()
  </script>
</body>
</html>

三、Promise

Promise是ES6引入编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

1. Promise构造函数：Promise（excutor）{}

2. Promise.prototype.then方法

3. Promise.prototype.catch方法

<script type="text/javascript">
    //创建一个promise实例对象
    let p=new Promise(function(resolve,reject){
      //进行异步操作
      setTimeout(() => {
        let a='进行数据库操作'
      let b='数据库操作失败'
        //resolve调用成功
       // resolve(a)
        //reject调用失败
        reject(b)
      }, 2000);
    })
    //Promise有一个.then方法调用
    p.then(
      //成功调用此函数
      function(value){
      console.log(value)
    },
    //失败
    function(reason){
       console.log(reason)
    })
</script>

四、Set

ES6提供了新的数据结构Set（集合），它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用扩展运算符和for…of 进行遍历，集合的属性和方法：

1. size 返回集合的元素个数
2. add 增加一个新元素，返回当前元素
3. delete 删除元素，返回boolean值
4. has 检测集合中是否包含某个元素，返回Boolean值

五、Map

ES6提供了Map数据结构。它类似于对象，也是键值对的集合。但是"键"的范围不限于字符串，各种类型的值（包括对象）都可以当做键。Map也实现了iterator接口，所以可以使用扩展运算符和for…of 进行遍历。Map的属性和方法：

1. size 返回Map的元素个数

2. set 增加一个新元素，返回当前Map

3. get 返回键名对象的键值

4. has 检测Map中是否包含某个元素，返回Boolean值

5. clear 清空集合，返回undefined

   //创建一个空map
   
   let m = new Map();
   
   //创建一个非空map
   

六、class类

ES6提供了更接近传统语言的写法，引入了class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

知识点：

1. class声明类

2. constructor定义构造函数初始化

3. extends继承父类

4. super调用父级构造方法

5. static定义静态方法和属性

6. 父类方法可以重写

七、数值扩展

1.Number.EPSILON是JavaScript表示的最小精度

2.二进制和八进制

3.Number.isFinite 检测一个数值是否为有限数

4.Number.isNaN 检测一个数值是否为NaN

5.Number.parseInt Number.parseFloat 字符串转整数

6.Number.isInteger 判断一个数是否为整数

7.Math.trunc 将数字的小树部分抹掉

8.Math.sign 判断一个数到底为正数 负数 还是零

对象扩展方法

1.Object.is 判断两个值是否完全相等

2.Object.assign 对象的合并

3.Object.setPrototypeOf Object.getPrototypeOf 设置原型对象

八、模块化

是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来

模块化的好处

1）防止命名冲突

2）代码复用

3）高维护性

模块化规范产品

ES6之前的模块化规范有：

1.CommonJS => NodeJS、Browserify

2.AMD => requireJS

3.CMD => seaJS

九、ES6模块化语法

模块功能主要有两个命令构成：export 和 import

export命令用于规定模块的对外接口

import命令用于输入其他模块提供的功能

暴露语法

export default{
    school:'HAHA',
    change:function(){
        console.log('哈哈');
    }
}

分别暴露：在要暴露的前面加export

统一暴露：在所有要暴露的对象前面加export{xx，xx}

引入入口文件形式：

<script src="./src/aa.js" type="module"></script>

Babel

是一个JavaScript的编译器。

1.安装工具 babel-cli babel-preset-env browserify(webpack)

2.npx babel(局部安装) src/js -d dist/js

3.打包 npx browserify dist/js/aa.js -0 dist/bundle.js

（这部分还是迷迷糊糊的，没太搞懂，而且运行的时候报错）

十、ES7-9

ES7新特性

1.Array.prototype.includes

includes方法用来检测数组中是否包含某个元素，返回布尔类型值

2.指数操作符

在ES7中引入指数运算符[**]，用来实现幂运算，功能与Math.pow结果相同

ES8新特性

1.async和await

async和await两种语法结合可以让异步代码想要同步代码一样

2.async函数

async函数的返回值为promise对象，promise对象的结果有async函数执行的返回值决定

3.awsit表达式

• await必须写在async函数中
• await右侧的表达式一般为promise对象
• await返回的是promise成功的值
• await的promise失败了，就会抛出异常，需要通过trv…catch捕获处理

<script>
        //发送AJAX请求，返回的结果是Promise对象
        function sendAJAX(url){
            //1.创建对象
            const x =new XMLHttpRequest();
            //2.初始化
            x.open('GET',url);
            //3.发送
            x.send();
            //4.事件绑定
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status >= 200 && x.status <300){
                        resolve(x.response);
                    } else{
                        reject(x.status);
                    }
                }
            }
        }
    
        //Promise then测试                      			                 	  						sendAJAX('https://api.apiopen.top/getJoke')
        .then(value=>{
           console.log(value);
       },reason=>{})

        //async和await测试
        async function main(){
             //发送AJAX请求
             let result = await sendAJAX('https://api.apiopen.top/getJoke')
                console.log(result);
            }
        </script>

4. Object.values和Object.entries

• Object.values()方法返回一个给对象的所有可枚举属性值的数组
• Object.entries()方法返回一个给定对象自身可遍历属性[key,value]的数组

5. Obeject.getOwnPropertyDescriptors

   ​ 该方法返回指定对象所有自身属性的描述对象

ES9

在ES9中为对象提供了像数组一样的rest参数和扩展运算符

1.正则扩展—命名捕获分组

2.正则扩展—反向断言

//声明字符串
let str = '4315t16你知道么555啦啦啦';
//正向断言
const reg = /\d+(?=啦)/;
const result = reg.exec(str);
//反向断言
const reg = /(?<=么)\d+/;
const result = reg.exec(str);

?=(<=,>=,<,>)表示判断，\d表示数字0-9, .*? 万能匹配公式

3.正则扩展—dotAll模式

十一、总结

这周学习的内容，感觉让我很吃力，学的不是太明白，有很多地方似懂非懂，比如Promise封装类、暴露语法、正则语法等等，都不是很通透，下周再把这次学习的复习一下。然后，这周学习时间虽然比上周长一点，但效率还是很差，总是想玩，每次都说早起学习，但天一亮就摸手机，在床上待到八九点，然后在磨叽磨叽，一上午时间就没有多少了。前几天下午还睡午觉，然后下午就啥也不想干，后几天改变策略，中午不睡觉，先玩一会再学，感觉好一点。夜晚有时候学到很晚，但有时候不到九点就上床睡觉了。这种在家的作息规律，让我很是苦恼，多次想改掉，都没有实现。一周就这样过去了，希望下周我能改变这种坏习惯。今日事，今日毕。明日复明日，明日何其多。我们要把握每一个今天。
下周学习计划

• 复习es6-11
• 做华为官网
• 学习echarts 一部分