0


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

一、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}
标签: es6 前端 开发语言

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

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

还没有评论