jQuery.merge() 方法（保姆级教程）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言：为什么需要学习 jQuery.merge() 方法？

在前端开发中，数组操作是日常工作的核心场景之一。无论是合并两个数据列表，还是整合多个 DOM 元素集合，开发者都需要高效且灵活的工具。jQuery.merge() 方法正是为此而生的利器。它不仅能快速合并两个数组，还能直接修改原始数组，这在性能优化和代码简洁性方面具有独特优势。对于初学者和中级开发者而言，掌握这一方法能显著提升代码编写效率，同时加深对 JavaScript 数组操作底层逻辑的理解。

一、基础用法：合并数组的简单示例

1.1 语法与参数解析

jQuery.merge() 的基本语法如下：

jQuery.merge( first, second )

• first：目标数组，会被直接修改并扩展。
• second：来源数组，其元素会被追加到 first 的末尾。
• 返回值：修改后的 first 数组（即合并后的完整数组）。

1.2 初步示例

以下代码演示了两个简单数组的合并过程：

const array1 = [1, 2];
const array2 = [3, 4];
$.merge(array1, array2);
console.log(array1); // 输出：[1, 2, 3, 4]
console.log(array2); // 输出：[3, 4]

关键观察点：

• array1 被直接修改并扩展了 array2 的元素，而 array2 保持不变。
• 返回值是 array1 的新状态，但无需重新赋值即可使用。

1.3 形象化比喻

想象两个队伍：first 队列的成员直接站到 second 队列的后面，最终 first 队列的长度增加了，而 second 队列的位置没有变化。这种“原地扩展”的特性让 merge() 在处理大型数据时更节省内存。

二、深入特性：合并规则与特殊场景

2.1 特性一：直接修改第一个数组

与 concat() 等方法不同，merge() 的核心优势在于它不创建新数组，而是直接修改 first。这在处理大数据量时能减少内存消耗。例如：

// 使用 concat() 的内存开销
const merged = array1.concat(array2); // 新数组被创建

// 使用 merge() 的高效性
$.merge(array1, array2); // 直接修改 array1

2.2 特性二：不进行去重操作

merge() 不会自动过滤重复元素，所有元素都会被保留。若需去重，需手动添加逻辑：

const duplicates = [1, 2, 2];
const merged = $.merge([], duplicates); // 输出：[1, 2, 2]
// 去重方案示例：
merged.filter((value, index, self) => self.indexOf(value) === index);

2.3 特性三：兼容非数组参数

merge() 可接受非数组类型作为 second 参数，但会将其转换为类似数组的对象。例如：

const elements = document.querySelectorAll('div');
const array = [5, 6];
$.merge(array, elements); // elements 被转换为数组后合并

三、与原生 JavaScript 方法的对比

3.1 与 Array.prototype.concat() 对比

3.2 与扩展运算符 [...first, ...second] 对比

// 扩展运算符示例
const merged = [...array1, ...array2]; // 新数组被创建

区别总结：

• merge() 修改 first，而扩展运算符返回新数组。
• 对于需要保留原始数组的情况，扩展运算符更安全。

四、实战案例：合并 DOM 元素与数据集合

4.1 案例一：合并多个 DOM 查询结果

// 假设需要同时操作所有 div 和 span 元素
const divs = $('div');
const spans = $('span');
const allElements = $.merge(divs, spans);

// 遍历合并后的元素集合
$.each(allElements, function(index, element) {
  $(element).css('border', '1px solid red');
});

4.2 案例二：动态扩展数据列表

let mainList = [10, 20];
const newData = [30, 40, 50];

// 每次加载新数据时直接合并
$.merge(mainList, newData);
console.log(mainList); // 输出：[10, 20, 30, 40, 50]

五、注意事项与常见问题解答

5.1 参数顺序不可逆

若颠倒参数顺序，first 参数必须是一个数组：

// 错误写法：array2 不会被修改
$.merge(array2, array1); // array2 变为 [3,4,1,2]
// 正确逻辑：确保第一个参数是目标数组

5.2 非数组参数的陷阱

如果 first 参数不是数组，merge() 会抛出错误。例如：

const obj = {0: 'a', 1: 'b', length: 2};
$.merge(obj, ['c']); // 抛出错误："first argument must be an array"

5.3 性能优化建议

当合并大量数据时，优先使用 merge() 的原地修改特性：

// 低效写法（每次创建新数组）
let bigArray = [];
for (let i = 0; i < 1000; i++) {
  bigArray = bigArray.concat(generateData());
}

// 高效写法（直接合并）
const bigArray = [];
for (let i = 0; i < 1000; i++) {
  $.merge(bigArray, generateData());
}

六、进阶技巧：与 jQuery 方法链式调用结合

6.1 合并后立即执行操作

$.merge($('div'), $('span')).each(function() {
  $(this).addClass('highlight');
});

6.2 处理异步数据流

let combinedData = [];
$.when(
  $.get('/api/data1'),
  $.get('/api/data2')
).done(function(response1, response2) {
  $.merge(combinedData, response1[0]);
  $.merge(combinedData, response2[0]);
  // 统一处理合并后的数据
});

结论：掌握 jQuery.merge() 的核心价值

jQuery.merge() 方法通过直接修改数组、高效合并元素以及兼容非数组参数的特性，成为处理复杂数据整合任务的得力工具。无论是合并 DOM 元素集合、动态扩展数据列表，还是优化内存使用效率，它都能提供简洁且直观的解决方案。对于开发者而言，理解其“原地扩展”机制和参数规则，能有效避免常见陷阱，并在实际项目中实现更优雅的代码设计。

随着前端开发对性能和代码可维护性的要求越来越高，掌握这类底层工具方法，将帮助你在复杂场景中游刃有余。建议读者通过实际项目中的数据操作需求，逐步深入实践 jQuery.merge() 的应用场景，以巩固其使用技巧。