首页 > 其他分享 >兼收并蓄 TypeScript - 进阶: iterator, generator

兼收并蓄 TypeScript - 进阶: iterator, generator

时间:2024-09-20 12:26:42浏览次数:1  
标签:TypeScript 进阶 generator value next done yield iterator

源码 https://github.com/webabcd/TypeScriptDemo
作者 webabcd

兼收并蓄 TypeScript - 进阶: iterator, generator

示例如下:

advanced\iterator_generator.ts

{
    /**
     * iterator - 迭代器(可迭代对象有 Array, TypedArray, Map, Set, String)
     *   next() - 迭代到下一个位置
     *     value - 当前位置的对象
     *     done - 当前位置是否是结尾
     *       true 代表结尾,也就是说,可迭代对象的最后一个元素的 done 仍然为 false,再之后才是 true
     */

    const a = ["a", "b", "c"];
    // [Symbol.iterator]() - 获取可迭代对象的迭代器
    const b = a[Symbol.iterator]();
    console.log(b.next(), b.next(), b.next(), b.next());
    // {value: "a", done: false} {value: "b", done: false} {value: "c", done: false} {value: undefined, done: true}


    // 通过 for...of 语句迭代可迭代对象(es6 中新增的方式)
    let c = ["a", "b", "c"];
    for (let item of c) {
        console.log(item);
    }
    // a
    // b
    // c


    // 用其他方式遍历(es5 中就有的方式)
    for (let i = 0; i < c.length; i++) { // for 语句
        console.log(c[i]);
    }
    // a
    // b
    // c
    for (let index in c) { // for...in 语句
        console.log(index, c[index]);
    }
    // 0 a
    // 1 b
    // 2 c
    c.forEach(item => { // forEach 语句
        console.log(item);
    });
    // a
    // b
    // c




    /**
     * Generator - 自定义可迭代对象,即可以支持 iterator 的对象
     *   通过 function* 定义生成器函数(generator function)
     *   每 next() 一下得到的是 generator function 的下一个 yield 的值
     *   yield 的返回值是此 yield 之后再次 next() 传进来的值
     *   如果 next() 后遇到了 return 则迭代结束,返回的 value 是 return 的值,得到的 done 为 true
     */
    function* generator() {
        yield 1;
        yield 2;
        return 3
    }
    let g = generator();
    console.log(g.next(), g.next(), g.next());
    // {value: 1, done: false} {value: 2, done: false} {value: 3, done: true}


    // 通过 yield* 在一个 function* 内调用另一个 function*
    function* generator_b() {
        yield 2;
        yield 3;
    }
    function* generator_a() {
        yield 1;
        yield* generator_b();
        return 4;
    }
    let ga = generator_a();
    console.log(ga.next(), ga.next(), ga.next(), ga.next());
    // {value: 1, done: false} {value: 2, done: false} {value: 3, done: false} {value: 4, done: true}


    // 以下为 generator 和 iterator 的应用:通过 generator 将一个对象变为支持 iterator 的对象
    function* objectEntries(obj:any) {
        const propKeys = Reflect.ownKeys(obj);
        for (const propKey of propKeys) {
            yield [propKey, obj[propKey]];
        }
    }
    let obj = { name: "webabcd", age: 40 };
    for (const [key,value] of objectEntries(obj)) {
        console.log(`${key}: ${value}`);
    }
    // name: webabcd
    // age: 40
}

源码 https://github.com/webabcd/TypeScriptDemo
作者 webabcd

标签:TypeScript,进阶,generator,value,next,done,yield,iterator
From: https://www.cnblogs.com/webabcd/p/18422275/typescript_advanced_iterator_generator

相关文章

  • 兼收并蓄 TypeScript - 进阶: proxy, reflect
    源码https://github.com/webabcd/TypeScriptDemo作者webabcd兼收并蓄TypeScript-进阶:proxy,reflect示例如下:advanced\proxy_reflect.ts{//Proxy-代理(拦截目标对象的属性操作和函数操作)lettarget={name:'webabcd',age:40,......
  • 兼收并蓄 TypeScript - 第三方库: 类型声明
    源码https://github.com/webabcd/TypeScriptDemo作者webabcd兼收并蓄TypeScript-第三方库:类型声明示例如下:third\typeDeclaration.ts/**类型声明用于TypeScript调用JavaScript*类型声明定义在.d.ts声明文件中*比如aes.js文件,其对应的声明文件为ae......
  • 兼收并蓄 TypeScript - 第三方库: crypto-js
    源码https://github.com/webabcd/TypeScriptDemo作者webabcd兼收并蓄TypeScript-第三方库:crypto-js示例如下:third\cryptojs.ts/**本例以在TypeScript中使用crypto-js为例*crypto-js是一个纯js项目,是不能直接在typescript中使用的,需要相应的.d.ts......
  • 兼收并蓄 TypeScript - 基础: number
    源码https://github.com/webabcd/TypeScriptDemo作者webabcd兼收并蓄TypeScript-基础:number示例如下:basic\number.ts{//将指定类型的数据转换为number类型console.log(Number("100"),Number(true),Number({}),Number([]));//1001NaN0//......
  • 兼收并蓄 TypeScript - 基础: string
    源码https://github.com/webabcd/TypeScriptDemo作者webabcd兼收并蓄TypeScript-基础:string示例如下:basic\string.ts{leta="\x7A";//十六进制的“7A”是字符“z”letb="\u{7A}";//十六进制的“7A”是字符“z”letc="\u{738B}";......
  • 兼收并蓄 TypeScript - 基础: symbol
    源码https://github.com/webabcd/TypeScriptDemo作者webabcd兼收并蓄TypeScript-基础:symbol示例如下:basic\symbol.ts{//Symbol()是一个全局函数,返回一个唯一的Symbol值consta=Symbol();constb=Symbol();//b与a不同constc=Sy......
  • 兼收并蓄 TypeScript - 基础: array
    源码https://github.com/webabcd/TypeScriptDemo作者webabcd兼收并蓄TypeScript-基础:array示例如下:basic\array.ts{//array-数组//创建数组letarray1:number[]=[1,2,3];letarray2:Array<number>=[1,2,3];letarray3:Ar......
  • 兼收并蓄 TypeScript - 基础: set
    源码https://github.com/webabcd/TypeScriptDemo作者webabcd兼收并蓄TypeScript-基础:set示例如下:basic\set.ts{//set是一个集合,先进先出,不会插入重复数据,数据支持类型的多样性//常规操作有add(),delete(),has(),clear(),size等letmySet=......
  • 兼收并蓄 TypeScript - 基础: map
    源码https://github.com/webabcd/TypeScriptDemo作者webabcd兼收并蓄TypeScript-基础:map示例如下:basic\map.ts{//map是一个key/value集合,先进先出,遇到重复键值则后面的会覆盖前面的,key和value都支持类型的多样性//常规操作有set(),get(),dele......
  • 兼收并蓄 TypeScript - 基础: tuple
    源码https://github.com/webabcd/TypeScriptDemo作者webabcd兼收并蓄TypeScript-基础:tuple示例如下:basic\tuple.ts{//tuple-元组leta:[string,number]=['webabcd',22];a[0]='wanglei';a[1]=44;console.log(a,a[0......