study/operators/scan.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>operator:scan</title>

    <link rel="stylesheet" href="../reset.css">
    <link rel="stylesheet" href="../share.css">
    <script src="../Rx.min.js"></script>
</head>
<body>

<h1 class="operator-name">scan</h1>

<ul class="operator-params">
    参数列表：
    <li>
        <span class="operator-params-name">accumulator</span>
        <span class="operator-params-type">function(acc: R, value: T, index: number): R</span>
        <span class="operator-params-desc">每一个值发出时，函数被调用，value=被发出的值,acc=上一次本函数return的值/seed初始值</span>
    </li>
    <li>
        <span class="operator-params-name">seed</span>
        <span class="operator-params-type">T | R</span>
        <span class="operator-params-desc">(可选)accumulator的acc的初始值。</span>
    </li>


</ul>
返回值:<h2 class="operator-ret"> Observable &lt;R&gt;</h2>

<hr>
<h1>珠宝图:</h1>
<div class="marble-box">
    <img src="scan.png" alt="" class="operator-marble">
</div>
<hr>
<h1>功能说明:</h1>
<ul class="desc">
    <li>scan 在每次新value发出的时候，调用accumulator,传入2个参数，第一个是保存的上一次accumulator的返回值(第一次调用，传入0或者seed)，第二个是本次emit的value.</li>
</ul>
<hr>
<h1>备注事项:</h1>
<ul class="notice">
    <li>scan类似数组里的reduce,适合对序列做一些累加减等递归操作</li>
    <li>和reduce只返回一个value不同,scan每一次执行完accumulator都会把中间结果返回</li>
</ul>

<div class="demo">
    <span>点击不同按钮查看不同demo 代码效果</span>
    <button onclick="demo1();">demo1</button>
</div>

<script>
    function demo1(){
        console.log("scan :计算点击文档的次数");
        var clicks = Rx.Observable.fromEvent(document, 'click');
        var ones = clicks.mapTo(1);
        var seed = 0;
        var count = ones.scan((acc, one) => acc + one, seed);
        count.subscribe(x => console.log(x));
    }
</script>


</body>
</html>