중첩된 개체, 배열 또는 JSON에 액세스하고 처리하는 방법은 무엇입니까?

Question

객체와 배열을 포함하는 중첩된 데이터 구조가 있습니다. 정보를 추출하는 방법, 즉 특정 또는 여러 값(또는 키)에 액세스하는 방법은 무엇입니까?

예:

으아악

접속 방법items中第二项的name?

Answer 1

이 방법으로 액세스할 수 있습니다

으아악

또는

으아악

두 방법 모두 동일합니다.

Answer 2

사전 지식

JavaScript에는 여러 값을 포함할 수 있는 데이터 유형이 하나뿐입니다: Object. Array는 특별한 형태의 객체입니다.

(일반) 개체는 다음과 같은 형태를 갖습니다

으아악

배열의 형태는

으아악

배열과 개체는 모두 key -> value 구조를 노출합니다. 배열의 키는 숫자여야 하며, 객체에서는 어떤 문자열이라도 키로 사용할 수 있습니다. 키-값 쌍은 "속성"이라고도 합니다.

속성은 점 표기법

을 사용하여 액세스할 수 있습니다. 으아악

또는 괄호 표기법, 속성 이름이 유효한 JavaScript 식별자 이름​​^[spec]이 아니거나 이름이 변수 값인 경우:

으아악

따라서 배열 요소는 대괄호 표기법을 통해서만 액세스할 수 있습니다.

으아악

잠깐...JSON은 어떻습니까?

JSON은 XML, YAML, CSV 등과 마찬가지로 데이터를 텍스트로 표현한 것입니다. 이러한 데이터를 처리하려면 먼저 이를 JavaScript 데이터 유형, 즉 배열 및 객체로 변환해야 합니다(이러한 데이터를 처리하는 방법은 방금 설명했습니다). 질문 JSON을 JavaScript로 구문 분석하나요? JSON을 구문 분석하는 방법은 에 설명되어 있습니다.

추가 자료

배열과 객체에 접근하는 방법은 자바스크립트의 기본이므로 MDN 자바스크립트 가이드, 특히 다양한 섹션을 읽어보는 것을 권장합니다

• 객체 사용
• 배열
• Eloquent JavaScript - 데이터 구조

---

---

중첩 데이터 구조에 액세스

중첩된 데이터 구조는 다른 배열이나 개체를 참조하는 배열이나 개체입니다. 즉, 해당 값은 배열이나 개체입니다. 이러한 구조는 점 또는 대괄호 표기법을 연속적으로 적용하여 액세스할 수 있습니다.

예는 다음과 같습니다.

으아악

두 번째 항목의 名称에 액세스하고 싶다고 가정해 보겠습니다.

단계별 방법은 다음과 같습니다.

보시다시피 data 是一个对象，因此我们可以使用点表示法访问其属性。 items 속성은 다음과 같이 액세스됩니다.

으아악

값은 배열이며 두 번째 요소에 액세스하려면 대괄호 표기법을 사용해야 합니다.

으아악

이 값은 객체이며 다시 점 표기법을 사용하여 name 속성에 액세스합니다. 그래서 우리는 다음과 같이 끝납니다:

으아악

또는 모든 속성에 대괄호 표기법을 사용할 수 있습니다. 특히 이름에 점 표기법에 적합하지 않은 문자가 포함된 경우에는 더욱 그렇습니다.

으아아아

---

숙소에 접근하려고 하는데 undefined 정보만 얻을 수 있나요?

대부분의 경우 未定义객체/배열에는 해당 이름의 속성이 없습니다.

으아아아

console.log 或 console.dir을 사용하여 개체/배열의 구조를 확인하세요. 액세스하려는 속성이 실제로 중첩된 개체/배열에 정의되어 있을 가능성이 있습니다.

으아아아

---

속성 이름이 동적인데 미리 알 수 없다면 어떻게 되나요?

속성 이름을 알 수 없거나 객체/배열 요소의 모든 속성에 액세스하려는 경우 for...in ^[MDN] 循环对象和 for ^[MDN] 루프 배열을 사용하여 모든 속성/요소를 반복할 수 있습니다.

객체

data의 모든 속성을 반복하려면 다음과 같이 객체 를 반복할 수 있습니다.

으아아아

객체의 출처(및 수행하려는 작업)에 따라 속성이 실제로 객체의 속성인지 아니면 상속된 속성인지 여부를 각 반복에서 테스트해야 할 수도 있습니다. Object#hasOwnProperty代码> [MDN]을 사용할 수 있습니다.

for...in 和 hasOwnProperty 的替代方案，您可以使用 Object.keysfor...in 및 hasOwnProperty 대신 ^Object.keys [MDN]

속성 이름 배열 가져오기

: 으아아아

배열

data.items 数组 的所有元素，我们使用 for

data.items for...inarray의 모든 요소를 ​​반복하기 위해 for 루프를 사용합니다.

으아아아

for...in을 사용하여 배열을 반복할 수도 있지만 이를 피해야 하는 몇 가지 이유가 있습니다. forEachJavaScript에서 배열과 함께 "for(var item in list)"를 사용하는 이유는 다음과 같습니다. 나쁜 행동으로 간주됩니까? . ECMAScript 5에 대한 브라우저 지원이 계속 증가함에 따라 배열 방법 forEach

🎜[MDN]🎜🎜🎜도 흥미로운 대안이 됩니다. 🎜으아악

ES2015(ES6)를 지원하는 환경에서는 배열뿐만 아니라 모든 Iterable 객체for...of와 함께 작동하는 [MDN] 루프를 사용할 수도 있습니다.

으아악

각 반복마다 for...of는 액세스하거나 사용할 "인덱스" 없이 반복 가능 항목의 다음 요소를 직접 제공합니다.

---

데이터 구조의 "깊이"를 모른다면 어떻게 되나요?

알 수 없는 키 외에도 데이터 구조의 "깊이"(즉, 중첩된 객체가 몇 개 있는지)도 알 수 없습니다. 깊이 중첩된 속성에 액세스하는 방법은 정확한 데이터 구조에 따라 달라지는 경우가 많습니다.

그러나 데이터 구조에 이진 트리 표현과 같은 반복 패턴이 포함된 경우 솔루션에는 일반적으로 데이터 구조의 모든 수준에 액세스하는 recursion ^[Wikipedia]이 포함됩니다.

다음은 이진 트리의 첫 번째 리프 노드를 얻는 예입니다.

으아악

으아악