ES5_6_7-Generator函数&深度克隆

最新推荐文章于 2022-08-07 21:33:15 发布

轻小說控

最新推荐文章于 2022-08-07 21:33:15 发布

阅读量314

点赞数

分类专栏：前端 ES5_6_7 文章标签： ES5_6_7-Generator函数&深度克隆

本文链接：https://blog.csdn.net/Aqours/article/details/100856700

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

ES5_6_7

3 篇文章 0 订阅

订阅专栏

ES5_6_7

ES6_Generator函数

概念
- 1、ES6提供的解决异步编程的方案之一
- 2、Generator函数是一个状态机，内部封装了不同状态的数据，
- 3、用来生成遍历器对象
- 4、可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果
特点：
- 1、function 与函数名之间有一个星号(*)
- 2、内部用yield表达式来定义不同的状态
- ```
例如：
  function* generatorExample(){
    let result = yield 'hello';  // 状态值为hello
    yield 'generator'; // 状态值为generator
  }
```
- 3、generator函数返回的是指针对象(接11章节里iterator)，而不会执行函数内部逻辑
- 4、调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true}
- 5、再次调用next方法会从上一次停止时的yield处开始，直到最后
- 6、yield语句返回结果通常为undefined，当调用next方法时传参内容会作为启动时yield语句的返回值。

<script type="text/javascript">

    //测试
    function* generatorTest() {
      console.log('函数开始执行');
      yield 'hello';
      console.log('函数暂停后再次启动');
      let result=yield 'generator';
      console.log(result);
    }
    // 生成遍历器对象
    let Gt = generatorTest();//返回的是指针对象
    // 执行函数，遇到yield后即暂停
    console.log(Gt); // 遍历器对象
    let result = Gt.next(); // 函数执行,遇到yield暂停
    console.log(result); // {value: "hello", done: false}
    result = Gt.next(); // 函数再次启动
    console.log(result); // {value: 'generator', done: false}
    result = Gt.next('这里可以传值');//yield的语句默认返回undefined,如果不传值默认undefined
    console.log(result); // {value: undefined, done: true}表示函数内部状态已经遍历完毕

    // 对象的symbol.iterator属性  指向遍历器对象
    let obj={usernameL:'xuefeng',age:12};

    obj[Symbol.iterator]=function* myTest() {
      yield 1,
      yield 2,
      yield 3
    };
    for (let i of obj) {
      console.log(i);
    }//输出 1 2 3

</script>

ES6_Generator函数应用

第一步先开服务器 cmd中
- F:\前端视频教程\9尚硅谷-ES5_6_7\code\ES5_6_7\code\es_server>node bin/www
测试服务器是否打开

<script type="text/javascript">

    // 案例练习
    /*
    * 需求：
    * 1、发送ajax请求获取新闻内容
    * 2、新闻内容获取成功后再次发送请求，获取对应的新闻评论内容
    * 3、新闻内容获取失败则不需要再次发送请求。
    * 
    * */ 
    function getNews(url) {
      $.get(url,function (data) {
        console.log(data);
        let url= `http://localhost:3000`+data.commentsUrl;
        SX.next(url);//此处传入url会作为 yield getNews(url);中的url
        //回调函数中的next函数被调用，就说明前面一定执行成功
      })
    }
    function* sendXML() {
      let url=yield getNews('http://localhost:3000/news?id=3');
      yield getNews(url);
    }
    //获取遍历器对象
    let SX=sendXML();
    SX.next();//先调用这个next方法   此时指针下移

</script>

ES6_async函数详解及应用

async函数(源自ES2017)
概念：真正意义上去解决异步回调的问题，同步流程表达异步操作
本质： Generator的语法糖

语法:

async function foo(){
  await 异步操作;
  await 异步操作；
}

特点:
- 1、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
- 2、返回的总是Promise对象，可以用then方法进行下一步操作
- 3、async取代Generator函数的星号*，await取代Generator的yield
- 4、语意上更为明确，使用简单，经临床验证，暂时没有任何副作用

<script type="text/javascript">
  //async的基本使用
  async function foo() {
    return new Promise( resolve => {
//      setTimeout(function () {
//        resolve();
//      },2000)
    setTimeout(resolve(),2000);
    })
  }
  
  async function test() {
    console.log('开始执行',new Date().toTimeString());
    await foo();
    console.log('执行完毕',new Date().toTimeString());
  }
  test();

  //async里await返回值

  async  function  asyncPrint() {
  let result=await Promise.resolve('promise');
  console.log(result);
  result=await  Promise.reject('失败了...');
  console.log(result);
  }
  asyncPrint();//报错 Uncaught (in promise) 失败了...
  </script>

 <script type="text/javascript">
     // 案例练习
    /*
    * 需求：
    * 1、发送ajax请求获取新闻内容
    * 2、新闻内容获取成功后再次发送请求，获取对应的新闻评论内容
    * 3、新闻内容获取失败则不需要再次发送请求。
    * 
    * */ 
 async  function getNews(url) {
    return new Promise((resolve, reject) => {
      $.ajax({
        method: 'GET',
        url,//同名的属性可以省略不写
        success: data => resolve(data),//ES6箭头函数
        /*error: function (error) {//正常写法
          reject();
        }*/
        error: error =>resolve(false)//当出错的时候  返回false
      })
    })
  }
  
  async  function sendXML() {
    let result=await  getNews('http://localhost:3000/news?id=2')
    console.log(result);
    if(!result){alert('暂时没有评论');}//出错result为false 取反就为true
    result=await getNews('http://localhost:3000'+result.commentsUrl);
    console.log(result);
  }
  sendXML();
</script>

ES6_class类使用详解

通过class定义类/实现类的继承
在类中通过constructor定义构造方法
通过new来创建类的实例
通过extends来实现类的继承
通过super调用父类的构造方法
重写从父类中继承的一般方法

<script type="text/javascript">

  /*function Person(name.age) {
    this.age=age;
    this.name=name;
  }
  let person=new Person('xuefeng',12);*/

  //定义一个人物的类
  class Person{
    //类的构造方法
    constructor(name,age){
      this.name=name;
      this.age=age;
    }
    //类的一般方法
    showName(){
      console.log('子类实例也能调用我');
      console.log(this.name,this.age);
    }//这些方法都定义在原型上
  }
  let person=new Person('tianjinfeng',12);
  person.showName();

  class StarPerson extends Person{
    constructor(name,age,salary){
      super(name,age);//调用父类的构造方法  一定要把父类构造器的参数传过来
      this.salary=salary;
    }
    showName() {//父类的方法重写
      console.log('调用子类的方法');
      console.log(this.name,this.age,this.salary);
    }
  }
  let p1=new StarPerson('daofeng',12,12000);
  console.log(p1);
  p1.showName();//daofeng 12 12000
</script>

ES6_字符串，数组的扩展

includes(str) : 判断是否包含指定的字符串
startsWith(str) : 判断是否以指定字符串开头
endsWith(str) : 判断是否以指定字符串结尾
repeat(count) : 重复指定次数

<script type="text/javascript">
  let str='awsl';
  console.log(str.includes('a'));//true
  console.log(str.startsWith('a'));//true
  console.log(str.endsWith('l'));//true
  
  console.log(str.repeat(3));//awslawslawsl
</script>

二进制与八进制数值表示法: 二进制用0b, 八进制用0o
Number.isFinite(i) : 判断是否是有限大的数
Number.isNaN(i) : 判断是否是NaN
Number.isInteger(i) : 判断是否是整数
Number.parseInt(str) : 将字符串转换为对应的数值
Math.trunc(i) : 直接去除小数部分

<script type="text/javascript">
  console.log(0b1010);//10
  console.log(0o75);//61
  
  console.log(Number.isFinite(Infinity));//false  Infinity为无限大的书
  console.log(Number.isNaN(NaN));//true
  console.log(Number.isInteger(123.0));//true
  console.log(Number.parseInt('a1s5d6'));//NaN
  console.log(Number.parseInt('123a'));//123
  console.log(Math.trunc(123.231));//123
</script>

ES6_数组方法的扩展

Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
Array.of(v1, v2, v3) : 将一系列值转换成数组
find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标

<script type="text/javascript">
  let btns=document.getElementsByTagName('button');//这得到的数组就是伪数组,伪数组没有数组的一般方法
 /* forEach(function (item,index) {
    console.log(item);
  });//报错  伪数组不能遍历*/
  Array.from(btns).forEach(function (item,index) {
    console.log(item);
  });
  
  let arr=Array.of(1,4,'awsl',false);
  console.log(arr);//(4) [1, 4, "awsl", false]
  
  let arr2=[4,5,8,1,9,3,7,6,5];
  let result=arr2.find(function (item,index) {
    return item>5;
  });
  console.log(result);//8
  let index=arr2.findIndex(function (item,index) {
    return item>5;
  });
  console.log(index);//2
</script>

ES6_对象方法的扩展

