8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

通过字符串路径访问嵌套的 JavaScript 对象和数组

anthony sottile 2月前

178 0

我有一个这样的数据结构:var someObject = {'part1': {'name':'第 1 部分','size':'20','qty':'50'},'part2': {'name':'第 2 部分',...

我有一个这样的数据结构:

var someObject = {
    'part1' : {
        'name': 'Part 1',
        'size': '20',
        'qty' : '50'
    },
    'part2' : {
        'name': 'Part 2',
        'size': '15',
        'qty' : '60'
    },
    'part3' : [
        {
            'name': 'Part 3A',
            'size': '10',
            'qty' : '20'
        }, {
            'name': 'Part 3B',
            'size': '5',
            'qty' : '20'
        }, {
            'name': 'Part 3C',
            'size': '7.5',
            'qty' : '20'
        }
    ]
};

我想使用这些变量访问数据:

var part1name = "part1.name";
var part2quantity = "part2.qty";
var part3name1 = "part3[0].name";

part1name 应填写 someObject.part1.name 的值,即 \'Part 1\'。part2quantity 也一样,填写 60。

有没有办法用纯 javascript 或 JQuery 来实现这一点?

帖子版权声明 1、本帖标题:通过字符串路径访问嵌套的 JavaScript 对象和数组
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由anthony sottile在本站《object》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 这是我使用的解决方案:

    function resolve(path, obj=self, separator='.') {
        var properties = Array.isArray(path) ? path : path.split(separator)
        return properties.reduce((prev, curr) => prev?.[curr], obj)
    }
    

    使用示例:

    // accessing property path on global scope
    resolve("document.body.style.width")
    // or
    resolve("style.width", document.body)
    
    // accessing array indexes
    // (someObject has been defined in the question)
    resolve("part3.0.size", someObject) // returns '10'
    
    // accessing non-existent properties
    // returns undefined when intermediate properties are not defined:
    resolve('properties.that.do.not.exist', {hello:'world'})
    
    // accessing properties with unusual keys by changing the separator
    var obj = { object: { 'a.property.name.with.periods': 42 } }
    resolve('object->a.property.name.with.periods', obj, '->') // returns 42
    
    // accessing properties with unusual keys by passing a property name array
    resolve(['object', 'a.property.name.with.periods'], obj) // returns 42
    

    限制:

    • 不能使用括号 ( [] ) 作为数组索引 - 尽管在分隔符标记之间指定数组索引(例如, . )可以正常工作,如上所示。
返回
作者最近主题: