Mars 踩坑实录:Android 2.1 缺 Object.keys 时的两行 for-in 替代写法
【免费下载链接】Mars腾讯移动 Web 前端知识库项目地址: https://gitcode.com/gh_mirrors/mar/Mars
维护低版本 Android 页面的人,大概率撞见过这样一个报错:Android 2.1 的内置浏览器还是老 WebKit 内核,直接调Object.keys(obj)会抛Uncaught TypeError: Object.keys is not a function,依赖键遍历的逻辑当场停摆。腾讯移动 Web 前端知识库 Mars 把这类对象遍历的坑记录在专门的 ES5 兼容速查里,修法其实一句话:换成 for-in 循环就行。这篇文章按"什么场景用哪种遍历方式"来拆。
先别急着上 polyfill:Android 2.1 到底缺了什么
⚠️ 动手之前,先看清环境缺的是哪些能力。Mars 仓库里的 ES5 移动端兼容性速查表 中,Android 2.1 那一列在Object.keys、Object.create、Array.isArray甚至Function.prototype.bind上基本全打 "no"。也就是说这不是孤立的一个点,而是整块 ES5 对象方法的能力空洞。
所以选型判断很简单:如果只是要"拿到一个对象的键名",for-in 一把梭足矣,没必要封装 polyfill;如果项目里Object.keys的调用点太多、不想逐个改,再考虑挂一个模仿原生的替代函数。
for-in + hasOwnProperty:最低版本对象遍历的写法
核心代码就三行:
var keys = []; for (var key in obj) { if (obj.hasOwnProperty(key)) keys.push(key); }说白了,for-in 会走到所有可枚举键(包括原型链上继承来的),hasOwnProperty这一关就是只留对象自身的属性,跑完得到的数组和Object.keys(obj)等价。这个写法覆盖包括 Android 2.1 在内的所有环境,无依赖、无版本判断,是低版本浏览器做对象遍历的首选。
另外提一个坑:如果对象是Object.create(null)造的(没有原型链),它自己没有hasOwnProperty方法,上面这行会挂。稳妥的写法是Object.prototype.hasOwnProperty.call(obj, key)。
Object.keys polyfill 移动端怎么挂:只改两个分支
不想改项目里几十个调用点的话,包一层和原生同签名的替代函数即可。增强版相比上一节多出来的,其实是两个分支:
var objectKeys = function (obj) { var keys = []; if (Object.prototype.toString.call(obj) === '[object Array]') { for (var i = 0; i < obj.length; i++) keys.push(String(i)); } else { for (var key in obj) if (obj.hasOwnProperty(key)) keys.push(key); } return keys; };完整版还会再多几行判断:原生Object.keys存在就直接委托,参数不是对象就抛TypeError。完整版本可以参考仓库 solutions/ 目录里的兼容实践。数组为什么要单独走下标?千个元素按索引逐个 push,比 for-in 遍历快,这是增强版提速的主要来源。
真机耗时数据怎么看:结论就一句话
Android 2.1 真机基准(遍历 100 个属性的对象、跑 1000 次):增强版比基础 for-in 快约三成,但两者都还在毫秒级,离高版本系统上原生Object.keys的 20ms 以内还有明显差距。两个手写版本的内存占用差异可以忽略。所以 polyfill 本身不用纠结微优化,真正的开销来源是把大对象遍历放进了渲染热路径,那才是该避开的。
上线前 checklist
- 按兼容速查表逐项核对目标机型缺哪些方法,别默认"补一个就够了"
- 入口处做特性检测(
if (!Object.keys))再加载 polyfill,新设备上别白跑兼容代码 - 低版本设备上,单次大对象遍历尽量分批或挪出首帧
【免费下载链接】Mars腾讯移动 Web 前端知识库项目地址: https://gitcode.com/gh_mirrors/mar/Mars
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考