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의 이름들이 독립적이기 때문에 하나의 객체 안에 존재하는 하위 객체들간의 연관성이 적다
728x90
'STUDY > JavaScript' 카테고리의 다른 글
[JavaScript] JSON(4) 참조복사 (0) | 2022.11.27 |
---|---|
[JavaScript] JSON(3) 확장 , 반복문 (0) | 2022.11.27 |
[JavaScript] JSON (0) | 2022.11.27 |
[JavaScript] 배열(array)에 쓰이는 함수(1) (0) | 2022.11.27 |
[JavaScript] 배열(array) 총합 , 평균 구하기 (0) | 2022.11.27 |
댓글