在对象数组上使用函数变量时，Javascript为“未定义”

Question

我有以下（示例）对象数组：

var theArray = [
    {theId:'1', num: 34},
    {theId:'2', num: 23},
    {theId:'5', num: 26}
];

这个函数可以很好地遍历它们：

function printValues() {
    var i = 0;
    for(i; i<theArray.length; i++) {
        var obj = theArray[i];
        document.getElementById('result1').innerHTML += obj.theId + ' = ' + obj.num + '<br>';
    }
}

但是，如果要通过使用函数变量访问其中的对象来抽象化此函数以用于类似的数组，如下所示：

function printValuesVar(arr,elemId,arrId,arrNum) {
    var i = 0;
    for(i; i<arr.length; i++) {
        var obj = arr[i];
        document.getElementById(elemId).innerHTML += obj.arrId + ' = ' + obj.arrNum + '<br>';
    }
}

如下所述调用时，结果为“ undefined”（由于“ arrId”不是对象名，因此我很期待）：

printValuesVar(theArray,'result2','theId','num');

如何使用传递给函数变量的值按名称访问数组中对象的值？

---

针对反模式重写了以下建议：

function printValuesVar(arr,elemId,arrId,arrNum) {
    var i = 0;
    var content = '';
    for(i; i<arr.length; i+=1) {
        var obj = arr[i];
        content += obj[arrId] + ' = ' + obj[arrNum] + '<br>';
    }
    document.getElementById(elemId).innerHTML = content;
}

Answer 1

尝试这个：

function printValuesVar( arr, elemId, arrId, arrNum ) {
    var content = '';

    arr.forEach( function ( arrElem ) {
        content += arrElem[ arrId ] + ' = ' + arrElem[ arrNum ] + '<br>';
    });

    document.getElementById( elemId ).innerHTML = content;
}

或更高级：

function printValuesVar( arr, elemId, arrId, arrNum ) {
    document.getElementById( elemId ).innerHTML = arr.map( function ( arrElem ) {
        return arrElem[ arrId ] + ' = ' + arrElem[ arrNum ];
    }).join( '<br>' );
}

适用于糟糕浏览器的ES5-shim

Answer 2

因为您要查找键“ arrId”，而不是存储在变量arrId中的键

document.getElementById(elemId).innerHTML += obj[arrId] + ' = ' + obj[arrNum] + '<br>';