JavaScript를 JSON으로 매핑
-
자바스크립트의
map()함수 - JavaScript에서 지도 사용
-
Map to JSON에서
JSON.stringify()메서드 사용 -
Map to JSON에서
object.fromEntries()메소드 사용 - 지도를 JSON 문자열로 변환
- 결론
JSON(JavaScript Object Notation)은 일반적으로 구조화된 데이터를 표시하기 위한 텍스트 기반 형식입니다. JavaScript에서는 map() 함수를 사용하여 코드를 단순화할 수 있습니다.
자바스크립트의 map() 함수
map()으로 알려진 키/값 쌍 모음은 모든 데이터를 사용할 수 있으며 삽입 순서를 기억합니다.
이러한 훌륭한 새 구문은 map()입니다. JavaScript 배열의 모든 요소를 변경하기 위한 훌륭한 도구입니다.
모든 배열을 반복하는 데 사용합니다. 결과에 따라 최근 완성된 요소에서 생성하거나 배열의 요소를 수정하여 새로운 범위를 형성할 수 있습니다.
배열, 객체 및 정수를 포함하여 무엇이든 키는 map()이 될 수 있습니다.
예제 아래에서 map() 메서드를 사용하여 firstName 및 middleName 값을 결합하여 배열을 반복할 수 있습니다.
let users = [
{firstName: 'Bob', middleName: 'Mel', lastName: 'Lee'},
{firstName: 'Joanna', middleName: 'Kaccy', lastName: 'Smith'},
{firstName: 'Peter', middleName: 'Jone', lastName: 'Steward'}
];
let Fullnames = users.map(function(element) {
return `${element.firstName} ${element.middleName} ${element.lastName}`;
})
console.log(Fullnames);
위 코드의 출력은 다음과 같습니다.
map()을 사용하여 새 인터페이스와 기존 인터페이스를 추가 또는 삭제하고 해당 값을 검색할 수 있습니다. map 메서드의 구문은 다음과 같습니다.
arr.map(function(element, index, array) {}, this);
배열의 각 요소는 항상 현재 요소, 현재 요소의 인덱스 및 전체 배열 개체를 전달하는 콜백 함수를 호출합니다.
JavaScript에서 지도 사용
맵을 사용하여 출력을 수집하고 새 어레이에 추가할 수 있습니다. JavaScript에서 for 루프 또는 “중첩"을 사용하여 유사한 작업을 수행할 수 있습니다.
그러나 map() 함수를 사용하여 더 쉽게 읽을 수 있는 함수를 만들 수 있습니다.
새로운 map() 구문을 사용하여 map()을 빌드하고 초기화한 다음 값을 추가할 수 있습니다.
firstMap이라는 새 map()을 만들 수 있습니다.
let firstMap = new Map()
출력은 빈 맵이 됩니다.
map() 함수에 값을 부여하려면 new Map()을 사용하여 Map 객체를 생성해야 합니다.
예를 들어 새 지도 favCharacter를 사용하여 지도 개체를 만듭니다. 아래는 이에 대한 논의입니다.
let favCharacter = new Map([
['Brett Lee', 'Australian'], ['Muttiah Muralitharan', 'SriLankan'],
['Chris Gayle', 'West Indian'], ['Wasim Akram', 'Pakistan']
]);
console.log(favCharacter);
위 코드의 출력은 다음과 같습니다.
이 예에서는 해당 맵 개체에 세계적으로 유명한 크리켓 선수의 이름과 국적이 표시된 상점입니다. console.log(favCharacter);를 사용하여 위에 표시된 것과 유사한 출력을 얻을 수 있습니다.
Map to JSON에서 JSON.stringify() 메서드 사용
먼저 키와 값을 문자열로 사용하여 map()을 만들 수 있습니다. Map.forEach 메소드는 이를 사용하여 모든 요소에 대한 호출을 포함하는 맵을 실행합니다.
그런 다음 개체가 키와 값을 만들고 추가합니다. 마지막으로 개체는 JSON 형식의 JSON.stringify() 메서드를 반환합니다.
let detail = new Map()
detail.set('Name', 'Lora');
detail.set('Country', 'England');
detail.set('Age', '24');
let jsonObject = {};
detail.forEach((value, key) => {jsonObject[key] = value});
console.log(JSON.stringify(jsonObject))
위 코드의 출력은 다음과 같습니다.
Map to JSON에서 object.fromEntries() 메소드 사용
Object.fromEntries() 메서드는 입력 맵을 가져오고 이를 키와 값의 JSON 객체로 변환하는 데 사용합니다. 객체 클래스의 fromEntries 메서드는 ES6에서 도입되었습니다.
아래에서 이 방법의 예를 볼 수 있습니다.
let detail = new Map()
detail.set('Name', 'Lora');
detail.set('Country', 'England');
detail.set('Age', '24');
const result = Object.fromEntries(detail);
console.log(result)
위 코드의 출력은 다음과 같습니다.
지도를 JSON 문자열로 변환
마찬가지로 Object.fromEntries()를 사용하여 지도를 JSON 문자열과 JavaScript 객체로 바꿀 수 있습니다. 그런 다음 해당 개체를 JavaScript 메서드 JSON.stringify()에 대한 인수로 전달합니다.
통사론:
var obj = Object.fromEntries(details);
var jsonString = JSON.stringify(obj);
이 구문을 사용하여 JavaScript 맵을 JSON 문자열로 변환할 수 있습니다. 아래 예에서 해당 구문이 어떻게 작동하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<body>
<pre id="output"></pre>
<script>
var detail = new Map([['Name', 'James'],['Country', 'America'],['Age', 23]]);
var obj = Object.fromEntries(detail);
var jsonString = JSON.stringify(obj);
document.getElementById('output').innerHTML += jsonString;
</script>
</body>
</html>
위 코드의 출력은 다음과 같습니다.
결론
이 기사에서는 JavaScript 맵을 JSON으로 변환하는 방법을 살펴보았습니다. 사용할 수 있는 몇 가지 방법에 대해 논의했습니다.
주로 JavaScript의 JSON.stringify() 메서드와 Object.fromEntries() 메서드를 사용하여 맵을 JSON 문자열로 변환하는 방법을 배웠습니다.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.