JavaScript中如何扁平化数组_flat方法的兼容性

不支持 flat() 的环境包括：IE 全系列、Edge

JavaScript 中 flat() 方法本身不兼容旧版浏览器（如 IE、Edge 17 及更早版本、Safari 11.1 之前等），需通过 Polyfill 或替代方案实现兼容。

哪些环境不支持 flat()

原生 Array.prototype.flat() 是 ES2019（ES10）引入的，以下环境默认不支持：

• Internet Explorer（全系列）
• Edge
• Safari
• Node.js
• 部分安卓 WebView 或微信内置浏览器（尤其低版本）

手动实现一个兼容性好的 flat 函数

可封装一个递归或栈式扁平化函数，支持指定深度（depth），并处理空位（sparse array）：

function flat(arr, depth = 1) {
  if (!Array.isArray(arr)) return arr;
  if (depth < 1) return arr.slice();
const result = [];
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i]) && depth > 0) {
result.push(...flat(arr[i], depth - 1));
} else {
result.push(arr[i]);
}
}
return result;
}

用法与原生一致：flat([1, [2, [3]], 4], 2) → [1, 2, 3, 4]。注意它不处理 undefined 空位的“塌陷”行为（原生 flat 会跳过空位），如需完全模拟，可加 in 判断或用 arr.forEach 遍历。

立即学习“Java免费学习笔记（深入）”；

使用 Babel + core-js 实现自动降级

工程化项目推荐用构建工具处理：

万知

万知: 你的个人AI工作站

下载

• 安装：npm install --save-dev babel-plugin-transform-runtime 和 core-js
• 在代码中按需引入：import 'core-js/stable/array/flat';
• 或配置 Babel 使用 @babel/preset-env 并开启 useBuiltIns: 'usage'，Babel 会自动注入 flat 的 polyfill

这样既保持语法简洁，又确保旧环境正常运行。

简单场景下的轻量替代写法

若只需一层扁平（depth = 1），可用更简方案：

// 一行搞定，兼容所有 ES5+ 环境
const flatOnce = arr => Array.prototype.concat(...arr);
// 或更健壮些（防非数组项）
const flatOnce = arr => arr.reduce((acc, item) => acc.concat(Array.isArray(item) ? item : [item]), []);

注意：第一种写法遇到 null/undefined 会报错，第二种更安全；但都不支持负数深度（如 flat(-1)）和空位跳过，仅适用于基础需求。

基本上就这些。是否兼容，关键看目标用户环境；开发时建议用 core-js + 构建工具兜底，临时脚本可用手动实现，简单页面一层扁平直接 concat 也够用。