文字列パスを使用してネストされた JavaScript オブジェクトと配列に簡単にアクセスする方法

文字列パスによるネストされた 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 中国語 Web サイトの他の関連記事を参照してください。