数组与对象工具函数

7.1 数组与对象工具函数

保养车间第一站是器械台：$ 名下挂着一批与 DOM 无关的纯工具函数，处理数组、对象与字符串。前六章它们偶尔露面（serialize、clone），本章集中点验。学这节的正确姿势是带着原生对照学——这批函数诞生时原生能力残缺，如今大半有了原生等价物，分清"还在服役的"与"该退役的"，是现代开发者读老代码的基本功。

本节摘要：遍历与筛选族 each、map、grep、inArray 处理数组与对象；合并扩展族 extend（浅拷贝与深拷贝）、merge、makeArray 处理集合拼装；杂项 trim、param、proxy 各司其职。多数成员有原生等价物，extend 的深拷贝与 param 的序列化是仍在服役的两个硬通货。

遍历与筛选族：each、map、grep

// each：遍历数组或对象，回调参数是 下标 与 值（与实例方法的参数顺序相反）
$.each(['a', 'b'], function (i, val) { console.log(i, val); });
$.each({ guest: '张三', bed: 'b' }, function (key, val) { console.log(key, val); });

// map：映射出新数组；返回 null 的项会被剔除
var names = $.map($('.item'), function (el) { return $(el).text().split(' ')[0]; });

// grep：按条件筛选，第三个参数true取反
var urgent = $.grep(items, function (item) { return item.vital === 'high'; });

// inArray：查找下标，找不到返回 -1（行为同原生 indexOf）
$.inArray('李四', names);
​

原生对照逐条给出行囊清单：$.each 对应 forEach 与 Object.entries 加 forEach；$.map 对应 Array.prototype.map（注意 jQuery 版返回 null 即剔除、且可拍平数组，语义略宽）；$.grep 对应 filter；$.inArray 对应 indexOf。新代码一律用原生，这四件的现代价值就是帮你读懂老代码。

合并扩展族：extend 与它的深浅两档

extend 是本节的头号主角——把多个对象的属性合并进第一个对象，日常用它做"默认配置 + 用户配置"的合并：

var defaults = { duration: 300, easing: 'swing', loop: false };
var userOpts = { duration: 800 };

// 浅合并：直接改写了 defaults！
$.extend(defaults, userOpts);

// 规范姿势：空对象打头，默认配置原样保留
var opts = $.extend({}, defaults, userOpts);
// opts => { duration: 800, easing: 'swing', loop: false }
​

深浅之别在嵌套对象上现形：浅合并只复制引用——两个对象从此共享同一个内层对象，改一处动两家；深合并（第一个参数传 true）递归复制到最底层：

var a = { meta: { page: 1 } };
var b = { meta: { size: 20 } };

$.extend({}, a, b).meta;        // { size: 20 }：浅合并把 meta 整个换掉了
$.extend(true, {}, a, b).meta;  // { page: 1, size: 20 }：深合并逐层融合
​

原生对照是 Object.assign——只做浅合并，行为等价于 $.extend 不带 true 的形态。深合并没有原生单行等价物（结构化克隆只克隆不合并），这是 extend 至今仍在上新代码里服役的原因。同族的 merge 拼接数组（改第一个数组）、makeArray 把类数组转真数组（原生 Array.from 的前身），都可以按对照表平移。

杂项工具：仍在服役与已经退役

仍在服役的两件。$.param 把对象序列化成查询串——上一章 serialize 的底层就是它，手拼接口地址时依然好用：

$.param({ ward: 'a', beds: [1, 2] });   // 'ward=a&beds%5B%5D=1&beds%5B%5D=2'
​

$.proxy 固定函数的 this 指向并可选预填参数——诞生于回调里 this 漂移的年代，如今原生 bind 与箭头函数完全接管，读老代码认识即可。已经退役或接近退役的还有几件：$.trim（原生 String.prototype.trim 接管）、$.parseJSON（JSON.parse 接管）、$.type（下一节的检测族里一并交代）。规律很清晰：语言标准补齐的，类库就该退场——这句话也是 7.5 节整册迁移主题的雏形。

完整案例：一次可配置的行渲染函数

把工具族串进真实代码：写一个渲染患者的函数，默认配置可被调用方覆盖，配置合并用深拷贝防串改。

function renderPatient(target, info, options) {
  var opts = $.extend(true, {
    tag: 'li',
    classes: { base: 'item', urgent: 'urgent' },
    showVital: true
  }, options || {});

  var cls = opts.classes.base + (info.vital === 'high' ? ' ' + opts.classes.urgent : '');
  var vitalText = opts.showVital ? ' · ' + info.vital : '';
  return $('<' + opts.tag + '>')
    .addClass(cls)
    .text(info.name + vitalText)
    .appendTo(target);
}

renderPatient('#queue', { name: '孙七', vital: 'mid' });
renderPatient('#queue', { name: '周八', vital: 'high' }, { showVital: false });
​

背景：同类渲染散落在多个页面，样式规则各异。操作：默认配置内置、调用方可覆盖任意子项。结果：两次调用产出符合各自配置的条目，默认配置对象自身未被污染。解读：$.extend(true, ...) 的第一个参数用新对象承接，配合深拷贝，嵌套的 classes 改动也不会泄漏回默认值——这是工具族在工程里最典型的落点。变式：配置项再复杂一层（数组），浅拷贝的坑就会出现，读者可自行把 showVital 换成数组字段验证深浅之别。

要点复盘

• 遍历筛选四件（each、map、grep、inArray）全部有原生等价物，新代码用原生，老代码按表翻译。
• extend 分浅深两档：浅合并换引用，深合并递归融合；规范姿势是空对象打头保默认值。
• Object.assign 只顶得住 extend 的浅档，深合并没有单行原生等价——extend 仍在服役。
• $.param 序列化查询串是 serialize 的底层，硬拼接口地址时好用。
• 退役名单：trim、parseJSON、proxy 已被原生接管；语言补齐即退场，是工具族的存亡法则。

器械盘点完，下一节点验仪表与加装接口：类型检测、能力探测，以及让全册知识可以封装复用的插件机制。