企业官网建设流程全解析

• 后端

select（别名map）是 RxJS 中最基础、使用最频繁的转换操作符，它把可观察序列中的每个元素通过一个变换函数投影为新的形态。本指南以 doc/api/core/operators/select.md 为骨架，结合仓库源码与测试用例，系统讲解它的参数语义、返回值、源码实现原理、链式调用的内部优化以及错误处理机制，帮助你彻底吃透这一操作符并能直接用于实战。

操作符概览：select与map是同一方法

在 RxJS v4 中：

Rx.Observable.prototype.select(selector, [thisArg]) Rx.Observable.prototype.map(selector, [thisArg])

select与map指向同一个实现，二者完全等价。仓库中有多处直接证据：

• 在核心性能实现 src/core/perf/operators/map.js 中，注册方式为observableProto.map = observableProto.select = function (selector, thisArg) {...}；
• 在模块化构建入口 src/modular/index.js 中同样存在Observable.prototype.select = Observable.prototype.map;的别名声明，rx.all.js、rx.lite.js等构建产物也均含这一行。

因此你可以在代码中按团队习惯自由选择select或map，两者行为完全一致。使用map更容易与 ES5 数组方法、其他语言/框架（如 Rx.NET、RxJava）保持统一心智模型。

参数详解

selector（必填）：变换函数或常量值

selector的类型为Function或Object：

1. 传入函数时，它对源序列的每个元素执行投影，回调签名如下（按调用顺序）：

   • value：当前源元素的值；
   • index：当前元素在源序列中的索引（从 0 开始递增）；
   • obs：被订阅的 Observable 对象本身。

2. 传入非函数值（常量）时，它被当作"要产出的元素"，所有输入元素都会被替换为该常量。这一行为在源码中由类型判断保证：

   var selectorFn = typeof selector === 'function' ? selector : function () { return selector; };

   （见 src/core/perf/operators/map.js，模块化版本 src/modular/observable/map.js 使用isFunction(fn)判断。）

   典型用法是把鼠标事件映射为布尔值，原文档给出的示例就是如此：

   var md = Rx.Observable.fromEvent(document, 'mousedown').map(true); var mu = Rx.Observable.fromEvent(document, 'mouseup').map(false);

[thisArg]（可选）：回调的this上下文

类型为Any。提供时，selector执行时的this将指向该对象。底层通过bindCallback实现（见 src/core/internal/bindcallback.js）：

• 若thisArg为undefined，直接返回原始函数，零开销；
• 否则按argCount生成包装函数，map使用参数个数3，即最终以func.call(thisArg, value, index, collection)形式调用。

也就是说，map内部统一把回调绑定为「值 + 索引 + 源序列」三个参数，这正是上面回调签名三个入参的来源。

返回值与语义

返回值类型为Observable：一个由变换函数对源序列每个元素求值后得到的新可观察序列。

原文档将其描述为 "comonadic bind operation"（余单子绑定操作），意思是：与单子的bind把计算包进上下文不同，map/select是把纯函数提升（lift）到可观察序列的计算上下文中，对序列内部的每个值应用变换，而序列的时间特性、终止语义（onCompleted/onError）保持不变。

从实现上看，map返回的是MapObservable实例，它继承自ObservableBase（核心版本见 src/core/perf/operators/map.js，模块化版本见 src/modular/observable/map.js），因此遵循"订阅时才执行（lazy）"的 RxJS 语义——只有调用subscribe，变换才会发生。

完整实战示例

以下示例完整继承自原文档，演示使用函数形式投影元素。Rx.Observable.range(1, 3)依次发出 1、2、3，select回调接收(x, idx, obs)三个参数并返回x * x：

var source = Rx.Observable.range(1, 3) .select(function (x, idx, obs) { return x * x; }); var subscription = source.subscribe( function (x) { console.log('Next: ' + x); }, function (err) { console.log('Error: ' + err); }, function () { console.log('Completed'); }); // => Next: 1 // => Next: 4 // => Next: 9 // => Completed

要点回顾：

• 变换函数虽然接收三个参数，但你完全可以只使用第一个参数x；
• 回调返回的x * x会立即作为新元素推送给下游观察者；
• 源序列完成后，投影后的序列同样触发Completed，错误则透传给Error分支。

源码实现原理：一次订阅，逐元素投影

以核心性能版 src/core/perf/operators/map.js 为例，MapObservable.subscribeCore会为每次订阅创建一个InnerObserver：

