兼容IE浏览器的JavaScript数组合并写法

在面向低版本 Internet Explorer（IE6 至 IE11）的代码维护中，现代 JavaScript（ES6）引入的扩展运算符（[...arr1, ...arr2]）会直接由于 JScript 引擎缺乏解构支持而抛出语法解析错误（SyntaxError）。要在 IE 环境下实现稳定可靠的数组合并，核心策略是回归 ECMAScript 3 与 ECMAScript 5 规范原生支持的 API：需要创建并返回新数组时使用 Array.prototype.concat；需要直接扩充原数组且数据量可控时采用 Array.prototype.push.apply；面对数万级以上的大规模数组合并时，则需采用经典 for 循环或分块追加，以规避老旧引擎的调用栈溢出风险。

一、现代展开语法在 IE 中的失效机理

现代前端开发者习惯使用的 [...arr1, ...arr2] 属于 ECMAScript 2015（ES6）定义的语法结构。IE8 及以下版本运行的是基于 ES3 规范的 JScript 5.x 引擎，而 IE9 至 IE11 仅支持 ECMAScript 5.1 规范及极少数试验特性，全系列 IE 均没有内置 ES6 语法解释器。

当 IE 遇到三点展开操作符（...）时，词法分析器会在脚本解析阶段报错，提示“语法错误”或“缺少 ']'”，导致整段脚本直接中断执行。即便在现代工程中使用 Babel 进行编译，如果缺乏对应的 Polyfill 或转译配置将代码展开成了未支持的原型方法，依然会在运行时崩溃。因此，掌握老版本浏览器原生认可的原生合并写法是维护老旧系统、工业软件及政企内网应用的必要技能。

二、非破坏性合并：原生 concat 方法

Array.prototype.concat 是 JavaScript 自 ECMAScript 3（JavaScript 1.2）起便纳入标准的方法，IE5.5 及更高版本的 IE 均完整支持。该方法的主要特征是非破坏性：它不会修改参与合并的原数组，而是返回一个包含所有合并项的崭新数组实例。

1. 基础用法与多数组合并

concat 可以接收一个或多个数组，也可以直接混合传入单项值，使用极其直观：

// 示例 1：合并两个基础数组
var arr1 = ["apple", "banana"];
var arr2 = ["orange", "pear"];
var fruits = arr1.concat(arr2);

// 示例输出结果：["apple", "banana", "orange", "pear"]
// 原数组保持不变：arr1 长度仍为 2，arr2 长度仍为 2

// 示例 2：连续合并多个数组与具体数值
var extra = ["grape"];
var allItems = arr1.concat(arr2, extra, "watermelon");
// 示例输出结果：["apple", "banana", "orange", "pear", "grape", "watermelon"]

2. 内存模型与浅拷贝特性

理解 concat 的关键在于其浅拷贝机制。对于数值、字符串、布尔值等基本类型，concat 会直接复制字面值到新数组；但如果数组项包含对象、函数或子数组等引用类型，新数组复制的仅仅是该对象在堆内存中的内存引用地址。

如上图所示，当修改新数组中某个对象项的属性时，原数组对应项的属性也会发生改变。开发者在 IE 环境下处理复杂业务数据结构时，需意识到这并非深度克隆。此外，因为每次调用 concat 都会重新开辟一段连续内存空间并创建新数组对象，如果在一个频繁执行的循环体内不断 arr = arr.concat(...)，将频繁触发 IE 垃圾回收器（Garbage Collector），造成明显的页面卡顿。

三、原地合并：Array.prototype.push.apply 机制

若业务要求在原数组上直接扩充（避免修改引用地址或避免开辟额外数组对象），可以使用 Array.prototype.push.apply。push 方法本身原生支持同时传入多个实参（如 arr.push(item1, item2)），但它不直接接收数组。利用函数原型上的 apply 方法，可以将一个数组拆解为函数的实参列表传入。

// 基础语法：将 arr2 的各项原地追加到 arr1 尾部
var listA = [10, 20, 30];
var listB = [40, 50];

Array.prototype.push.apply(listA, listB);

// 示例输出：listA 的内容变为 [10, 20, 30, 40, 50]
// 变量 listA 仍指向最初的内存空间，未生成新数组对象

