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

2022-10-09 111

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

一、Symbol 的基础学习

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

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

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

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

3.Symbol创建唯一的值

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

4.Symbol的应用

const Method = {
  say:Symbol(),
  play:Symbol(),
  }   
const Person = {
  realname:"张三",
  age:19,
  say(){
  console.log('会说话');     
    }
    }
Person[Method.say] = ()=>{
  console.log("会说话");
    }   
Person[Method.play] = ()=>{
  console.log("会玩游戏");
    }
// 1:获得所有的key
const keys = Reflect.ownKeys(Person);
onsole.log(keys);    // ['realname', 'age', 'say', Symbol(), Symbol()]
// 2:获得symbol的keys
const sysbolKeys = Object.getOwnPropertySymbols(Person);
console.log(sysbolKeys);   //[Symbol(), Symbol()]
// 3:调用方法
Person[sysbolKeys[0]](); //会说话
Person[sysbolKeys[1]](); //会玩游戏

二、迭代器的基本用法

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

1. 迭代器接口定义

迭代器接口定义

let arr = ['a','b','c'];
let myIte = arr[Symbol.iterator]();
console.log(myIte.next());

2.接口的应用

迭代器接口应用

const Stu = {
title:"web2209",
persons:['张三','李四','王五'],
[Symbol.iterator](){
     let i=0;
 return{
     next:()=>{
if(i<this.persons.length){
      const Obj = {value:this.persons[i],done:false}
      i++;
      return Obj;
      }else{
       return {value:undefined,done:true};
                        }
                    }
                }
            }
        }
const Myite = Stu[Symbol.iterator]();
console.log(Myite.next());
console.log(Myite.next());
console.log(Myite.next());
console.log(Myite.next());
// for(let v of Stu){   // 直接访问
//     console.log(v);
// }

三、生成器

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

1.生成器的定义

// 生成器的定义
function  * ride(num){
console.log("函数执行了...");
yield num*2;
console.log("第二步...");
yield num*4;
console.log("第三步...");
yield num*8;
console.log("函数执行end...");
    }
const myride = ride(10);//生成器函数调用的时候 会生成一个迭代器对象
console.log(myride.next()); 
console.log(myride.next()); 
console.log(myride.next());
console.log(myride.next());
//控制台显示
函数执行了...
{value: 20, done: false}
第二步...
{value: 40, done: false}
第三步...
{value: 80, done: false}
函数执行end...
{value: undefined, done: true}

2.生成器的传参

// 生成器的传参
function  * ride(num){
let a1 = yield num*2;
  console.log(a1);
let a2 = yield a1*4;
  console.log(a2);
let a3 = yield a2*8;
  onsole.log(a3);
    }
const myride = ride(30);
console.log(myride.next());
console.log(myride.next(20));//a1就是20
console.log(myride.next(30));//a2就是30
console.log(myride.next(40));//a3就是40
//控制台内容
{value: 60, done: false}
20
{value: 80, done: false}
30
{value: 240, done: false}
40
{value: undefined, done: true}