MapObservable.prototype.subscribeCore = function (o) { return this.source.subscribe(new InnerObserver(o, this.selector, this)); };

InnerObserver内部维护索引计数器this.i = 0，每当源序列推送一个元素x时：

InnerObserver.prototype.next = function(x) { var result = tryCatch(this.selector)(x, this.i++, this.source); if (result === errorObj) { return this.o.onError(result.e); } this.o.onNext(result); };

这段代码揭示了三个关键机制：

1. 索引自动递增：每次调用this.i++，所以回调的第二个参数天然是从 0 开始、逐元素递增的索引；
2. 第三个参数是源 Observable：this.source即被订阅的 Observable，也就是文档中回调的第三个入参obs；
3. 错误被捕获并路由到onError：变换函数若抛出异常，tryCatch会把它包装为errorObj，随后通过this.o.onError(result.e)推送给下游，而不是冒泡成未捕获异常——这正是响应式错误处理链的关键一环。

链式map的融合优化（internalMap）

map对连续多个map场景做了专门优化。当你写下：

source.map(f).map(g)

普通实现会创建两层MapObservable、两层观察者包装，造成多余的对象分配与调用开销。而当前实现提供了internalMap融合路径：

function innerMap(selector, self) { return function (x, i, o) { return selector.call(this, self.selector(x, i, o), i, o); }; } MapObservable.prototype.internalMap = function (selector, thisArg) { return new MapObservable(this.source, innerMap(selector, this), thisArg); };

（见 src/core/perf/operators/map.js。）

其效果是：在map入口处若发现this instanceof MapObservable，就直接在同一个MapObservable上叠加新的选择器（innerMap先执行旧选择器、再执行新选择器），从而把map(f).map(g)折叠为一次投影x => g(f(x))，下游只经过一层观察者。测试用例 tests/observable/select.js（"map and map Optimization"）专门验证了这一点：连续两次map后，源序列只被订阅一次、每个元素各自被两个函数各调用一次，最终结果与逐层映射完全一致。

同理，src/modular/observable/map.js 的模块化版本也提供了相同的innerMap/internalMap机制。

thisArg的实战价值

当你的变换逻辑依赖对象状态时，thisArg非常实用。例如在一个拥有多个选择器方法的类中：

function Filterer() { this.selector1 = function (item) { return item + 2; }; this.selector2 = function (item) { return item * 3; }; } var filterer = new Filterer(); xs .map(function (x) { return this.selector1(x); }, filterer) .map(function (x) { return this.selector2(x); }, filterer) .map(function (x) { return this.selector1(x); }, filterer);

这正是测试用例 tests/observable/select.js（"map and map thisArg"）中的场景：三次map均传入同一个filterer作为thisArg，回调内部的this正确指向它，且连续map的融合优化依然生效。该测试还验证了即使链式map各自绑定不同thisArg，融合后每个阶段仍使用各自正确的上下文。

行为边界与测试验证

仓库的单元测试 tests/observable/select.js（QUnit 模块 "map"）覆盖了map/select的各种行为边界，可作为行为契约参考：

值得注意的是"选择器抛出异常"场景：即使选择器在第 3 次调用时抛错，前两次已投影的结果（5、14）仍然被正常下发，随后才以onError终止——说明map的错误处理是"逐元素路由"而非"整体回滚"。

与filter/where的关系

select/map负责变换每个元素，而同属基础操作符的filter/where（见 doc/api/core/operators/where.md，别名关系同样成立）负责按谓词筛选元素。二者回调签名完全一致（value、index、obs），都支持thisArg，且filter也有对应的性能优化实现与测试（tests/observable/where.js）。实际开发中二者常组合使用：先filter剔除不满足条件的元素，再select/map做形态转换，构成典型的"筛选 + 投影"管道。

相关文件索引

• 文档： doc/api/core/operators/select.md
• 核心性能实现： src/core/perf/operators/map.js
• 模块化实现： src/modular/observable/map.js
• thisArg绑定工具： src/core/internal/bindcallback.js
• 别名声明： src/modular/index.js
• 单元测试： tests/observable/select.js

该操作符在仓库的rx.all.js、rx.all.compat.js、rx.js、rx.compat.js、rx.lite.js、rx.lite.compat.js等全部构建产物中均可用，对应的 NPM 包为rx，NuGet 包为RxJS-All、RxJS-Main、RxJS-Lite。

• 后端