JavaScript에서 JSON 객체 배열 사용하기
- JSON 객체 배열 생성
- JSON 객체 배열에서 객체 액세스
- JSON 객체 배열 반복
- JSON 객체 배열에 객체 추가
- JSON 객체 배열에서 객체 제거
- JSON 객체 배열에서 요소 검색
JSON 객체는 간단한 JavaScript 객체입니다. 많은 유사한 JSON 객체로 배열을 생성할 수 있습니다. 자바스크립트에서는 C, C++, Java 등과 같은 언어와 달리 JSON 객체 배열을 다루기가 쉽습니다. C의 Array 구조나 Java의 클래스 객체 배열과 비슷합니다. 이 기사에서는 반복하고 그 안의 요소를 찾는 JSON 객체 배열을 만드는 방법에 대해 논의할 것입니다.
JSON 객체 배열 생성
JSON 배열을 변수에 할당하거나 .push() 연산자를 사용하여 객체 배열에 값을 동적으로 추가하거나, 다음과 같은 반복 구문을 사용하여 배열 인덱스에 객체를 추가하여 JSON 객체의 배열을 생성할 수 있습니다. for 루프 또는 while 루프. 더 잘 이해하려면 다음 코드를 참조하십시오.
var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
console.log(JSON.stringify(months));
var monthNames = ['January', 'February'];
var month = {};
var monthsArray = [];
for (let i = 0; i < 2; i++) {
month.id = (i + 1);
month.name = monthNames[i];
monthsArray.push({...month});
}
console.log(JSON.stringify(monthsArray));
출력:
[{"id":1,"name":"January"},{"id":2,"name":"February"}]
[{"id":1,"name":"January"},{"id":2,"name":"February"}]
위의 코드에서 months 변수는 명시적으로 할당된 JSON 개체의 배열을 보유하는 반면 monthsArray는 for 루프 내부에 값을 할당하여 생성된 JSON 개체의 배열입니다. .push() 배열 함수를 사용하여 생성된 자바스크립트 객체를 monthsArray의 끝에 추가합니다. JavaScript console.log() 문을 사용하여 기록할 때 두 배열 모두 동일한 구조를 표시합니다. JSON.stringify() 함수는 JSON 배열을 문자열 형식으로 변환하여 사람이 읽을 수 있는 형식으로 만듭니다.
JSON 객체 배열에서 객체 액세스
JSON 객체 배열을 만들었습니다. 이 배열의 요소에 액세스하는 방법을 살펴보겠습니다. 접근 방식은 간단한 문자열 배열이나 숫자 배열에 대해 수행하는 것과 동일합니다. 배열 인덱스(0에서 시작)를 사용하여 배열 개체에 액세스하고 해당 인덱스에서 개체 값을 조작할 수 있습니다. 다음 코드를 참조하십시오.
var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
console.log(months[0].id);
console.log(months[0].name);
months[0].id = 3;
months[0].name = 'March';
console.log(months[0].id);
console.log(months[0].name);
출력:
1
January
3
March
코드에서 array Index를 사용하여 months 배열의 첫 번째 인덱스에 액세스하여 객체 매개변수의 값을 변경했습니다. 마찬가지로 인덱스를 사용하여 배열의 다른 개체 값을 변경할 수 있습니다.
JSON 객체 배열 반복
문자열 배열이나 숫자 배열과 같은 방식으로 객체 배열을 반복할 수 있습니다. 목적을 위해 for 루프 또는 while 루프를 사용할 수 있습니다. 배열 인덱스를 사용하여 요소에 액세스할 수 있습니다. 0번째 인덱스에서 배열 길이까지 배열을 반복합니다. .length 속성은 객체 배열의 .length도 반환합니다. 배열을 반복하고 그 안에 있는 각 객체의 값을 인쇄하는 것을 보여주는 다음 코드를 참조하십시오.
var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
for (let i = 0; i < months.length; i++) {
console.log(`${i} id:${months[i].id}, name:${months[i].name}`)
}
출력:
0 id:1, name:January
1 id:2, name:February
JSON 객체 배열에 객체 추가
우리는 객체 배열을 만들고 이를 반복했습니다. 이제 JSON 배열에 요소를 추가하는 방법을 살펴보겠습니다. .push() 함수를 사용하여 배열 끝에 JSON 객체를 추가할 수 있습니다. .unshift() 함수는 JSON 배열의 시작 부분에 요소를 추가합니다. .splice()는 배열의 지정된 인덱스에 개체를 삽입합니다. 이러한 각 기능의 사용법을 설명하는 다음 코드를 참조하십시오.
var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
months.push({'id': 4, 'name': 'April'});
console.log(JSON.stringify(months));
months.unshift({'id': 12, 'name': 'December'})
console.log(JSON.stringify(months));
months.splice(3, 0, {'id': 3, 'name': 'March'});
console.log(JSON.stringify(months));
출력:
[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":4,"name":"April"}]
[{"id":12,"name":"December"},{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":4,"name":"April"}]
[{"id":12,"name":"December"},{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"},{"id":4,"name":"April"}]
.splice() 함수를 사용하여 배열의 객체를 매개변수로 전달된 최신 값으로 바꿀 수 있습니다. .splice() 메서드의 첫 번째 매개변수는 작업을 수행하는 인덱스입니다. 두 번째 매개변수로 교체하려는 요소의 수를 언급합니다. 마지막 매개변수는 배열에 삽입하는 값입니다.
JSON 객체 배열에서 객체 제거
간단한 JavaScript 배열과 유사한 방식으로 객체 배열에서 요소를 제거할 수 있습니다. JavaScript의 .pop() 메서드를 사용하여 JSON 객체 배열의 끝에서 요소를 제거할 수 있습니다. .shift()는 JSON 객체 배열의 시작 부분에서 객체를 제거합니다. .splice() 함수는 JSON 배열의 지정된 인덱스에서 요소를 제거합니다. 다음 코드를 참조하십시오.
var months = [
{'id': 12, 'name': 'December'}, {'id': 1, 'name': 'January'},
{'id': 2, 'name': 'February'}, {'id': 3, 'name': 'March'},
{'id': 4, 'name': 'April'}
];
months.shift();
console.log(JSON.stringify(months));
months.pop();
console.log(JSON.stringify(months));
months.splice(1, 1);
console.log(JSON.stringify(months));
출력:
[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"},{"id":4,"name":"April"}]
[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"}]
[{"id":1,"name":"January"},{"id":3,"name":"March"}]
JSON 객체 배열에서 요소 검색
.indexOf() 또는 includes()를 사용하여 요소가 간단한 문자열 배열에 있는지 확인할 수 있습니다. 그러나 이러한 메서드는 개체 배열에 대해 작동하지 않습니다. .filter(), .find(), findIndex()와 같은 특정 유사한 기능을 사용하여 요소가 배열에 있는지 확인할 수 있습니다. 수동으로 배열을 반복하고 요소가 반복 구문(예: for, while 루프 등)을 사용하여 존재하는지 확인할 수 있지만, 이는 부피가 큰 코드로 이어질 수 있으므로 고려해야 할 마지막 옵션일 수 있습니다. .filter(), .find(), findIndex()와 같은 자바스크립트 내장 함수는 JSON 개체 배열에서 개체를 검색하는 데 유용합니다. .filter() 함수는 특정 조건을 만족하는 객체를 포함하는 배열을 반환하고, .find()는 인라인 함수로 전달된 조건을 충족하는 객체를 반환하고, .findIndex()는 반환합니다. 배열에서 찾을 수 있으면 객체의 인덱스이고, 그렇지 않으면 -1을 반환합니다. 따라서 함수의 반환 유형을 알면 JSON 개체 배열에서 검색 기능을 설계할 수 있습니다. .filter(), .find(), findIndex()의 사용법을 더 잘 이해하려면 다음 코드를 참조하십시오.
var months = [
{'id': 12, 'name': 'December'}, {'id': 1, 'name': 'January'},
{'id': 2, 'name': 'February'}, {'id': 3, 'name': 'March'},
{'id': 4, 'name': 'April'}
];
(months.filter(i => i.name === 'April').length) ?
console.log('April month found') :
console.log('Not found');
(months.find(i => i.name === 'January') != {}) ?
console.log('January month found') :
console.log('Not found');
(months.findIndex(i => i.name === 'April') > -1) ?
console.log('April month found') :
console.log('Not found');
출력:
April month found
January month found
April month found