Javascript'未定义'在对象数组上使用函数变量时

Javascript 'undefined' when using a function variable on an array of objects

本文关键字：函数 变量 对象 未定义 Javascript 数组      更新时间：2023-09-26

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

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;
}

试试这个：

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填充程序

因为您锁定的是密钥"arrId"，而不是存储在变量arrId 中的密钥

document.getElementById(elemId).innerHTML += obj[arrId] + ' = ' + obj[arrNum] + '<br>';
相关文章：