1. 关键隐患：调用栈溢出（Maximum Call Stack Size Exceeded）

虽然 push.apply 代码极其简练，但在 IE 浏览器中隐藏着严重的稳定性隐患。apply 的工作原理是将第二个参数数组中的每一个元素，转译为底层执行栈帧上的一个独立形参。

老旧 IE 浏览器的 JavaScript 引擎对单个函数能够接收的最大参数量有着严格硬性限制。在 IE8 及以下版本中，一次性通过 apply 传入超过几万项（不同操作系统和内存状况下阈值通常在 30000 至 65536 之间）的数组时，浏览器将抛出致命的 RangeError: Maximum call stack size exceeded（调用栈溢出），甚至直接导致 iexplore.exe 进程崩溃或挂起无响应。因此，切忌在未知数据规模的生产代码中无条件使用 push.apply。

四、大数据量稳健合并：经典循环与分块合并

面对数量级超过数千项、动态分页抓取数据或内存受限的旧设备，最质朴的 for 循环追加反而是最可靠的工程方案。它既具备 push.apply 原地修改、节省内存的优势，又完全摆脱了调用栈深度限制。

1. 标准 for 循环写法

编写兼容 IE 的 for 循环时，应遵循 ES3 编程规范，使用 var 声明迭代游标，并在循环头部预缓存数组长度，以避免低版本引擎在每次循环判断时重复计算 .length 属性：

function safeMerge(targetArr, sourceArr) {
    if (!sourceArr || !sourceArr.length) return targetArr;
    
    // 缓存待合并数组的长度，提升 IE6-8 下的循环效率
    var len = sourceArr.length;
    for (var i = 0; i < len; i++) {
        targetArr.push(sourceArr[i]);
    }
    return targetArr;
}

2. 分块合并（Chunking Push）：平衡速度与安全

如果既想利用 apply 的单次批量执行性能，又必须防御超大数组的栈溢出，可以采用“分块合并”策略：将源数组按照每组 2000~3000 个元素划分为安全批次，使用 slice 切片后循环调用 apply：

function chunkedMerge(targetArr, sourceArr, chunkSize) {
    chunkSize = chunkSize || 2000; // 设置安全单批上限
    var total = sourceArr.length;
    
    for (var i = 0; i < total; i += chunkSize) {
        // 在安全批次内使用 push.apply，既不超栈又能批量处理
        Array.prototype.push.apply(
            targetArr, 
            sourceArr.slice(i, i + chunkSize)
        );
    }
    return targetArr;
}

五、IE 专属避坑事项与类数组处理

在老旧 IE 系统中，除了常规 Array 类型的合并，前端页面经常需要将类数组对象（如 DOM 查询返回的 NodeList 或函数内置的 arguments）与数组进行合并。在此类场景中存在以下特殊限制：

// 兼容 IE6-8 的类数组对象转数组安全函数
function toArray(pseudoArray) {
    var result = [];
    try {
        // IE9+ 及现代浏览器标准转换
        result = Array.prototype.slice.call(pseudoArray);
    } catch (e) {
        // 捕获 IE8 及以下宿主对象异常，优雅降级为循环复制
        for (var i = 0; i < pseudoArray.length; i++) {
            result.push(pseudoArray[i]);
        }
    }
    return result;
}

// 安全合并 DOM 节点集合到主数组
var container = [document.getElementById("header")];
var buttons = document.getElementsByTagName("button");
var mergedList = container.concat(toArray(buttons));

六、方案全景对比与技术选型总结

在实际项目维护中，没有绝对最优的单一写法，只有针对特定约束条件的合适选择。下表直观汇总了本文介绍的四种主要兼容写法的特性维度：

综上所述，在绝大多数日常业务场景下，优先选用语义清晰、零副作用的 Array.prototype.concat；当面临原数组引用不能重绑且数据量在几千以内时，选用 Array.prototype.push.apply；而在处理上万条批量数据展示、日志回显或复杂表格渲染时，坚决使用标准的 for 循环追加或分块处理，确保系统在老旧 IE 运行环境下始终拥有极高稳定度与鲁棒性。