使用字符串访问包含属性的数组

Access an array containing properties with a string

本文关键字:属性 数组 包含 访问 字符串      更新时间:2023-09-26

当我尝试使用字符串访问全局数组索引的属性时,我遇到了问题。我动态生成了如下所示的字符串:

var foo = "arr[0].prp[0].prp[1]"

数组中的索引及其深度是动态的,我只是提供一个示例来说明它可能是什么样子。

现在的问题是,当我尝试使用此字符串来获取这样的属性时,它失败了:

foo.somethingfoo["something"]window[foo].somethingwindow[foo]["something"]

但是,我可以使用 eval(( 让它工作,但我真的很想在不必使用它的情况下逃脱。

有人有任何建议或想法吗?

使用eval可能是一个坏主意,所以我将提供一个替代解决方案。如果您提供了字符串的生成方式,则可以省去解析它并重写生成器的麻烦。

您生成了一个字符串,如下所示

var foo = "arr[0].prp[0].prp[1]";

如果您使用像这样的正则表达式会发生什么/'['d+']|'..*?(?=['.'[])/ig

var m = foo.match(/'['d+']|'..*?(?=['.'[])|^.*?(?=['.'[])/ig);
// ["arr", "[0]", ".prp", "[0]", ".prp", "[1]"]

只需要多一点解析

m = m.map(function (e) {
    if (e.charAt(0) === '.') return e.slice(1);
    else if (e.charAt(0) === '[') return e.slice(1, -1);
    else return e
});
// ["arr", "0", "prp", "0", "prp", "1"]

现在你可以循环它

var o = window, i;
for (i = 0; i < m.length; ++i) {
    o = o[m[i]];
}
// o is now the result of window.arr[0].prp[0].prp[1]

*现场演示*

var part = {
    "arr": [
        {
            "prp": [
                {
                    "prp": [
                        "result"
                     ]
                }
            ]
        }
    ]
};
var foo = "arr[0].prp[0].prp[0]";
function getValue(obj, chain) {
    var keys = chain.split(''.'),
        iterable = [];
    for (var i = 0, len = keys.length; i < len; i++) {
        var parts = keys[i].split('[');
        parts[1] = parts[1].replace('']', '');
        iterable.push(parts[0], parts[1]);
    }
    target = obj[iterable[0]];
    for (var j = 1, len = iterable.length; j < len; j++) {
        target = target[iterable[j]];
    };
    return target;
};

另一种方法:

    var obj = {
        arr: [{
            prp: [{
                prp: ['a', 'b', 'c']
            }]
        }]
    };
    var foo = "arr[0].prp[0].prp[1]";
    var path = foo.replace(/']/g, "").replace(/'[/g, ".").split('.').reverse();
    var res = obj;
    while (path.length && res){
        var el = path.pop();
        res = res[el];
    }
    console.log(res);