如何使用字符串路径轻松访问嵌套的 JavaScript 对象和数组？-js教程-PHP中文网

如何使用字符串路径轻松访问嵌套的 JavaScript 对象和数组？

Linda Hamilton

发布： 2024-12-23 11:56:08

原创

637 人浏览过

How to Easily Access Nested JavaScript Objects and Arrays Using String Paths?

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

在 JavaScript 中访问深度嵌套的对象和数组可能是一项繁琐的任务。为了简化这个过程，出现了一种利用字符串路径直接检索特定值的解决方案。

纯 JavaScript 解决方案

名为“Object.byString( )" 允许使用遵循点分隔路径的字符串提取嵌套值。该解决方案的功能如下：

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
        } else {
            return;
        }
    }
    return o;
}

登录后复制

用法：

Object.byString(someObj, 'part3[0].name');

登录后复制

jQuery 解决方案

jQuery 提供了一种更简单的语法来访问嵌套值：

$('someObj').data('part3[0].name');

登录后复制

示例用法

考虑以下对象：

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 = Object.byString(someObject, 'part1.name');
var part2quantity = Object.byString(someObject, 'part2.qty');
var part3name1 = Object.byString(someObject, 'part3[0].name');

登录后复制

这些变量将现在保存嵌套对象中的相应值。

以上是如何使用字符串路径轻松访问嵌套的 JavaScript 对象和数组？的详细内容。更多信息请关注PHP中文网其他相关文章！