1.Object.is(v1, v2) :判断2个数据是否完全相等以字符串形式判断
2.Object.assign(target, source1, source2…) :将源对象的属性复制到目标对象上
3.直接操作 __proto__ 属性 let obj2 = {}; obj2.__proto__ = obj1;

<script type="text/javascript">
  console.log(0 == -0);//true
  console.log(NaN == NaN);//false  NaN与任何值都不相等
  console.log(Object.is(0,-0));//false  字符串0和字符串-0是不一样的
  console.log(Object.is(NaN,NaN));//true  以字符串的形式来判断
  
  let obj={};
  let obj1={username: 'xuefeng',age:12};
  let obj2={sex:'女'};
  Object.assign(obj,obj1,obj2);
  console.log(obj);//age: 12 sex: "女" username: "xuefeng"
  
  let obj3={};
  let obj4={money :12000};
  obj3.__proto__=obj4;
  console.log(obj3);//{}
  console.log(obj3.money);//12000
</script>

ES6_set，map容器详解

1.Set容器 : 无序不可重复的多个value的集合体
- Set()
- Set(array)
- add(value)
- delete(value)
- has(value)
- clear()
- size
2.Map容器 : 无序的 key不重复的多个key-value的集合体
- Map()
- Map(array)
- set(key, value)//添加
- get(key)
- delete(key)
- has(key)
- clear()
- size

<script type="text/javascript">
  let set=new Set(['a','w','s','l']);
  console.log(set.size,set);//4 Set(4) {"a", "w", "s", "l"}
  set.add(2);
  console.log(set.size,set);//5 Set(5) {"a", "w", "s", "l", 2}
  console.log(set.has('a'));//true
  
  let map=new Map([ ['daofeng',12],['xuefeng',12],['tianjinfeng',12]]);
  console.log(map);//Map(3) {"daofeng" => 12, "xuefeng" => 12, "tianjinfeng" => 12}
  map.set(10,'dian');
</script>

ES6_for of用法详解

for(let value of target){}循环遍历

1. 遍历数组
2. 遍历Set
3. 遍历Map
4. 遍历字符串
5. 遍历伪数组

<script type="text/javascript">
  let arr=[1,4,7,5,4,8];
  let arr1=arr;
  arr=[];
  let set=new Set(arr1);//Set方法可以用来去重
  for(let i of set){
    arr.push(i);//向arr里添加元素
  }
  console.log(arr);//Array(5)

</script>

ES6_深度克隆

1、数据类型：
- 数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型
  - 基本数据类型：
    特点：存储的是该对象的实际数据
  - 对象数据类型：
    特点： 存储的是该对象在栈中引用，真实的数据存放在堆内存里
2.复制数据
- 基本数据类型存放的就是实际的数据，可直接复制
  - let number2 = 2;
    let number1 = number2;
- 克隆数据：对象/数组
  - 1、区别： 浅拷贝/深度拷贝
    判断：拷贝是否产生了新的数据还是拷贝的是数据的引用
    知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用
    let obj = {username: ‘kobe’}
    let obj1 = obj; // obj1 复制了obj在栈内存的引用
  - 2、常用的拷贝技术
    1). arr.concat(): 数组浅拷贝
    2). arr.slice(): 数组浅拷贝
    3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据
    4). 浅拷贝包含函数数据的对象/数组
    5). 深拷贝包含函数数据的对象/数组

