자바스크립트 json 객체 변환 배열

王林
풀어 주다: 2023-05-06 14:02:07
원래의
4361명이 탐색했습니다.

프런트엔드 개발에서는 종종 JavaScript 객체와 배열의 변환이 포함됩니다. 일반적인 시나리오 중 하나는 JSON 개체를 배열로 변환하는 것입니다. 이 기사에서는 JavaScript의 메서드를 사용하여 JSON 개체를 배열로 변환하는 방법을 살펴보겠습니다.

JSON은 읽고 쓰기 쉬운 간단한 형식의 경량 데이터 교환 형식입니다. JavaScript에서는 내장된 JSON 개체를 사용하여 JSON 데이터를 처리할 수 있습니다. 일반적으로 JSON 문자열을 JavaScript 객체로 변환하려면 JSON.parse() 메서드를 사용합니다. 예를 들어 다음과 같은 JSON 문자열이 있다고 가정해 보겠습니다.

let jsonString = '{"name":"小明","age":18,"gender":"男"}';
로그인 후 복사

JSON.parse() 메서드를 사용하여 이를 JavaScript 객체로 변환할 수 있습니다.

let jsonObject = JSON.parse(jsonString);
로그인 후 복사

이 작업 후에는 jsonObject 변수를 일반 객체처럼 작동할 수 있습니다. 하지만 JSON 객체를 배열로 변환하려면 어떻게 해야 할까요? 다음으로 두 가지 방법을 살펴보겠습니다.

방법 1

간단한 방법은 JSON 개체를 수동으로 반복하고 해당 속성을 배열에 저장하는 것입니다. 예를 들어, 다음 코드를 사용하여 jsonObject를 배열로 변환할 수 있습니다.

let jsonArray = [];

for(let key in jsonObject ){
    jsonArray.push(jsonObject[key]);
}
로그인 후 복사

위 코드에서는 먼저 빈 배열 jsonArray를 만듭니다. 그런 다음 for-in 루프를 사용하여 jsonObject 객체의 각 속성을 반복하고 해당 속성의 값을 jsonArray 배열에 푸시합니다. 마지막으로 jsonObject의 모든 속성 값을 포함하는 jsonArray 배열을 얻습니다.

이 방법의 단점은 충분히 간결하지 않고 객체를 수동으로 순회해야 하며 내장된 함수 변환을 직접 사용할 수 없다는 것입니다. 따라서 우리는 두 번째 방법을 채택하고 JavaScript에서 제공하는 내장 방법을 사용하여 객체와 배열을 서로 변환할 수 있습니다.

방법 2

두 번째 방법은 JavaScript의 Object.values() 메서드를 사용하는 것입니다. Object.values() 메서드는 객체 자체의 모든 속성 값으로 구성된 배열을 반환합니다. 예를 들어, 다음 코드를 사용하여 jsonObject를 배열로 변환할 수 있습니다:

let jsonArray = Object.values(jsonObject);
로그인 후 복사

위 코드에서는 Object.values() 메서드를 사용하여 jsonObject의 모든 속성 값을 추출하고 이를 jsonArray 배열에 넣습니다. . 첫 번째 방법에 비해 이 방법은 확실히 더 간단하고 읽기 쉽습니다. 동시에 내장 메소드를 사용하면 코드를 더욱 간결하고 유지 관리하기 쉽게 만들 수 있습니다.

요약:

이 글에서는 JSON 개체를 배열로 변환하는 두 가지 방법을 소개합니다. 첫 번째 방법은 JSON 객체를 수동으로 반복하고 속성 값을 배열에 저장하는 것입니다. 두 번째 방법은 JavaScript의 Object.values() 메서드를 사용하여 속성 값을 추출하여 배열에 넣는 것입니다. 두 번째 방법은 첫 번째 방법보다 더 간결하며 JavaScript에서 제공하는 내장 함수를 활용하여 코드를 더 쉽게 유지 관리할 수 있습니다.

위 내용은 자바스크립트 json 객체 변환 배열의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