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

文字列パスによる JavaScript オブジェクトおよび配列へのアクセス

特定のシナリオでは、開発者はしばしば複雑なネストを含むデータ構造に遭遇し、文字列を使用してデータ構造内の特定の値にアクセスするという課題に直面します。

たとえば、次のことを考慮してください。 object:

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

文字列パスを使用してネストされた値を取得するには、次の手法を使用できます。

Pure 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(someObject, 'part3[0].name'); // "Part 3A"

jQuery

jQuery の $.val() メソッドを使用して、ネストされたオブジェクトと配列を移動することもできます:

$.val('part1.name', someObject); // "Part 1"
$.val('part2.qty', someObject); // 60
$.val('part3[0].name', someObject); // "Part 3A"

どちらのアプローチも、文字列パスによってネストされた構造内のデータにアクセスする便利な方法を提供します。複雑なデータの処理と操作を簡素化します。

以上が文字列パスを使用してネストされた JavaScript オブジェクトおよび配列にアクセスする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。