[개인학습 JavaScript 10일차] JSON(2) - 복합자료구조
19364 단어 JavaScriptJavaScript
01. 데이터 타입을 포함하는 자료구조
JSON 데이터 내부에서 배열이 존재할때 그 배열에 접근 하는 방법이다.
JSON의 key[index] 배열의 인덱스번호로 접근하여 해당 부분의 값을 가지고 올 수 있다.
const company = { name : "(주)굿모닝컴페니", since : 2013, department : ["기획팀","디자인팀","개발팀"] }; console.log(company.name); //점으로 연결 (기본 접근방식) -선호 console.log(company['since']); // 배열처럼 연결 (기본 접근방식) console.log(company.department[0]); // 배열[인덱스번호] 접근 console.log(company.department[1]); console.log(company['department'][2]);
02. 계층구조
02-1. 다른 JSON 객체를 value로 포함하는 경우
JSON 데이터 안에 다른 JSON의 정보들도 담을 수 있다.
//단일 형태의 JSON let centerPoint = { x : 5, // x좌표 y : 10 // y좌표 }; // 다른 JSON을 포함하는 JSON let circle1 = { center : centerPoint, //중심의 좌표 radius : 5.10 //반지름 }; console.log("원의 중심 : (%d , %d)" , circle1.center.x,circle1.center.y); console.log("원의 반지름 : %d",circle1.radius);
02-2.계층구조
JSON같은 경우에는 문자형 숫자형 ~ 객체 배열 등 undefined을 제외한 다양한 타입들의 값을 value 값으로 담을 수 있다.
계층적으로 정리를 하면 해당 JSON 속 정보들을 한 눈에 보고 사용하기 용의 하기 때문이다.
let circle2 = { center : { // 중심의 좌표 x : 5, // x 좌표 y : 10 // y 좌표 }, radius : 5.10 // 반지름 }; console.log("원의 중점 : " + circle2.center.x , circle2.center.y); console.log("원의 반지름 : " + circle2.radius);
03. 목록구조
03-1. 목록이 아이템으로 사용될 JSON 객체 정의하기
const student1 = { studeo : 10101, grabe : 1, name : "학생1" }; const student2 = { studeo : 20202, grabe : 2, name : "학생2" }; /* 목록 구조를 갖는 JSON 객체 */ const classRoom = { student : [student1, student2] } console.log(classRoom); /* classRoom 출력 { student: [ { studeo: 10101, grabe: 1, name: '학생1' }, { studeo: 20202, grabe: 2, name: '학생2' } ] } */
03-2. 배열의 기본특성을 활용하여 반복문으로 접근 활용
for(let i = 0 ; i <classRoom.student.length;i++){ console.log(">> 학번" + classRoom.student[i].studeo); console.log(">> 학년" + classRoom.student[i].grabe); console.log(">> 이름" + classRoom.student[i].name); }
03-3. 배열의 원소로서 JSON 구조를 직접 명시하기
const classRoom = { student : [{ studeno : 10101, grade : 1, name : "학생1" },{ studno : 20202, grade : 2, name : "학생2" }] }; /* classRoom 출력 { student: [ { studeo: 10101, grabe: 1, name: '학생1' }, { studeo: 20202, grabe: 2, name: '학생2' } ] } */
03-4. 배열의 기본특성을 활용하여 반복문으로 접근 활용
for( let i = 0 ; i < classRoom.student.length; i++){ console.log(">> 학번 : " + classRoom.student[i].studeo); console.log(">> 학년 : " + classRoom.student[i].grade); console.log(">> 이름 : " + classRoom.student[i].name); }
03-5. 가장 일반적인 형태의 목록 구조
목록을 구성하는 배열 외의 목록을 설정하기 위한 부가 정보도 함께 포함을 한다.
const bbs = { title : "공지사항", count : 4, item : [ {id:1,subject:'첫번째 게시물 제목'}, {id:2,subject:'두번째 게시물 제목'}, {id:3,subject:'세번째 게시물 제목'}, {id:4,subject:'네번째 게시물 제목'} ] }; console.log("게시판 이름 :" + bbs.title); console.log("전체 게시물 수 :" + bbs.count); /*반복문을 통해 게시물 제목 출력*/ for(let i=0; i<bbs.item.length; i++){ console.log("[" + bbs.item[i].id + "] " + bbs.item[i].subject); }
장점 -
데이터가 계층적으로 구성될 수 있기 때문에 데이터간의 포함관계를 표현하기가 쉽다
단점 -
하위 객체로 포함된 JSON의 이름들이 독립적이기 때문에 하나의 객체 안에 존재하는 하위 객체들간의 연관성이 적다
Author And Source
이 문제에 관하여([개인학습 JavaScript 10일차] JSON(2) - 복합자료구조), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bottlesun/개인학습-JavaScript-10일차-JSON2-복합자료구조저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)