2025-01-08 日报 Day60

2025-01-08 日报 Day60

Yuyang 前端小白🥬
  2025-01-08 2025-01-08 创建   2025-04-01 05:08:34 2025-04-01 05:08:34 更新      

今日的鸡汤

人品是底子，行为是面子，只有底子好，面子来映衬，人生才有更多的可能。

今日学习内容

1、JS 红皮书 P194-200 第七章：迭代器与生成器

今日笔记

1、通过 yield 中断执行: yield 关键字可以让生成器停止和开始执行。遇到这个关键字后，执行会停止，函数作用域的状态会被保留。停止执行的生成器函数只能通过在生成器对象上调用 next()方法来恢复执行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
function* generatorFn() { 
 yield; 
} 
let generatorObject = generatorFn(); 
console.log(generatorObject.next()); // { done: false, value: undefined } 
console.log(generatorObject.next()); // { done: true, value: undefined }
// 通过 yield 关键字退出的生成器函数会处在 done: false 状态；通过 return 关键字退出的生成器函数会处于 done: true 状态。
function* generatorFn() { 
 yield 'foo'; 
 yield 'bar'; 
 return 'baz'; 
} 
let generatorObject = generatorFn(); 
console.log(generatorObject.next()); // { done: false, value: 'foo' } 
console.log(generatorObject.next()); // { done: false, value: 'bar' } 
console.log(generatorObject.next()); // { done: true, value: 'baz' }
// 生成器函数内部的执行流程会针对每个生成器对象区分作用域。在一个生成器对象上调用 next()不会影响其他生成器：
function* generatorFn() { 
 yield 'foo'; 
 yield 'bar'; 
 return 'baz'; 
} 
let generatorObject1 = generatorFn(); 
let generatorObject2 = generatorFn(); 
console.log(generatorObject1.next()); // { done: false, value: 'foo' } 
console.log(generatorObject2.next()); // { done: false, value: 'foo' }
console.log(generatorObject2.next()); // { done: false, value: 'bar' } 
console.log(generatorObject1.next()); // { done: false, value: 'bar' }
// yield 关键字只能在生成器函数内部使用，用在其他地方会抛出错误。类似函数的 return 关键字，yield 关键字必须直接位于生成器函数定义中，出现在嵌套的非生成器函数中会抛出语法错误：
// 有效
function* validGeneratorFn() { 
 yield; 
} 
// 无效
function* invalidGeneratorFnA() { 
 function a() { 
 yield; 
 } 
} 
// 无效
function* invalidGeneratorFnB() { 
 const b = () => { 
 yield; 
 } 
} 
// 无效
function* invalidGeneratorFnC() { 
 (() => { 
 yield; 
 })(); 
}
  • 生成器对象作为可迭代对象: 在生成器对象上显式调用 next()方法的用处并不大。其实，如果把生成器对象当成可迭代对象，那么使用起来会更方便：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function* generatorFn() { 
     yield 1; 
     yield 2; 
     yield 3; 
    } 
    for (const x of generatorFn()) { 
     console.log(x); 
    } 
    // 1 
    // 2 
    // 3
    在需要自定义迭代对象时，这样使用生成器对象会特别有用。比如，我们需要定义一个可迭代对象，而它会产生一个迭代器，这个迭代器会执行指定的次数。使用生成器，可以通过一个简单的循环来实现：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function* nTimes(n) { 
     while(n--) { 
     yield; 
     } 
    }
    for (let _ of nTimes(3)) { 
     console.log('foo'); 
    } 
    // foo 
    // foo 
    // foo
  • 使用 yield 实现输入和输出: yield 关键字还可以作为函数的中间参数使用。上一次让生成器函数暂停的 yield 关键字会接收到传给 next()方法的第一个值。这里有个地方不太好理解——第一次调用 next()传入的值不会被使用，因为这一次调用是为了开始执行生成器函数：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function* generatorFn(initial) { 
     console.log(initial); 
     console.log(yield); 
     console.log(yield); 
    } 
    let generatorObject = generatorFn('foo'); 
    generatorObject.next('bar'); // foo 
    generatorObject.next('baz'); // baz 
    generatorObject.next('qux'); // qux
    yield 关键字可以同时用于输入和输出，如下例所示：
    1
    2
    3
    4
    5
    6
    function* generatorFn() { 
     return yield 'foo'; 
    } 
    let generatorObject = generatorFn(); 
    console.log(generatorObject.next()); // { done: false, value: 'foo' } 
    console.log(generatorObject.next('bar')); // { done: true, value: 'bar' }
    因为函数必须对整个表达式求值才能确定要返回的值，所以它在遇到 yield 关键字时暂停执行并计算出要产生的值：”foo”。下一次调用 next()传入了”bar”，作为交给同一个 yield 的值。然后这个值被确定为本次生成器函数要返回的值。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function* generatorFn() { 
     for (let i = 0;;++i) { 
     yield i; 
     } 
    } 
    let generatorObject = generatorFn(); 
    console.log(generatorObject.next().value); // 0 
    console.log(generatorObject.next().value); // 1 
    console.log(generatorObject.next().value); // 2 
    console.log(generatorObject.next().value); // 3 
    console.log(generatorObject.next().value); // 4 
    console.log(generatorObject.next().value); // 5
  • 产生可迭代对象：可以使用星号增强 yield 的行为，让它能够迭代一个可迭代对象，从而一次产出一个值：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    // 等价的 generatorFn： 
    // function* generatorFn() { 
    // for (const x of [1, 2, 3]) { 
    // yield x; 
    // } 
    // } 
    function* generatorFn() { 
     yield* [1, 2, 3]; 
    } 
    let generatorObject = generatorFn(); 
    for (const x of generatorFn()) { 
     console.log(x); 
    } 
    // 1 
    // 2 
    // 3
    // 与生成器函数的星号类似，yield 星号两侧的空格不影响其行为：
    function* generatorFn() { 
     yield* [1, 2]; 
     yield *[3, 4]; 
     yield * [5, 6]; 
    } 
    for (const x of generatorFn()) { 
     console.log(x); 
    } 
    // 1 
    // 2 
    // 3 
    // 4 
    // 5 
    // 6

    function* generatorFnA() { 
     for (const x of [1, 2, 3]) { 
     yield x; 
     } 
    } 
    for (const x of generatorFnA()) { 
     console.log(x); 
    } 
    // 1 
    // 2 
    // 3 
    function* generatorFnB() { 
     yield* [1, 2, 3]; 
    } 
    for (const x of generatorFnB()) { 
     console.log(x); 
    }
    // 1
    // 2
    // 3
    // yield*的值是关联迭代器返回 done: true 时的 value 属性。对于普通迭代器来说，这个值是 undefined：
    function* generatorFn() { 
     console.log('iter value:', yield* [1, 2, 3]); 
    } 
    for (const x of generatorFn()) { 
     console.log('value:', x); 
    } 
    // value: 1 
    // value: 2 
    // value: 3 
    // iter value: undefined
    // 对于生成器函数产生的迭代器来说，这个值就是生成器函数返回的值：
    function* innerGeneratorFn() { 
     yield 'foo'; 
     return 'bar'; 
    } 
    function* outerGeneratorFn(genObj) { 
     console.log('iter value:', yield* innerGeneratorFn()); 
    } 
    for (const x of outerGeneratorFn()) { 
     console.log('value:', x); 
    } 
    // value: foo 
    // iter value: bar
  • 使用 yield实现递归算法: yield最有用的地方是实现递归操作，此时生成器可以产生自身。看下面的例子：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function* nTimes(n) { 
     if (n > 0) { 
     yield* nTimes(n - 1); 
     yield n - 1; 
     } 
    } 
    for (const x of nTimes(3)) { 
     console.log(x); 
    } 
    // 0 
    // 1 
    // 2
    使用递归生成器结构和 yield*可以优雅地表达递归算法。下面是一个图的实现，用于生成一个随机的双向图：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    class Node { 
     constructor(id) { 
        this.id = id; 
        this.neighbors = new Set(); 
     } 
     connect(node) { 
     if (node !== this) { 
        this.neighbors.add(node); 
        node.neighbors.add(this); 
     } 
     } 
    } 
    class RandomGraph { 
     constructor(size) { 
        this.nodes = new Set(); 
        // 创建节点
        for (let i = 0; i < size; ++i) { 
            this.nodes.add(new Node(i)); 
        } 
        // 随机连接节点
        const threshold = 1 / size; 
        for (const x of this.nodes) { 
            for (const y of this.nodes) { 
                if (Math.random() < threshold) { 
                    x.connect(y); 
                } 
            } 
        } 
     } 
     // 这个方法仅用于调试
     print() { 
        for (const node of this.nodes) { 
            const ids = [...node.neighbors] 
                                .map((n) => n.id) 
                                .join(','); 
                                console.log(`${node.id}: ${ids}`); 
        } 
     } 
    } 
    const g = new RandomGraph(6); 
    g.print(); 
    // 示例输出：
    // 0: 2,3,5 
    // 1: 2,3,4,5 
    // 2: 1,3 
    // 3: 0,1,2,4 
    // 4: 2,3 
    // 5: 0,4
    图数据结构非常适合递归遍历，而递归生成器恰好非常合用。为此，生成器函数必须接收一个可迭代对象，产出该对象中的每一个值，并且对每个值进行递归。这个实现可以用来测试某个图是否连通，即是否没有不可到达的节点。只要从一个节点开始，然后尽力访问每个节点就可以了。结果就得到了一个非常简洁的深度优先遍历：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    class Node {
     constructor(id) { 
        ... 
     } 
     connect(node) { 
        ... 
     } 
    } 

    class RandomGraph { 
     constructor(size) { 
        ... 
     } 
     print() { 
        ... 
     } 
     isConnected() { 
        const visitedNodes = new Set(); 
        function* traverse(nodes) { 
            for (const node of nodes) { 
                if (!visitedNodes.has(node)) { 
                    yield node; 
                    yield* traverse(node.neighbors); 
                } 
            } 
        } 
        // 取得集合中的第一个节点
        const firstNode = this.nodes[Symbol.iterator]().next().value; 
        // 使用递归生成器迭代每个节点
        for (const node of traverse([firstNode])) { 
            visitedNodes.add(node); 
        } 
        return visitedNodes.size === this.nodes.size; 
     } 
    }
此页目录
2025-01-08 日报 Day60
  1. 今日学习内容
  2. 今日笔记