J*aScript中如何扁平化数组_flat方法的兼容性

发布时间：2025-12-14

点击量：

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

J*aScript 中 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(); <p>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 遍历。

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

工程化项目推荐用构建工具处理：
Glarity
Glarity是一款免费开源的AI浏览器扩展，提供YouTube视频总结、网页摘要、写作工具等功能，支持免费的镜像翻译，电子邮件写作辅助，AI问答等功能。
131 查看详情

安装：npm install --s*e-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); <p>// 或更健壮些（防非数组项） const flatOnce = arr => arr.reduce((acc, item) => acc.concat(Array.isArray(item) ? item : [item]), []);
注意：第一种写法遇到 null/undefined 会报错，第二种更安全；但都不支持负数深度（如 flat(-1)）和空位跳过，仅适用于基础需求。

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