> 웹 프론트엔드 > JS 튜토리얼 > 문자열 경로를 사용하여 중첩된 JavaScript 개체 및 배열에 쉽게 액세스하는 방법은 무엇입니까?

문자열 경로를 사용하여 중첩된 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