在对象数组上使用函数变量时的 Javascript 'undefined'

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 for shitty browsers