0


ES6中 Symbol 的基础学习,迭代器和生成器的基本用法

一、Symbol 的基础学习

1.Symbol是惟一的,即使同一一个变量生成的也不相等

  1. const a = Symbol("a");
  2. const b = Symbol("a");
  3. console.log(a===b);//false

2.不能与运算符计算,会直接报错

  1. const a = Symbol("a");
  2. const b = Symbol("a");
  3. a+1;//报错

3.Symbol创建唯一的值

  1. const a = Symbol.for("a");
  2. const b = Symbol.for("a");
  3. console.log(a===b);//true

4.Symbol的应用

  1. const Method = {
  2. say:Symbol(),
  3. play:Symbol(),
  4. }
  5. const Person = {
  6. realname:"张三",
  7. age:19,
  8. say(){
  9. console.log('会说话');
  10. }
  11. }
  12. Person[Method.say] = ()=>{
  13. console.log("会说话");
  14. }
  15. Person[Method.play] = ()=>{
  16. console.log("会玩游戏");
  17. }
  18. // 1:获得所有的key
  19. const keys = Reflect.ownKeys(Person);
  20. onsole.log(keys); // ['realname', 'age', 'say', Symbol(), Symbol()]
  21. // 2:获得symbol的keys
  22. const sysbolKeys = Object.getOwnPropertySymbols(Person);
  23. console.log(sysbolKeys); //[Symbol(), Symbol()]
  24. // 3:调用方法
  25. Person[sysbolKeys[0]](); //会说话
  26. Person[sysbolKeys[1]](); //会玩游戏

二、迭代器的基本用法

迭代器为所有数据结构提供了统一的访问机制。只要为数据结构部署了接口,就可以进行遍历操作。就是为遍历而生。

1. 迭代器接口定义

  1. 迭代器接口定义
  2. let arr = ['a','b','c'];
  3. let myIte = arr[Symbol.iterator]();
  4. console.log(myIte.next());

2.接口的应用

  1. 迭代器接口应用
  2. const Stu = {
  3. title:"web2209",
  4. persons:['张三','李四','王五'],
  5. [Symbol.iterator](){
  6. let i=0;
  7. return{
  8. next:()=>{
  9. if(i<this.persons.length){
  10. const Obj = {value:this.persons[i],done:false}
  11. i++;
  12. return Obj;
  13. }else{
  14. return {value:undefined,done:true};
  15. }
  16. }
  17. }
  18. }
  19. }
  20. const Myite = Stu[Symbol.iterator]();
  21. console.log(Myite.next());
  22. console.log(Myite.next());
  23. console.log(Myite.next());
  24. console.log(Myite.next());
  25. // for(let v of Stu){ // 直接访问
  26. // console.log(v);
  27. // }

三、生成器

生成器是一种特殊的函数,是ES6提出的异步编程的解决方案,解决回调地狱的问题。

1.生成器的定义

  1. // 生成器的定义
  2. function * ride(num){
  3. console.log("函数执行了...");
  4. yield num*2;
  5. console.log("第二步...");
  6. yield num*4;
  7. console.log("第三步...");
  8. yield num*8;
  9. console.log("函数执行end...");
  10. }
  11. const myride = ride(10);//生成器函数调用的时候 会生成一个迭代器对象
  12. console.log(myride.next());
  13. console.log(myride.next());
  14. console.log(myride.next());
  15. console.log(myride.next());
  16. //控制台显示
  17. 函数执行了...
  18. {value: 20, done: false}
  19. 第二步...
  20. {value: 40, done: false}
  21. 第三步...
  22. {value: 80, done: false}
  23. 函数执行end...
  24. {value: undefined, done: true}

2.生成器的传参

  1. // 生成器的传参
  2. function * ride(num){
  3. let a1 = yield num*2;
  4. console.log(a1);
  5. let a2 = yield a1*4;
  6. console.log(a2);
  7. let a3 = yield a2*8;
  8. onsole.log(a3);
  9. }
  10. const myride = ride(30);
  11. console.log(myride.next());
  12. console.log(myride.next(20));//a1就是20
  13. console.log(myride.next(30));//a2就是30
  14. console.log(myride.next(40));//a3就是40
  15. //控制台内容
  16. {value: 60, done: false}
  17. 20
  18. {value: 80, done: false}
  19. 30
  20. {value: 240, done: false}
  21. 40
  22. {value: undefined, done: true}
标签: es6 前端 开发语言

本文转载自: https://blog.csdn.net/yzq0820/article/details/125858353
版权归原作者 小余努力搬砖 所有, 如有侵权,请联系我们删除。

“ES6中 Symbol 的基础学习,迭代器和生成器的基本用法”的评论:

还没有评论