旧JavaScript引擎不支持箭头函数，寻求对象数组遍历替代方法

问题背景 #

所用Web应用的JavaScript引擎版本老旧，不支持箭头函数（() => {}）语法，原代码因箭头函数触发编译错误，需替换为兼容的对象数组遍历方法。

原代码及报错 #

含箭头函数的原代码片段：

var array = []

$('input:checked').each(function() {
        var key_ = $(this).attr('name')
        var val = $(this).attr('name').val();
        var obj = {
            [key_]: val
        };
        array.push(obj);
        array.forEach((obj) => {
                    Object.keys(obj).forEach((key) => {
                            alert("key: " + key + " - value: " + obj[key]);
                            });
                    });
}); 

编译报错信息：

JST-310000 Error while compiling script '_webApp_APP303__preview' line 175: syntax error (line='     array.forEach((obj) => {
' token='> {
').
SCR-160032 JavaScript: error while compiling script '_webApp_APP303__preview'.

简化箭头函数后仍报错：

array.forEach(obj => {
  for (let key in obj) {
    logInfo(`${key}: ${obj[key]}`);
  }
}); 

错误信息：

JST-310000 Error while compiling script '_webApp_APP303__preview' line
176: syntax error (line='array.forEach(obj => { ' token='> { ').
SCR-160032 JavaScript: error while compiling script
'_webApp_APP303__preview'.

示例数组结构：

[{"jurisdiction":"SCPB - LON"},{"firstName":"David Dynamic"}]

兼容替代方案 #

1. 用普通函数替换箭头函数 #

将forEach的箭头函数改为传统函数表达式，同时修复原代码中的取值错误，适配老旧引擎的语法限制：

var array = [];

$('input:checked').each(function() {
    var key_ = $(this).attr('name');
    // 修正：输入框值应直接用$(this).val()，而非attr('name').val()
    var val = $(this).val();
    var obj = {};
    // 老旧引擎不支持计算属性，改用赋值方式
    obj[key_] = val;
    array.push(obj);
    
    // 用普通function替代forEach的箭头函数
    array.forEach(function(obj) {
        // 遍历对象键时同样用普通function
        Object.keys(obj).forEach(function(key) {
            alert("key: " + key + " - value: " + obj[key]);
        });
    });
});

2. 用传统for循环替代forEach（兼容性拉满） #

如果引擎对forEach的支持也存在问题，直接使用原生for循环遍历数组和对象：

var array = [];

$('input:checked').each(function() {
    var key_ = $(this).attr('name');
    var val = $(this).val();
    var obj = {};
    obj[key_] = val;
    array.push(obj);
    
    // 遍历数组
    for (var i = 0; i < array.length; i++) {
        var obj = array[i];
        // 遍历对象键，加hasOwnProperty过滤原型链属性
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                alert("key: " + key + " - value: " + obj[key]);
            }
        }
    }
});

关键适配点 #

• 替换计算属性（{[key_]: val}）为obj[key_] = val，老旧引擎不支持前者。
• 用var替代let，避免块级作用域变量的兼容问题。
• 替换模板字符串（${}）为字符串拼接（+），老旧引擎不支持模板语法。

内容的提问来源于stack exchange，提问作者David Garcia