<script type="text/javascript">
  /*
  //不会影响原数据
  let str='abcd';
  let str2=str;
  console.log(str2);//abcd
  str2='';
  console.log(str);

  let bool1=true;
  let bool2=bool1;
  bool2=false;
  console.log(bool1);//true

  //会改变原数据
  let obj={username:'xuefeng',age:12};
  let obj1=obj;
  console.log(obj1);
  obj1.username='daofeng';
  console.log(obj.username);//daofeng

  //拷贝数组/对象 没有生成新的数据而是复制了一份引用
  let arr=[1,4,{username:'jifeng',age:12}];
  let arr2=arr;
  arr2[0]='awsl';
  console.log(arr,arr2);//Array(3) [ "awsl", 4, {…} ]  Array(3) [ "awsl", 4, {…} ]

  */
  /*
  拷贝数据:
    基本数据类型
      拷贝后生成一份新的数据,修改拷贝以后的数据不会影响原数据
    对象/数组
      拷贝后不会生成新的数据,而拷贝是引用, 修改拷贝后的数据会影响原来的数据
   拷贝数据的方法
    1.直接赋值给一个变量  //浅拷贝
    2.Object.assign()  //浅拷贝
    3.Array.prototype.concat() //浅拷贝
    4.Array.prototype.slice()  //浅拷贝
    5.JSON.parse(JSON.stringify())  //深拷贝(深度拷贝),拷的数据里不能有函数
  浅拷贝(对象/数组)：
    特点： 拷贝的引用,修改拷贝以后的数据也会影响原数据
  深拷贝(对象/数组):
    特点：拷贝的时候生成新数据,修改拷贝以后的数据不会影响原数据
   */
  let newObj={username:'dian'};
  let newObj2=Object.assign(newObj);
  console.log(newObj2);//{username: "dian"}
  newObj.username='feng';
  console.log(newObj);//{username: "feng"}
  console.log(newObj2);//{username: "feng"}

  let arr=[1,3,{username:'xiang'}];
  let arr2=arr.concat();//修改arr2的数据影响了原数据 所以是浅拷贝
  console.log(arr2);//Array(3) [ 1, 3, { username: "lei"} ]
  arr2[2].username='lei';
  console.log(arr);//Array(3) [ 1, 3, { username: "lei"} ]
  let arr3=arr.slice();//两个参数startIndex endIndex   修改了arr3的数据也影响了原数据 所以是浅拷贝
  arr3[2].username='shijinfeng';
  console.log(arr);//Array(3) [ 1, 3, { username: "shijinfeng"} ]
  console.log('*********');

  let arr4=JSON.parse(JSON.stringify(arr));//arr4改变没有修改原数据  所以是深拷贝
  console.log(arr4);//Array(3) [ 1, 3, { username: "yingfeng"} ]
  arr4[2].username='yingfeng';
  console.log(arr);//Array(3) [ 1, 3, { username: "shijinfeng"} ]
</script>

深度克隆的方法（此方法还有误,需要调试）

<script type="text/javascript">
/**
   * 如何实现深度拷贝(克隆)
   * 拷贝的数据里有对象/数组
   * 拷贝的数据里不能有对象/数组，
   *    即使有对象/数组可以继续遍历对象、数组拿到里面每一项值，一直拿到是基本数据类型，然后再去复制，就是深度拷贝
   */
  //知识储备
  /*
  如何判断数据类型  arr ---> Array  null==>Null
  1.typeof返回的数据类型:String Number Boolean Undefined Object Function
  2.Object.prototype.toString.call(obj)
  3.
   */
  let result='abcd';
  console.log(Object.prototype.toString.call(result));//[object String]
  console.log(Object.prototype.toString.call(result).slice(8,-1));//String

  //for in循环  对象(的属性名)  数组(的下标)
  let obj={username:'xuefeng',age:12};
  for (let i in obj){
    console.log(i);
  }
  let arr =[1,3,'awsl'];
  for (let i in arr){
    console.log(i);
  }

  //定义检测数据类型的功能函数
  function checkedType(target) {
    return Object.prototype.toString.call(target);
  }
  //实现深度克隆 --> 对象/数组
  function clone(target) {
    //判断拷贝的数据类型
    //初始化变量result 成为最终克隆的数据
    let result,targetType =checkedType(target);
    if(targetType === 'Object'){
      result ={};
    }else if(targetType === 'Array'){
      result=[];
    }else{
      return target;// 如果是其他数据类型不复制，直接将数据返回
    }

    //遍历目标数据
    for(let i in target){
      //获取遍历数据结构的每一项值
      let value=target[i];
      //判断目标结构里的每一项值是否存在对象/数组
      if(checkedType(value) === 'Object'||checkedType(value) ==='Array'){
        //继续遍历获取到的value值
        result[i]=clone(value);
      }else{//获取到的value值是基本的数据类型或者是函数
        result[i]=value;
      }
    }
    return result;
  }


  let arr3=[1,2,{username:'xuefeng',age:12}];
  let arr4=clone(arr3);
  console.log(arr4);//Array(3) [ 1, 2, { username: "xuefeng", age: 12} ]
  arr4[2].username='lian';
  console.log(arr3,arr4);

  let obj3={username:'tianjinfeng',age:12};
  let obj4=clone(obj3);
  console.log(obj4);//{username: "tianjinfeng", age: 12}
  obj4.username='shijinfeng';
  console.log(obj3,obj4);
</script>

ES7_方法介绍

1.指数运算符(幂): **
2.Array.prototype.includes(value) : 判断数组中是否包含指定value

<script type="text/javascript">
  console.log(3 ** 3);//27
  
  let arr=[1,4,7,59,11,'abv'];
  console.log(arr.includes('a'));//false  这里判断是否对等 不是模糊匹配
  
</script>

轻小說控

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES5_6_7-Generator函数&深度克隆

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

扫一扫